/* ============================================================ NOD Design System — Core tokens Colors + Type, both raw scales and semantic vars ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+KR:wght@400;700&family=Instrument+Serif:ital@0;1&display=swap'); /* ---------- THREE FAMILIES. NOTHING ELSE. ---------- EN → Inter (display, UI, body, eyebrow, ALL numerals & data glyphs) EN Serif → Instrument Serif (editorial accent, italic — words only, never numerals) KR → Noto Sans KR (all Hangul; 400 Normal / 700 Bold only, for Slides export) No mono. --font-mono survives as an alias resolving to Inter. Hierarchy + spacing are defined per sub-system: --slide-* (Sub 01) and --web-* (Sub 02). */ :root { /* ---------- BRAND COLORS (raw scale) ---------- */ /* Primary — Yellow: action, global empathy, momentum */ --nod-yellow: #FFBA08; --nod-yellow-60: #FFD66B; /* 60% tint */ --nod-yellow-20: #FFF1CE; /* 20% tint */ /* Sub 1 — Orange: playful, creative, thinking */ --nod-orange: #FF661A; --nod-orange-60: #FFCBA6; --nod-orange-20: #FFEFD4; /* Sub 2 — Blue: strategy, foundation, depth */ --nod-blue: #0541FF; --nod-blue-60: #238CFF; --nod-blue-20: #BFF5FF; /* Structural — Balanced, space */ --nod-white: #FFFFFF; --nod-grey: #F1F1F1; --nod-black: #131313; /* never pure black */ /* Extended neutrals (derived for UI surfaces) */ --nod-ink: #131313; --nod-ink-2: #1F1F1F; --nod-fg-2: #4A4A4A; --nod-fg-3: #767676; --nod-line: #E4E4E4; --nod-line-2: #D4D4D4; --nod-bg-soft: #FAFAF7; --nod-bg-cream: #F5F2EA; /* ---------- SEMANTIC COLORS ---------- */ --color-bg: var(--nod-white); --color-bg-alt: var(--nod-grey); --color-bg-soft: var(--nod-bg-soft); --color-bg-invert: var(--nod-black); --color-fg-1: var(--nod-black); /* primary text */ --color-fg-2: var(--nod-fg-2); /* secondary */ --color-fg-3: var(--nod-fg-3); /* tertiary / meta */ --color-fg-invert: var(--nod-white); --color-fg-on-yellow: var(--nod-black); --color-fg-on-orange: var(--nod-black); --color-fg-on-blue: var(--nod-white); --color-accent: var(--nod-yellow); /* the NOD dot */ --color-accent-2: var(--nod-orange); --color-accent-3: var(--nod-blue); --color-line: var(--nod-line); --color-line-strong: var(--nod-ink); /* ---------- TYPE FAMILIES ---------- */ /* Inter is the primary Latin face for everything: display, body, eyebrows, numerals. --font-narrow keeps its name as a semantic role (eyebrow / condensed-feel labels) but now resolves to Inter; achieve the "narrow" feeling with letter-spacing. */ --font-display: "Inter", "Helvetica Neue", system-ui, sans-serif; --font-text: "Inter", "Helvetica Neue", system-ui, sans-serif; --font-narrow: "Inter", "Helvetica Neue", system-ui, sans-serif; --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif; --font-mono: "Inter", "Helvetica Neue", system-ui, sans-serif; /* retired alias → Inter */ --font-kr: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* ---------- TYPE SCALE ---------- */ --fs-display-xl: clamp(64px, 9vw, 144px); /* @kind font */ --fs-display-lg: clamp(48px, 6vw, 96px); /* @kind font */ --fs-display-md: clamp(36px, 4.4vw, 72px); /* @kind font */ --fs-h1: 56px; --fs-h2: 40px; --fs-h3: 28px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-eyebrow: 11px; /* Line-height + tracking */ --lh-tight: 0.95; /* @kind font */ --lh-snug: 1.1; /* @kind font */ --lh-base: 1.5; /* @kind font */ --lh-loose: 1.65; /* @kind font */ --tr-tight: -0.03em; /* @kind font */ --tr-snug: -0.015em; /* @kind font */ --tr-base: 0; /* @kind font */ --tr-eyebrow: 0.14em; /* @kind font */ /* ---------- SPACING (4-point soft grid) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- RADII ---------- */ --r-0: 0px; /* default — NOD is mostly square */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px; /* capsules / tags */ --r-btn: 999px; /* buttons — pill by default. NEVER a 0-radius button, never a dot. */ --r-btn-soft: 10px; /* buttons — rounded-rect alternative */ /* ---------- SUB 01 — SLIDES (16:9, 1920×1080 frame) ---------- */ --slide-fs-cover: 180px; --slide-fs-title: 72px; --slide-fs-sub: 44px; --slide-fs-lead: 32px; --slide-fs-body: 26px; --slide-fs-caption: 24px; /* floor — nothing on a slide goes below 24px */ --slide-fs-eyebrow: 24px; --slide-margin: 100px; /* outer safe margin */ --slide-gutter: 40px; /* column gutter */ --slide-head-gap: 48px; /* title → content */ --slide-blk: 64px; /* block → block */ /* ---------- SUB 02 — WEBSITE UI ---------- Fluid scale: --web-unit resolves to 16px on a 1440 design and scales linearly with the viewport, so every step below moves together. NO EYEBROW TIER — eyebrows are not used on the website. */ --web-unit: clamp(11px, 1.1111vw, 28px); /* @kind font */ --web-fs-display: calc(var(--web-unit) * 8.125); /* 130px @1440 */ --web-fs-h1: calc(var(--web-unit) * 5.625); /* 90px */ --web-fs-service: calc(var(--web-unit) * 5.625); /* 90px — service names, UPPERCASE (H1 size) */ --web-fs-h2: calc(var(--web-unit) * 3.625); /* 58px */ --web-fs-h2s: calc(var(--web-unit) * 2.875); /* 46px — H2 Small, between H2 and H3 */ --web-fs-h3: calc(var(--web-unit) * 2.25); /* 36px */ --web-fs-accent: calc(var(--web-unit) * 1.75); /* 28px — Instrument Serif italic */ --web-fs-lead: calc(var(--web-unit) * 1.375); /* 22px — paragraph large */ --web-fs-body: calc(var(--web-unit) * 1.125); /* 18px */ --web-fs-nav: 18px; /* fixed — menu labels UPPERCASE, header CTA, footer nav */ --web-fs-btn: 16px; /* fixed — in-page button labels */ --web-screen: 100svh; /* @kind spacing */ --web-container: 1280px; --web-sec-y: 104px; /* section padding-block */ --web-head-gap: 36px; /* head → content */ --web-blk: 28px; /* block → block */ --web-gutter: 20px; /* ---------- ELEVATION ---------- */ --shadow-sm: 0 1px 2px rgba(10,10,10,0.06); --shadow-md: 0 6px 18px rgba(10,10,10,0.08); --shadow-lg: 0 20px 50px rgba(10,10,10,0.10); --shadow-yellow: 0 12px 32px rgba(255,186,8,0.35); /* ---------- MOTION ---------- */ --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 420ms; /* @kind other */ --dur-reveal: 700ms; /* @kind other */ } /* ============================================================ SEMANTIC TYPOGRAPHY ============================================================ */ html, body { font-family: var(--font-text); color: var(--color-fg-1); background: var(--color-bg); font-size: var(--fs-body); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Apply Noto Sans KR automatically to any element with lang="ko" or .kr utility class */ :lang(ko), .kr { font-family: var(--font-kr); } /* Latin (Inter) keeps full nine-weight variable axis. Korean (Noto Sans KR) is restricted to 400 / 700 for Slides compatibility — when text is in Hangul, browsers fall back to the Korean face automatically via :lang(ko) / .kr; rounding any 500–600 weights to 700 is fine. */ .display-xl, .nod-display-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); } .display-lg, .nod-display-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); } .display-md, .nod-display-md { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-md); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-snug); margin: 0; } h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); margin: 0; } h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.005em; margin: 0; } h4, .h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.3; margin: 0; } p, .body { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-loose); margin: 0 0 1em 0; text-wrap: pretty; } .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-base); } .body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-base); } .eyebrow { font-family: var(--font-narrow); font-weight: 400; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--color-fg-2); } .caption { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--color-fg-3); text-transform: uppercase; } /* Instrument Serif accent — words only, never numerals. Always italic. Tuned for Google Slides export: Default = header level (Bold italic / 700) → maps to Slides Bold toggle. .body = body level (Normal italic / 400) → Slides default weight. */ .serif-accent { font-family: var(--font-serif); font-weight: 700; font-style: italic; } .serif-accent.body { font-weight: 400; } /* The word "NOD" — always Inter, always uppercase, never italic-serif. Even when it appears inside an italic Instrument Serif phrase, the word NOD stays in Inter so the wordmark identity is preserved. Apply via NOD. !important is used because this rule must win over any parent serif/italic context. */ .nod-word { font-family: var(--font-display) !important; font-weight: 700 !important; font-style: normal !important; text-transform: uppercase !important; font-variation-settings: normal !important; letter-spacing: 0; } code, .mono { font-family: var(--font-text); font-weight: 500; letter-spacing: 0.06em; } /* Links — hover accent is YELLOW (never blue). Buttons are excluded: their border is currentColor, so a link hover would repaint the border yellow. Button hover = fill with --btn-fg, label flips. */ a { color: var(--color-fg-1); text-decoration: none; } a:hover:where(:not(.btn)):where(:not(.more)):where(:not(.talk)) { color: var(--nod-yellow); } .btn:hover, .more:hover { color: var(--btn-fg, #131313); background: var(--btn-fg, #131313); } .btn:hover > span, .more:hover > span { color: var(--sec-bg, #fff); } /* Website header — logo, menu labels and the CTA SCALE on hover. No colour change, no underline, no opacity fade. */ header nav a, header .row > a:first-child, .talk > span { transition: transform 240ms var(--ease-out); } header nav a:hover, header .row > a:first-child:hover, .talk:hover { color: inherit; } header nav a:hover, header .row > a:first-child:hover { transform: scale(1.08); } .talk:hover > span { transform: scale(1.08); } /* Website section height — UNIVERSAL RULE. A section is ONE FULL SCREEN tall by default. If its content needs more room the section grows to fit the content — it is never cropped and never snapped to an arbitrary multiple. The top/bottom padding is the SAME on every section (--web-sec-y), so the rhythm between sections stays constant whether a section is exactly one screen or taller. Load web-sections.js to keep the pin tied to the live viewport height. Header and footer are exempt. */ .web-sec, .web-sec-2, .web-sec-3 { min-height: var(--web-screen); padding-block: var(--web-sec-y); display: flex; flex-direction: column; justify-content: center; } .web-sec-2 { min-height: calc(var(--web-screen) * 2); } .web-sec-3 { min-height: calc(var(--web-screen) * 3); } /* Website menu labels — 18px, uppercase */ .web-nav-link { font-family: var(--font-text); font-weight: 500; font-size: var(--web-fs-nav); letter-spacing: 0.02em; text-transform: uppercase; } /* The NOD dot — used inline like "NOD." */ .nod-dot { display: inline-block; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--nod-yellow); vertical-align: baseline; margin-left: 0.06em; margin-bottom: 0.04em; } /* THE logo. One file: assets/logo/NOD_Logo.svg — recoloured by `color`, never duplicated per colourway. Size it by height (or font-size when inline); the width follows. */ .nodmark { display: inline-block; aspect-ratio: 1220 / 437; background: currentColor; /* 로고 SVG를 data URI로 인라인 — file:// 로 직접 열어도 mask 가 동작하도록. 서버 배포 시 url("assets/logo/NOD_Logo.svg") 로 되돌려도 됩니다. */ -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%221220%22%20height%3D%22437%22%20viewBox%3D%220%200%201220%20437%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23000000%22%20d%3D%22M579.247%200C611.971%201.00281e-05%20642.2%205.38185%20669.789%2016.3145C697.569%2027.172%20721.869%2042.5115%20742.565%2062.3499C756.248%2075.2125%20767.89%2089.6661%20777.489%20105.678V5.74824H965.182C1009.01%205.74841%201048.13%2013.9383%201082.26%2030.6635L1085.55%2032.3074C1119.24%2049.523%201145.95%2073.3318%201165.4%20103.711L1167.26%20106.671C1186.96%20138.657%201196.6%20176.083%201196.6%20218.498L1196.57%20222.43C1195.99%20262.89%201186.34%20298.96%201167.29%20330.271L1167.27%20330.302L1167.26%20330.328C1147.66%20362.124%201120.32%20386.922%201085.55%20404.693C1050.65%20422.526%201010.42%20431.252%20965.182%20431.252H777.489V331.893C767.89%20347.905%20756.248%20362.361%20742.565%20375.224C721.872%20394.676%20697.588%20409.809%20669.841%20420.661C642.254%20431.601%20612.205%20437%20579.824%20437C548.1%20437%20518.563%20431.942%20491.334%20421.694L488.708%20420.684C460.939%20409.831%20436.635%20394.689%20415.929%20375.224L415.843%20375.141C402.27%20362.116%20390.698%20347.679%20381.136%20331.852V431.252H302.405L97.4963%20179.967V431.252H0V5.74824H78.7317L283.64%20257.031V5.74824H381.136V105.46C390.71%2089.5353%20402.309%2075.1541%20415.929%2062.3499C436.626%2042.5113%20460.927%2027.172%20488.708%2016.3145C516.645%205.39589%20546.864%200.000107509%20579.247%200ZM579.247%2088.7607C560.294%2088.7608%20543.009%2091.9633%20527.27%2098.2384L527.271%2098.2409C511.843%20104.545%20498.18%20113.638%20486.22%20125.584C474.674%20137.116%20465.527%20150.784%20458.796%20166.706C452.57%20181.958%20449.356%20199.168%20449.355%20218.498C449.355%20237.407%20452.555%20254.655%20458.824%20270.362C465.559%20286.272%20474.721%20300.149%20486.31%20312.084C497.79%20323.525%20511.376%20332.407%20527.187%20338.724C542.949%20345.021%20560.261%20348.237%20579.247%20348.237C598.234%20348.237%20615.547%20345.021%20631.308%20338.724C647.119%20332.407%20660.704%20323.525%20672.184%20312.084C683.787%20300.135%20692.739%20286.46%20699.076%20270.987L699.1%20270.928L699.124%20270.866C705.746%20255.202%20709.14%20237.795%20709.14%20218.498C709.14%20199.799%20705.954%20183.096%20699.769%20168.227L699.163%20166.793L699.1%20166.648L699.042%20166.502C692.898%20151.163%20684.331%20137.92%20673.347%20126.665L672.277%20125.584L672.215%20125.522L672.155%20125.461C661.021%20114.004%20647.932%20105.147%20632.78%2098.8742L631.308%2098.2743C615.547%2091.9773%20598.234%2088.7607%20579.247%2088.7607ZM875.562%20344.789H961.729C990.562%20344.789%201014.7%20339.324%201034.55%20328.888L1034.59%20328.867L1034.63%20328.848C1054.99%20318.329%201070.36%20303.77%201081.08%20285.116L1081.12%20285.048L1081.16%20284.979C1092.22%20266.336%201097.95%20244.307%201097.95%20218.498C1097.95%20192.267%201092.21%20170.29%201081.21%20152.101L1081.15%20151.993L1081.08%20151.882C1070.7%20133.812%201055.95%20119.583%201036.52%20109.147L1034.63%20108.152L1034.59%20108.131L1034.55%20108.112C1015.32%2098.0017%20992.068%2092.556%20964.42%2092.2255L961.729%2092.2106H875.562V344.789Z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M1191.31%20374.869C1207.15%20374.869%201220%20387.693%201220%20403.517C1220%20419.342%201207.15%20432.162%201191.31%20432.162C1175.47%20432.162%201162.62%20419.342%201162.62%20403.517C1162.62%20387.693%201175.47%20374.87%201191.31%20374.869Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20width%3D%221220%22%20height%3D%22437%22%20viewBox%3D%220%200%201220%20437%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23000000%22%20d%3D%22M579.247%200C611.971%201.00281e-05%20642.2%205.38185%20669.789%2016.3145C697.569%2027.172%20721.869%2042.5115%20742.565%2062.3499C756.248%2075.2125%20767.89%2089.6661%20777.489%20105.678V5.74824H965.182C1009.01%205.74841%201048.13%2013.9383%201082.26%2030.6635L1085.55%2032.3074C1119.24%2049.523%201145.95%2073.3318%201165.4%20103.711L1167.26%20106.671C1186.96%20138.657%201196.6%20176.083%201196.6%20218.498L1196.57%20222.43C1195.99%20262.89%201186.34%20298.96%201167.29%20330.271L1167.27%20330.302L1167.26%20330.328C1147.66%20362.124%201120.32%20386.922%201085.55%20404.693C1050.65%20422.526%201010.42%20431.252%20965.182%20431.252H777.489V331.893C767.89%20347.905%20756.248%20362.361%20742.565%20375.224C721.872%20394.676%20697.588%20409.809%20669.841%20420.661C642.254%20431.601%20612.205%20437%20579.824%20437C548.1%20437%20518.563%20431.942%20491.334%20421.694L488.708%20420.684C460.939%20409.831%20436.635%20394.689%20415.929%20375.224L415.843%20375.141C402.27%20362.116%20390.698%20347.679%20381.136%20331.852V431.252H302.405L97.4963%20179.967V431.252H0V5.74824H78.7317L283.64%20257.031V5.74824H381.136V105.46C390.71%2089.5353%20402.309%2075.1541%20415.929%2062.3499C436.626%2042.5113%20460.927%2027.172%20488.708%2016.3145C516.645%205.39589%20546.864%200.000107509%20579.247%200ZM579.247%2088.7607C560.294%2088.7608%20543.009%2091.9633%20527.27%2098.2384L527.271%2098.2409C511.843%20104.545%20498.18%20113.638%20486.22%20125.584C474.674%20137.116%20465.527%20150.784%20458.796%20166.706C452.57%20181.958%20449.356%20199.168%20449.355%20218.498C449.355%20237.407%20452.555%20254.655%20458.824%20270.362C465.559%20286.272%20474.721%20300.149%20486.31%20312.084C497.79%20323.525%20511.376%20332.407%20527.187%20338.724C542.949%20345.021%20560.261%20348.237%20579.247%20348.237C598.234%20348.237%20615.547%20345.021%20631.308%20338.724C647.119%20332.407%20660.704%20323.525%20672.184%20312.084C683.787%20300.135%20692.739%20286.46%20699.076%20270.987L699.1%20270.928L699.124%20270.866C705.746%20255.202%20709.14%20237.795%20709.14%20218.498C709.14%20199.799%20705.954%20183.096%20699.769%20168.227L699.163%20166.793L699.1%20166.648L699.042%20166.502C692.898%20151.163%20684.331%20137.92%20673.347%20126.665L672.277%20125.584L672.215%20125.522L672.155%20125.461C661.021%20114.004%20647.932%20105.147%20632.78%2098.8742L631.308%2098.2743C615.547%2091.9773%20598.234%2088.7607%20579.247%2088.7607ZM875.562%20344.789H961.729C990.562%20344.789%201014.7%20339.324%201034.55%20328.888L1034.59%20328.867L1034.63%20328.848C1054.99%20318.329%201070.36%20303.77%201081.08%20285.116L1081.12%20285.048L1081.16%20284.979C1092.22%20266.336%201097.95%20244.307%201097.95%20218.498C1097.95%20192.267%201092.21%20170.29%201081.21%20152.101L1081.15%20151.993L1081.08%20151.882C1070.7%20133.812%201055.95%20119.583%201036.52%20109.147L1034.63%20108.152L1034.59%20108.131L1034.55%20108.112C1015.32%2098.0017%20992.068%2092.556%20964.42%2092.2255L961.729%2092.2106H875.562V344.789Z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M1191.31%20374.869C1207.15%20374.869%201220%20387.693%201220%20403.517C1220%20419.342%201207.15%20432.162%201191.31%20432.162C1175.47%20432.162%201162.62%20419.342%201162.62%20403.517C1162.62%20387.693%201175.47%20374.87%201191.31%20374.869Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat center / contain; }