349 lines
8.3 KiB
CSS
349 lines
8.3 KiB
CSS
/* ============================================================
|
|
D.intelligence Design System v2026 — Stylesheet
|
|
Evolution of 2025 Edition + Brand Guide v1.2
|
|
============================================================ */
|
|
|
|
/* -------- Fonts -------- */
|
|
@font-face {
|
|
font-family: 'DM Sans';
|
|
src: url('assets/fonts/DMSans-Regular.ttf') format('truetype');
|
|
font-weight: 400; font-style: normal; font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'DM Sans';
|
|
src: url('assets/fonts/DMSans-Italic.ttf') format('truetype');
|
|
font-weight: 400; font-style: italic; font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'DM Sans';
|
|
src: url('assets/fonts/DMSans-Medium.ttf') format('truetype');
|
|
font-weight: 500; font-style: normal; font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'DM Sans';
|
|
src: url('assets/fonts/DMSans-Bold.ttf') format('truetype');
|
|
font-weight: 700; font-style: normal; font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Apple SD Gothic Neo';
|
|
src: url('assets/fonts/AppleSDGothicNeoL.ttf') format('truetype');
|
|
font-weight: 300; font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Apple SD Gothic Neo';
|
|
src: url('assets/fonts/AppleSDGothicNeoM.ttf') format('truetype');
|
|
font-weight: 500; font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Apple SD Gothic Neo';
|
|
src: url('assets/fonts/AppleSDGothicNeoB.ttf') format('truetype');
|
|
font-weight: 700; font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Apple SD Gothic Neo';
|
|
src: url('assets/fonts/AppleSDGothicNeoEB.ttf') format('truetype');
|
|
font-weight: 800; font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Apple SD Gothic Neo';
|
|
src: url('assets/fonts/AppleSDGothicNeoH.ttf') format('truetype');
|
|
font-weight: 900; font-display: swap;
|
|
}
|
|
|
|
/* -------- Tokens -------- */
|
|
:root {
|
|
--beige: #E5E1D2;
|
|
--beige-soft: #EFEBDE;
|
|
--brown: #231815;
|
|
--brown-soft: #2E2420;
|
|
--olive: #CEDC00;
|
|
--olive-soft: #E5EE7A;
|
|
--blue: #0075C0;
|
|
--blue-soft: #4DA3D6;
|
|
--black: #000000;
|
|
--gray: #727171;
|
|
--gray-light: #BFBFBF;
|
|
--gray-bg: #F2F2F2;
|
|
--warm-gray: #C8C4B8;
|
|
--warm-gray-soft: #DAD6CB;
|
|
--white: #FFFFFF;
|
|
|
|
--font-en: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
--font-kr: 'Apple SD Gothic Neo', 'DM Sans', sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Menlo', monospace;
|
|
}
|
|
|
|
/* -------- Stage base -------- */
|
|
deck-stage {
|
|
--bg: var(--white);
|
|
--stage-bg: #0a0a0a;
|
|
}
|
|
|
|
section[data-screen-label] {
|
|
background: var(--white);
|
|
color: var(--brown);
|
|
font-family: var(--font-en);
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* -------- Slide chrome: header bar + footer -------- */
|
|
.s-header {
|
|
position: absolute;
|
|
top: 56px;
|
|
left: 96px;
|
|
right: 96px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
font-family: var(--font-en);
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.08em;
|
|
color: var(--warm-gray);
|
|
text-transform: uppercase;
|
|
z-index: 5;
|
|
}
|
|
.s-header .s-sys {
|
|
color: var(--warm-gray);
|
|
}
|
|
.s-header .s-section-id {
|
|
color: var(--gray);
|
|
font-weight: 500;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.s-footer {
|
|
position: absolute;
|
|
bottom: 56px;
|
|
left: 96px;
|
|
right: 96px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
font-family: var(--font-en);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.06em;
|
|
color: var(--gray);
|
|
z-index: 5;
|
|
}
|
|
.s-footer .s-tag { font-style: italic; letter-spacing: 0.02em; color: var(--brown); opacity: 0.55; }
|
|
.s-footer .s-page { font-weight: 500; letter-spacing: 0.08em; }
|
|
|
|
.s-three-dots {
|
|
position: absolute;
|
|
top: 56px;
|
|
right: 96px;
|
|
display: flex;
|
|
gap: 10px;
|
|
z-index: 6;
|
|
}
|
|
.s-three-dots i {
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--brown);
|
|
display: block;
|
|
}
|
|
.s-three-dots.olive i { background: var(--olive); }
|
|
.s-three-dots.beige i { background: var(--warm-gray); }
|
|
.s-three-dots.white i { background: var(--white); }
|
|
|
|
/* -------- Cover / Section dividers --------
|
|
These selectors share specificity with the base section[data-screen-label]
|
|
rule above (0,1,1). The base rule sets background:white; these must be
|
|
equally-or-more specific to win. Use section.s-cover etc.
|
|
---------------------------------------------------------------- */
|
|
section.s-cover {
|
|
background: var(--beige);
|
|
}
|
|
section.s-section {
|
|
background: var(--beige);
|
|
}
|
|
section.s-dark {
|
|
background: var(--brown);
|
|
color: var(--beige);
|
|
}
|
|
section.s-dark .s-header,
|
|
section.s-dark .s-footer { color: var(--warm-gray); }
|
|
section.s-dark .s-footer .s-tag { color: var(--beige); opacity: 0.6; }
|
|
|
|
/* -------- Section title with vertical-line accent -------- */
|
|
.section-title-block {
|
|
position: absolute;
|
|
left: 96px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
gap: 36px;
|
|
}
|
|
.v-line {
|
|
width: 1px;
|
|
background: var(--gray);
|
|
align-self: stretch;
|
|
flex-shrink: 0;
|
|
}
|
|
.s-section .v-line { background: var(--warm-gray); }
|
|
.s-dark .v-line { background: var(--warm-gray); opacity: 0.5; }
|
|
|
|
.section-title-block .eyebrow {
|
|
font-family: var(--font-en);
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.32em;
|
|
text-transform: uppercase;
|
|
color: var(--gray);
|
|
margin-bottom: 28px;
|
|
}
|
|
.s-dark .section-title-block .eyebrow { color: var(--warm-gray); }
|
|
|
|
.section-title-block .num {
|
|
font-family: var(--font-en);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.2em;
|
|
color: var(--olive);
|
|
margin-bottom: 24px;
|
|
}
|
|
.section-title-block h1 {
|
|
font-family: var(--font-en);
|
|
font-size: 112px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
color: var(--brown);
|
|
margin: 0;
|
|
}
|
|
.s-dark .section-title-block h1 { color: var(--beige); }
|
|
|
|
.section-title-block .kr {
|
|
font-family: var(--font-kr);
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
color: var(--brown);
|
|
margin-top: 28px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.s-dark .section-title-block .kr { color: var(--warm-gray); }
|
|
|
|
.section-title-block .desc {
|
|
font-family: var(--font-en);
|
|
font-size: 18px;
|
|
line-height: 1.55;
|
|
color: var(--gray);
|
|
max-width: 520px;
|
|
margin-top: 36px;
|
|
}
|
|
|
|
/* -------- Content slides -------- */
|
|
.content-title {
|
|
font-family: var(--font-en);
|
|
font-size: 44px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
color: var(--brown);
|
|
line-height: 1.05;
|
|
margin: 0;
|
|
}
|
|
.content-title .module-code {
|
|
display: inline-block;
|
|
font-family: var(--font-en);
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.18em;
|
|
color: var(--olive);
|
|
vertical-align: top;
|
|
margin-right: 18px;
|
|
padding-top: 12px;
|
|
}
|
|
.content-subtitle {
|
|
font-family: var(--font-en);
|
|
font-size: 18px;
|
|
line-height: 1.5;
|
|
color: var(--gray);
|
|
margin: 16px 0 0;
|
|
max-width: 1000px;
|
|
}
|
|
.content-kr {
|
|
font-family: var(--font-kr);
|
|
font-weight: 500;
|
|
color: var(--brown);
|
|
}
|
|
|
|
.content-body {
|
|
position: absolute;
|
|
top: 220px;
|
|
left: 96px;
|
|
right: 96px;
|
|
bottom: 140px;
|
|
}
|
|
|
|
/* -------- Utilities -------- */
|
|
.mono { font-family: var(--font-mono); }
|
|
.hairline { border-top: 1px solid var(--gray-light); }
|
|
.divider { height: 1px; background: var(--gray-light); }
|
|
.uppercase-label {
|
|
font-family: var(--font-en);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--gray);
|
|
}
|
|
|
|
/* swatch helpers */
|
|
.swatch {
|
|
border: 1px solid var(--gray-light);
|
|
border-radius: 0;
|
|
position: relative;
|
|
}
|
|
|
|
/* Card */
|
|
.card {
|
|
background: var(--white);
|
|
border: 1px solid var(--gray-light);
|
|
padding: 28px;
|
|
}
|
|
.card.flat { background: var(--gray-bg); border: none; }
|
|
|
|
/* Tag pill */
|
|
.tag {
|
|
display: inline-block;
|
|
font-family: var(--font-en);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--brown);
|
|
color: var(--brown);
|
|
}
|
|
.tag.di { border-color: var(--blue); color: var(--blue); }
|
|
.tag.md { border-color: var(--brown); color: var(--brown); }
|
|
.tag.mpo { border-color: var(--olive); color: #8a9400; background: rgba(206,220,0,0.12); }
|
|
.tag.bvt { border-color: var(--brown); color: var(--white); background: var(--brown); }
|
|
|
|
/* phase badge */
|
|
.phase-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-family: var(--font-en);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
}
|
|
.phase-badge .num {
|
|
font-size: 12px;
|
|
background: var(--brown);
|
|
color: var(--beige);
|
|
padding: 3px 8px;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
/* Tweaks panel slot */
|
|
#tweaks-root { z-index: 9999; }
|