/* * Theme Name: Salient Child — Nousbo Global * Theme URI: https://global.nousbo.com * Description: Salient Child Theme for Nousbo Global Website * Author: Nousbo * Author URI: https://global.nousbo.com * Template: salient * Version: 1.0.0 * Text Domain: salient-child */ /* ============================================================ STEP 1. Pretendard Variable Font Load (CDN) ============================================================ */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); /* ============================================================ STEP 2. Nousbo Design Tokens 전체 사이트에서 var(--토큰명) 으로 꺼내 쓰는 공통 변수 ============================================================ */ :root { /* ── Font Stack ── */ --font-base: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; /* ── Font Weights ────────────────────────────────────────── 300 Light : 캡션, 각주, 푸터 보조 (제한 사용) 400 Regular : Body 기본 본문 500 Medium : GNB 데스크탑 Nav 600 SemiBold : H4~H6, 버튼 Secondary, Tag, Form Label 700 Bold : Hero, H1~H3, 버튼 Primary, Overline 800 ExtraBold : Key Stats 숫자 전용 (30+, 60% 등) ────────────────────────────────────────────────────────── */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ── Line Heights ── */ --lh-tight: 1.1; /* Display, Hero 헤드라인 */ --lh-snug: 1.25; /* H1 ~ H3 */ --lh-normal: 1.5; /* H4 ~ H6, UI */ --lh-relaxed: 1.7; /* Body 기본 본문 */ /* ── Letter Spacing ── */ --ls-tight: -0.03em; /* Display / Hero */ --ls-normal: -0.01em; /* Body (한/영 혼용 최적) */ --ls-wide: 0.04em; /* 버튼, 레이블 */ --ls-wider: 0.08em; /* 태그, 배지 */ --ls-widest: 0.14em; /* Overline ALL CAPS */ /* ── Font Size Scale (rem + clamp) ──────────────────────── clamp(모바일최소, 유동값, 데스크탑최대) 모바일 375px 기준 → 데스크탑 1280px 기준 자동 스케일 ────────────────────────────────────────────────────────── */ /* Display — Hero 전용 */ --fs-display-2xl: clamp(2.75rem, 5.5vw + 0.5rem, 5rem); /* 44px → 80px */ --fs-display-xl: clamp(2.25rem, 4vw + 0.5rem, 4rem); /* 36px → 64px */ --fs-display-lg: clamp(1.875rem, 3vw + 0.5rem, 3rem); /* 30px → 48px */ /* Headings */ --fs-h1: clamp(1.75rem, 2.5vw + 0.75rem, 2.75rem); /* 28px → 44px */ --fs-h2: clamp(1.5rem, 2vw + 0.5rem, 2.25rem); /* 24px → 36px */ --fs-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem); /* 20px → 28px */ --fs-h4: clamp(1.125rem, 1vw + 0.5rem, 1.375rem); /* 18px → 22px */ --fs-h5: clamp(1rem, 0.5vw + 0.5rem, 1.125rem); /* 16px → 18px */ --fs-h6: 1rem; /* 16px 고정 */ /* Body */ --fs-body-lg: clamp(1.0625rem, 0.5vw + 0.75rem, 1.25rem); /* 17px → 20px */ --fs-body-md: clamp(0.9375rem, 0.25vw + 0.75rem, 1.0625rem);/* 15px → 17px */ --fs-body-sm: clamp(0.875rem, 0.2vw + 0.75rem, 0.9375rem);/* 14px → 15px */ --fs-body-xs: 0.8125rem; /* 13px 고정 */ /* UI / Labels */ --fs-label-lg: 1rem; /* 16px | 700 Bold */ --fs-label-md: 0.9375rem; /* 15px | 600 SemiBold */ --fs-label-sm: 0.8125rem; /* 13px | 600 SemiBold */ --fs-label-xs: 0.75rem; /* 12px */ --fs-overline: 0.75rem; /* 12px | 700 + --ls-widest + uppercase */ /* Nav */ --fs-nav-desktop: 0.9375rem; /* 15px | 500 Medium */ --fs-nav-mobile: 1rem; /* 16px | 600 SemiBold (iOS zoom 방지) */ --fs-nav-sub: 0.875rem; /* 14px | 400 Regular */ /* Data / Stats — 숫자 강조 */ --fs-data-xl: clamp(2rem, 3vw + 0.5rem, 3.5rem); /* 32px → 56px */ --fs-data-lg: clamp(1.5rem, 2vw + 0.5rem, 2.25rem); /* 24px → 36px */ --fs-data-md: clamp(1.125rem, 1vw + 0.5rem, 1.5rem); /* 18px → 24px */ /* ── Brand Colors ── */ --nb-green: #1a6b3a; --nb-green-dark: #134f2b; --nb-green-light: #e8f5ec; --nb-accent: #4dab6d; --nb-gold: #c8a84b; --nb-charcoal: #1c2b1e; --nb-gray-700: #3d4d3f; --nb-gray-500: #6b7c6e; --nb-gray-300: #b0bdb2; --nb-gray-100: #f4f6f4; --nb-white: #ffffff; /* ── Spacing (선택 사항 — 나중에 활용) ── */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; } /* ============================================================ STEP 3. Base Typography Override Salient 기본 폰트를 Pretendard로 전면 교체 ============================================================ */ /* 전체 기본 */ body, p, li, td, th, input, select, textarea, button, .wpb_wrapper, .nectar-el, .vc_column-inner { font-family: var(--font-base) !important; font-size: var(--fs-body-md); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); letter-spacing: var(--ls-normal); color: var(--nb-charcoal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings */ h1, .h1, .wpb_wrapper h1, .nectar-el h1 { font-family: var(--font-base) !important; font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } h2, .h2, .wpb_wrapper h2, .nectar-el h2 { font-family: var(--font-base) !important; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } h3, .h3, .wpb_wrapper h3, .nectar-el h3 { font-family: var(--font-base) !important; font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); } h4, .h4, .wpb_wrapper h4, .nectar-el h4 { font-family: var(--font-base) !important; font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-normal); letter-spacing: var(--ls-normal); } h5, .h5, .wpb_wrapper h5, .nectar-el h5 { font-family: var(--font-base) !important; font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: var(--lh-normal); } h6, .h6, .wpb_wrapper h6, .nectar-el h6 { font-family: var(--font-base) !important; font-size: var(--fs-h6); font-weight: var(--fw-semibold); line-height: var(--lh-normal); } /* ============================================================ STEP 4. Navigation ============================================================ */ /* 데스크탑 GNB */ #header-outer nav > ul > li > a, .sf-menu > li > a { font-family: var(--font-base) !important; font-size: var(--fs-nav-desktop) !important; font-weight: var(--fw-medium) !important; letter-spacing: var(--ls-wide); } /* 드롭다운 서브메뉴 */ .sf-menu ul li a, #header-outer nav ul ul li a { font-family: var(--font-base) !important; font-size: var(--fs-nav-sub) !important; font-weight: var(--fw-regular) !important; } /* 모바일 햄버거 메뉴 */ #mobile-menu li a, .mobile-menu li a { font-family: var(--font-base) !important; font-size: var(--fs-nav-mobile) !important; font-weight: var(--fw-semibold) !important; } /* ============================================================ STEP 5. Buttons ============================================================ */ /* Primary CTA */ .nectar-button, a.nectar-button, .wpb_wrapper .nectar-button, input[type="submit"], button[type="submit"] { font-family: var(--font-base) !important; font-weight: var(--fw-bold) !important; letter-spacing: var(--ls-wide) !important; } /* Secondary / Outline */ .nectar-button.see-through, .nectar-button.outline { font-weight: var(--fw-semibold) !important; } /* ============================================================ STEP 6. Mobile Responsive Override 375px 모바일 전용 예외 처리 ============================================================ */ @media (max-width: 767px) { /* iOS Safari 자동 zoom 방지 — input 16px 미만 시 zoom 발생 */ input, select, textarea { font-size: 1rem !important; } /* 모바일 Nav */ #mobile-menu li a { font-size: var(--fs-nav-mobile) !important; font-weight: var(--fw-semibold) !important; } } /* ============================================================ STEP 7. Nousbo Custom Components 각 페이지 PHP 템플릿에서 사용할 공통 컴포넌트 ============================================================ */ /* ── Overline / Eyebrow ── */ .nb-overline { font-family: var(--font-base); font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--nb-accent); display: block; margin-bottom: 0.5rem; } /* ── Key Stats (숫자 강조) ── */ .nb-stat-number { font-family: var(--font-base); font-size: var(--fs-data-xl); font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: var(--ls-tight); color: var(--nb-green); } .nb-stat-label { font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--nb-gray-500); margin-top: 0.4rem; display: block; } /* ── Body Lead (인트로 리드 문장) ── */ .nb-lead { font-size: var(--fs-body-lg); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--nb-gray-700); } /* ── Caption / Footnote ── */ .nb-caption { font-size: var(--fs-body-xs); font-weight: var(--fw-light); color: var(--nb-gray-500); line-height: var(--lh-normal); } /* ── Tag / Badge ── */ .nb-tag { display: inline-block; font-size: var(--fs-label-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; background: var(--nb-green-light); color: var(--nb-green); padding: 0.25em 0.75em; border-radius: 3px; } /* ── Section Divider ── */ .nb-section-divider { border: none; border-top: 1px solid var(--nb-gray-100); margin: var(--space-xl) 0; } /* ── 20260326 Mobile Brand Nav (≤768px) ── */ #nb-mobile-brandnav { display: none; /* JS로 body에 추가되면서 표시 */ } @media (max-width: 768px) { #nb-mobile-brandnav { display: flex; position: fixed; top: 57px; left: 0; right: 0; width: 100%; background: #fff; border-bottom: 1px solid #e5e9e6; box-shadow: 0 2px 6px rgba(0,0,0,0.08); z-index: 999; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #nb-mobile-brandnav::-webkit-scrollbar { display: none; } .nb-mbn-item { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 10px; text-decoration: none; border-bottom: 3px solid transparent; transition: all 0.2s; min-width: 60px; gap: 4px; color: #999; } .nb-mbn-item.active { border-bottom-color: #1a6b3a; background: #f5fbf7; color: #1a6b3a; } .nb-mbn-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.35; } .nb-mbn-item.active .nb-mbn-dot { opacity: 1; } .nb-mbn-label { font-size: 10px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap; color: inherit; } }