Initial commit: D.intelligence design system files
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
348
styles.css
Normal file
348
styles.css
Normal file
@@ -0,0 +1,348 @@
|
||||
/* ============================================================
|
||||
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; }
|
||||
Reference in New Issue
Block a user