/* ICE Engine deep-dive v2 · 01-04 sections only · Cargo bodycopy specificity */ /* ============ COLOR FIX (변수 + 직접 hex 강제) ============ */ html body bodycopy, html body bodycopy * { color: #f4f4f6 !important; box-sizing: border-box; } html body bodycopy .section { padding: 140px 0; position: relative; background: #0a0a0b !important; color: #f4f4f6 !important; } html body bodycopy .section.bg-1 { background: #101014 !important; } html body bodycopy .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; } html body bodycopy .sec-head { margin-bottom: 64px; max-width: 980px; } @media (max-width: 780px) { html body bodycopy .section { padding: 96px 0; } } /* ============ TYPOGRAPHY ============ */ html body bodycopy h1.h1 { font-family: 'Inter','Helvetica Neue',Arial,sans-serif !important; font-size: clamp(56px, 8.5vw, 128px) !important; font-weight: 200 !important; letter-spacing: -.04em !important; line-height: 1.02 !important; color: #f4f4f6 !important; margin: 0 0 24px !important; } html body bodycopy h2.h2 { font-family: 'Inter','Helvetica Neue',Arial,sans-serif !important; font-size: clamp(40px, 5.5vw, 80px) !important; font-weight: 300 !important; letter-spacing: -.025em !important; line-height: 1.05 !important; color: #f4f4f6 !important; margin: 0 0 24px !important; } html body bodycopy h3 { font-family: 'Inter','Helvetica Neue',Arial,sans-serif !important; font-weight: 500 !important; color: #f4f4f6 !important; } html body bodycopy .lead { font-size: clamp(19px, 1.6vw, 22px) !important; line-height: 1.55 !important; color: #c8c8cf !important; font-weight: 300 !important; max-width: 64ch !important; margin: 0 !important; } html body bodycopy .pull { font-size: clamp(40px, 5.5vw, 60px) !important; font-weight: 300 !important; letter-spacing: -.02em !important; line-height: 1.1 !important; color: #f4f4f6 !important; max-width: 22ch !important; margin: 32px 0 !important; } html body bodycopy .pull::before { content: "\201C"; color: #ec6f45 !important; margin-right: 8px; font-weight: 300; } html body bodycopy .eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #7a7a85 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 24px !important; } html body bodycopy .eyebrow::before { content: ""; display: inline-block; width: 18px; height: 1px; background: #52525a; } html body bodycopy .gold, html body bodycopy h1 .gold, html body bodycopy h2 .gold, html body bodycopy h3 .gold, html body bodycopy .pull .gold, html body bodycopy .lead .gold { color: #ec6f45 !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; } html body bodycopy strong { color: #f4f4f6 !important; font-weight: 500 !important; font-size: inherit !important; } /* ============ PIPELINE ============ */ html body bodycopy .ice-pipe { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: stretch; margin-top: 32px; } html body bodycopy .ice-pipe-step { background: #16161c !important; border: 1px solid #22222a !important; border-radius: 12px; padding: 28px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; transition: border-color .3s ease, transform .3s ease; } html body bodycopy .ice-pipe-step:hover { border-color: #ec6f45 !important; transform: translateY(-2px); } html body bodycopy .ice-pipe-num { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; letter-spacing: .16em !important; color: #ec6f45 !important; text-transform: uppercase !important; font-weight: 600 !important; } html body bodycopy .ice-pipe-name { font-size: 18px !important; font-weight: 500 !important; letter-spacing: -.005em !important; color: #f4f4f6 !important; line-height: 1.25 !important; margin: 0 !important; } html body bodycopy .ice-pipe-desc { font-size: 13px !important; line-height: 1.55 !important; color: #c8c8cf !important; font-weight: 300 !important; margin: 0 !important; margin-top: auto !important; } html body bodycopy .ice-pipe-arrow { display: flex; align-items: center; justify-content: center; color: #52525a !important; font-family: 'JetBrains Mono', monospace !important; font-size: 18px !important; } @media (max-width: 1100px) { html body bodycopy .ice-pipe { grid-template-columns: 1fr; gap: 10px; } html body bodycopy .ice-pipe-arrow { transform: rotate(90deg); padding: 4px 0; } } /* ============ TOKEN CARDS — 5 cards, mono LAST ============ */ html body bodycopy .ice-cards-token { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 32px; } @media (max-width: 1100px) { html body bodycopy .ice-cards-token { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { html body bodycopy .ice-cards-token { grid-template-columns: 1fr; } } html body bodycopy .ice-card { background: #16161c !important; border: 1px solid #22222a !important; border-radius: 12px; padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 280px; transition: border-color .25s ease, transform .25s ease; } html body bodycopy .ice-card:hover { border-color: #ec6f45 !important; transform: translateY(-2px); } html body bodycopy .ice-card-tag { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; letter-spacing: .14em !important; color: #ec6f45 !important; text-transform: uppercase !important; font-weight: 600 !important; } html body bodycopy .ice-card-name { font-size: 17px !important; font-weight: 500 !important; color: #f4f4f6 !important; letter-spacing: -.005em !important; line-height: 1.3 !important; margin: 0 !important; } html body bodycopy .ice-card-desc { font-size: 13px !important; line-height: 1.55 !important; color: #c8c8cf !important; font-weight: 300 !important; margin: 0 !important; flex: 1 !important; } html body bodycopy .ice-card-mono { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; line-height: 1.55 !important; color: #7a7a85 !important; word-break: break-word !important; padding-top: 12px !important; border-top: 1px dashed #22222a !important; margin-top: auto !important; } /* ============ RESEARCH BASIS BOX ============ */ html body bodycopy .ice-research-box { border: 1px dashed #ec6f45 !important; border-radius: 12px; padding: 32px 36px; background: rgba(236,111,69,0.03) !important; margin-top: 32px; display: flex; flex-direction: column; gap: 24px; } html body bodycopy .ice-research-section { display: flex; flex-direction: column; gap: 10px; } html body bodycopy .ice-research-label { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; letter-spacing: .18em !important; color: #ec6f45 !important; text-transform: uppercase !important; font-weight: 600 !important; } html body bodycopy .ice-research-list { list-style: disc !important; padding-left: 20px !important; margin: 0 !important; display: flex; flex-direction: column; gap: 8px; } html body bodycopy .ice-research-list li { font-size: 14px !important; line-height: 1.6 !important; color: #c8c8cf !important; font-weight: 300 !important; } html body bodycopy .ice-research-list li strong { color: #f4f4f6 !important; font-weight: 500 !important; } /* === TK FORCE UNHIDE all sections === */ html body bodycopy > section, html body bodycopy > section.section { display: block !important; } /* === TK MINIMAL OVERRIDE (only what's strictly needed) === */ /* Ensure pull quote marks white */ .pull::before, .pull::after { color: #ffffff !important; } /* ========= 4-LAYER GRID (color-coded L1-L4) ========= */ html body bodycopy .ice-layers-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin-top: 32px !important; } @media (max-width: 980px) { html body bodycopy .ice-layers-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { html body bodycopy .ice-layers-grid { grid-template-columns: 1fr !important; } } html body bodycopy .ice-layer { background: #16161c !important; border: 1px solid #22222a !important; border-radius: 12px !important; padding: 26px 22px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; min-height: 360px !important; } html body bodycopy .ice-layer-l1 { border-color: #4a8de8 !important; } html body bodycopy .ice-layer-l2 { border-color: #9b6dff !important; } html body bodycopy .ice-layer-l3 { border-color: #6a6a78 !important; opacity: 0.7 !important; } html body bodycopy .ice-layer-l4 { border-color: #34c759 !important; } html body bodycopy .ice-layer-header { font-family: 'JetBrains Mono', monospace !important; font-size: 12px !important; letter-spacing: 0.16em !important; font-weight: 600 !important; text-transform: uppercase !important; } html body bodycopy .ice-layer-l1 .ice-layer-header { color: #4a8de8 !important; } html body bodycopy .ice-layer-l2 .ice-layer-header { color: #9b6dff !important; } html body bodycopy .ice-layer-l3 .ice-layer-header { color: #8a8a98 !important; } html body bodycopy .ice-layer-l4 .ice-layer-header { color: #34c759 !important; } html body bodycopy .ice-layer-title { font-size: 19px !important; font-weight: 500 !important; color: #f4f4f6 !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; margin: 0 !important; } html body bodycopy .ice-layer-desc { font-size: 13px !important; line-height: 1.6 !important; color: #c8c8cf !important; font-weight: 300 !important; flex: 1 !important; margin: 0 !important; } html body bodycopy .ice-layer-source { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; line-height: 1.55 !important; color: #7a7a85 !important; padding-top: 12px !important; border-top: 1px dashed #22222a !important; } html body bodycopy .ice-layer-weight { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; padding: 10px 12px !important; border-radius: 6px !important; text-align: center !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } html body bodycopy .ice-weight-l1 { background: #4a8de8 !important; color: #0a0a0b !important; } html body bodycopy .ice-weight-l2 { background: #9b6dff !important; color: #0a0a0b !important; } html body bodycopy .ice-weight-l3 { background: #6a6a78 !important; color: #0a0a0b !important; } html body bodycopy .ice-weight-l4 { background: #34c759 !important; color: #0a0a0b !important; } /* ========= STAGE BLOCKS (Layer Measurement / Weighted Composite / ICE Does Not Do) ========= */ html body bodycopy .ice-stage { background: #16161c !important; border: 1px solid #ec6f45 !important; border-radius: 12px !important; padding: 28px 32px !important; margin-top: 16px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } html body bodycopy .ice-stage-not { border-color: #ff3b30 !important; } html body bodycopy .ice-stage-label { font-family: 'JetBrains Mono', monospace !important; font-size: 12px !important; letter-spacing: 0.18em !important; color: #ec6f45 !important; text-transform: uppercase !important; font-weight: 600 !important; } html body bodycopy .ice-stage-label-not { color: #ff3b30 !important; } html body bodycopy .ice-stage-desc { font-size: 15px !important; line-height: 1.6 !important; color: #c8c8cf !important; font-weight: 300 !important; max-width: 80ch !important; margin: 0 !important; } html body bodycopy .ice-stage-desc strong { color: #f4f4f6 !important; font-weight: 500 !important; font-size: inherit !important; } html body bodycopy .ice-stage-note { font-size: 13px !important; line-height: 1.6 !important; color: #7a7a85 !important; padding-top: 12px !important; border-top: 1px dashed #22222a !important; margin: 0 !important; font-style: italic !important; } html body bodycopy .ice-stage-note strong { color: #f4f4f6 !important; font-weight: 500 !important; font-size: inherit !important; font-style: normal !important; } /* ========= WEIGHT BARS ========= */ html body bodycopy .ice-weight-bars { display: flex !important; flex-direction: column !important; gap: 10px !important; } html body bodycopy .ice-weight-bar { display: grid !important; grid-template-columns: 36px 1fr 56px !important; gap: 14px !important; align-items: center !important; } html body bodycopy .ice-weight-name { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; color: #f4f4f6 !important; font-weight: 600 !important; } html body bodycopy .ice-bar-track { height: 14px !important; background: #0a0a0b !important; border: 1px solid #22222a !important; border-radius: 4px !important; overflow: hidden !important; } html body bodycopy .ice-bar-fill { height: 100% !important; } html body bodycopy .ice-bar-l1 { background: #4a8de8 !important; } html body bodycopy .ice-bar-l2 { background: #9b6dff !important; } html body bodycopy .ice-bar-l3 { background: #6a6a78 !important; } html body bodycopy .ice-bar-l4 { background: #34c759 !important; } html body bodycopy .ice-weight-num { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; color: #f4f4f6 !important; font-weight: 600 !important; text-align: right !important; } /* ========= ICE DOES NOT DO LIST ========= */ html body bodycopy .ice-not-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } html body bodycopy .ice-not-list li { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; padding: 8px 14px !important; background: rgba(255,59,48,0.1) !important; border: 1px solid rgba(255,59,48,0.3) !important; border-radius: 999px !important; color: #ff3b30 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 500 !important; } /* ========= HIDE 6+ (UTCA onwards), keep 04 4-Layer visible ========= */ /* Hide only ice-top empty hero */ html body bodycopy section#ice-top{display:none !important} /* === TK FORCE BLOCK === */ html body bodycopy > section, html body bodycopy > section.section, html body bodycopy section { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; } /* === Holy Grail closing cards — content override (selector fix 2026-05-08) === */ html body bodycopy section.hg-closing .hg-closing-lines > div > .hg-gold::before{content: "WHAT COMES NEXT" !important} html body bodycopy section.hg-closing .hg-closing-lines > div > .hg-gold::after{content: "The methodology that emerged from Holy Grail. AI treated as a layer of the design system, not a tool bolted onto one." !important} html body bodycopy section.hg-closing .hg-closing-lines > .hg-gold::before{content: "WHERE THIS BEGAN" !important} html body bodycopy section.hg-closing .hg-closing-lines > .hg-gold::after{content: "The origin of Holy Grail. The problem that surfaced in Timeboard — how to turn time-bound conversation into meaning — became the question this project answers." !important} html { --mobile-padding-offset: 0.3; } bodycopy { color: #000000; } bodycopy a { color: #000000; }