/* =====================================================================
* Design Identity — canonical reference (/designIdentity).
*
* Showcases the unified component spec to be adopted across all public
* pages:
* • Button — single family (di-btn) · 3 sizes (sm/md/lg) · 4 variants
* (primary/ghost/outline/iridescent) · all 999px pill, Pretendard 600
* • Card — quiet hairline default · iridescent palette glow on hover
* (4-color radial bloom underneath)
* • Input — borderless, hairline-bottom only · focus reveals an
* iridescent gradient line
* • Badge — outlined pill, no fill, colored text + matching border
*
* Page layout follows the long-form archetype.
* ===================================================================== */
#wrapper-contents:has(#di-page) {
padding: 0;
margin: 0;
display: block;
float: none;
align-items: initial;
justify-content: initial;
background-color: var(--global-body-background);
overflow-x: clip;
}
#di-page {
--di-section-pad-y: clamp(72px, 12vh, 160px);
--di-section-pad-x: clamp(20px, 5vw, 80px);
--di-content-max: 1080px;
--di-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--di-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
/* Refined iridescent palette — same chromatic family, lower
saturation. Reads as jewel tones rather than candy. */
--di-iris: #6750D8;
--di-mulberry: #C76B86;
--di-brass: #C99464;
--di-lichen: #7AA39A;
/* v3 aliases retained for transition */
--di-violet: var(--di-iris);
--di-rose: var(--di-mulberry);
--di-cognac: var(--di-brass);
--di-teal: var(--di-lichen);
--di-iridescent: linear-gradient(135deg,
#B85970 0%, #C97A6F 25%, #C99464 50%, #7595B5 80%, #6750D8 100%);
display: block;
width: 100%;
color: var(--global-text-color);
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* ---------- Hero -------------------------------------------------- */
.di-hero {
position: relative;
padding: clamp(96px, 16vh, 200px) var(--di-section-pad-x) clamp(56px, 10vh, 120px);
text-align: center;
isolation: isolate;
overflow: hidden;
}
.di-hero-aura {
position: absolute;
inset: -20% -10% auto -10%;
height: 110%;
z-index: -1;
background:
radial-gradient(36% 44% at 22% 30%, rgba(103, 80, 216, 0.18), transparent 70%),
radial-gradient(32% 40% at 78% 22%, rgba(199, 107, 134, 0.14), transparent 72%),
radial-gradient(38% 44% at 60% 72%, rgba(122, 163, 154, 0.13), transparent 70%);
filter: blur(70px) saturate(115%);
opacity: 0.85;
pointer-events: none;
animation: di-drift 24s ease-in-out infinite alternate;
}
@keyframes di-drift {
0% { transform: translate3d(-2%, -1%, 0) scale(1); }
100% { transform: translate3d( 3%, 1%, 0) scale(1.05); }
}
.di-hero-title {
margin: 12px auto 16px;
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 900;
font-size: clamp(38px, 6vw, 84px);
line-height: 1.08;
letter-spacing: -0.038em;
max-width: 18ch;
}
.di-hero-subtitle {
margin: 0 auto;
max-width: 56ch;
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.65;
color: var(--global-text-muted);
}
.di-hero-subtitle span { display: block; }
.di-hero-subtitle a { color: var(--global-text-color); text-decoration: underline; text-underline-offset: 3px; }
.di-hero .di-badge { margin-top: 24px; }
/* ---------- Section shell ---------------------------------------- */
.di-section {
padding: var(--di-section-pad-y) var(--di-section-pad-x);
max-width: calc(var(--di-content-max) + var(--di-section-pad-x) * 2);
margin: 0 auto;
box-sizing: border-box;
}
.di-section + .di-section {
border-top: 1px solid rgba(var(--global-text-color-rgb), 0.06);
}
.di-section-head {
max-width: 720px;
margin: 0 0 clamp(28px, 4vh, 56px);
}
.di-eyebrow {
margin: 0 0 6px;
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--global-text-muted);
}
.di-section-title {
margin: 0 0 12px;
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 900;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.18;
letter-spacing: -0.028em;
}
.di-section-body {
margin: 0;
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.7;
color: var(--global-text-muted);
max-width: 56ch;
}
.di-section-body code {
padding: 2px 6px;
background: rgba(var(--global-text-color-rgb), 0.05);
border-radius: 4px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.92em;
}
.di-group-title {
margin: clamp(28px, 4vh, 44px) 0 14px;
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 800;
font-size: 17px;
letter-spacing: -0.012em;
}
/* ---------- Color swatches --------------------------------------- */
.di-swatch-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.di-swatch { display: flex; flex-direction: column; gap: 8px; }
.di-swatch-chip {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 12px;
}
.di-swatch-name {
font-size: 12px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
color: var(--global-text-muted);
word-break: break-all;
}
/* ---------- Type list -------------------------------------------- */
.di-type-list { list-style: none; margin: 0; padding: 0; }
.di-type-row {
display: grid;
grid-template-columns: 240px 1fr;
gap: 28px;
align-items: baseline;
padding: clamp(16px, 2.4vh, 28px) 0;
border-top: 1px solid rgba(var(--global-text-color-rgb), 0.06);
}
.di-type-row:first-child { border-top: 0; }
@media (max-width: 720px) {
.di-type-row { grid-template-columns: 1fr; gap: 8px; }
}
.di-type-label {
font-size: 12px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
color: var(--global-text-muted);
}
/* ---------- Buttons (UNIFIED) ------------------------------------ */
/* Single family. Composed via two classes:
* .di-btn .di-btn-{primary|ghost|outline|iridescent} (variant)
* .di-btn .di-btn-{sm|md|lg} (size)
* Default size = md when no size class is present.
*/
.di-btn {
/* shared geometry */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 20px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
color: var(--global-text-color);
/* shared typography — Pretendard, never Paperlogy on buttons */
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1;
cursor: pointer;
text-decoration: none;
-webkit-appearance: none;
appearance: none;
transition:
background-color 0.18s var(--di-ease),
border-color 0.18s var(--di-ease),
color 0.18s var(--di-ease),
opacity 0.18s var(--di-ease),
transform 0.18s var(--di-ease);
}
.di-btn:focus-visible {
outline: 2px solid var(--global-primary-color);
outline-offset: 2px;
}
/* Sizes */
.di-btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.di-btn-md { height: 40px; padding: 0 20px; font-size: 14px; }
.di-btn-lg { height: 48px; padding: 0 26px; font-size: 14px; }
/* Variants */
.di-btn-primary {
background: var(--global-button-background-color);
color: var(--global-button-text-color);
}
.di-btn-primary:hover { opacity: 0.85; transform: translateY(-1px); }
.di-btn-ghost { color: var(--global-text-color); }
.di-btn-ghost:hover { background: rgba(var(--global-text-color-rgb), 0.06); }
.di-btn-outline {
border-color: rgba(var(--global-text-color-rgb), 0.16);
color: var(--global-text-color);
}
.di-btn-outline:hover {
border-color: rgba(var(--global-text-color-rgb), 0.32);
background: rgba(var(--global-text-color-rgb), 0.04);
}
.di-btn-iridescent {
/* Brand iridescent recipe — see common.css `.btn-iridescent` and
docs/DESIGN.md §7.4. Identical to the header Studio CTA. */
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
background: var(--brand-iridescent-gradient);
background-size: 300% 300%;
border-color: transparent;
animation: brand-iridescent-shift 20s ease infinite;
}
.di-btn-iridescent:hover { transform: translateY(-1px); }
/* ---- v3 variants ---------------------------------------------------
Added so the studio `modal-btn-*` family can alias DI directly
(instead of carrying a parallel button system). All share the same
pill geometry, transition curve, and disabled treatment. */
.di-btn-secondary {
background: transparent;
border-color: rgba(var(--global-text-color-rgb), 0.16);
color: var(--global-text-color);
}
.di-btn-secondary:hover {
background: rgba(var(--global-text-color-rgb), 0.04);
border-color: rgba(var(--global-text-color-rgb), 0.32);
}
.di-btn-danger {
background: transparent;
border-color: rgba(var(--global-error-color-rgb, 231, 76, 60), 0.35);
color: var(--global-error-color);
}
.di-btn-danger:hover {
background: var(--global-error-color);
border-color: var(--global-error-color);
color: #fff;
}
.di-btn-danger-filled {
background: var(--global-error-color);
border-color: transparent;
color: #fff;
}
.di-btn-danger-filled:hover { opacity: 0.9; transform: translateY(-1px); }
.di-btn:disabled,
.di-btn[aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* Extra size — `xs` is the modal-friendly 30px micro density used
for "Save alias" / inline form actions where md/sm are too tall. */
.di-btn-xs { height: 30px; padding: 0 12px; font-size: 12px; }
/* ---- Form fields — borderless hairline (v2) ----------------------
The canonical input family. Fully styled forms compose
`.di-field` (label) → `.di-input` / `.di-select` / `.di-textarea`
without re-declaring chrome per surface. Studio `.form-group`
inputs alias these recipes verbatim so the editor + studio modals
read as one product. */
.di-input,
.di-select,
.di-textarea {
width: 100%;
padding: 10px 12px;
background: var(--global-body-background);
border: 1px solid rgba(var(--global-text-color-rgb), 0.14);
border-radius: 10px;
font-family: inherit;
font-size: 13.5px;
color: var(--global-text-color);
transition: border-color 0.18s var(--di-ease),
box-shadow 0.18s var(--di-ease);
-webkit-appearance: none;
appearance: none;
}
.di-input::placeholder,
.di-textarea::placeholder {
color: var(--global-text-muted);
}
.di-input:hover,
.di-select:hover,
.di-textarea:hover {
border-color: rgba(var(--global-text-color-rgb), 0.28);
}
.di-input:focus,
.di-select:focus,
.di-textarea:focus {
outline: none;
/* Neutral focus — see DESIGN.md §2.5 (neutral state tokens). Solo
brand color was retired; brand identity lives in iridescent treatments. */
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.di-input:disabled,
.di-select:disabled,
.di-textarea:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.di-textarea {
min-height: 84px;
resize: vertical;
line-height: 1.5;
}
.di-select {
cursor: pointer;
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.di-field-hint {
font-size: 11.5px;
color: var(--global-text-muted);
line-height: 1.45;
}
.di-field-error {
font-size: 11.5px;
color: var(--global-error-color);
}
.di-field.has-error .di-input,
.di-field.has-error .di-select,
.di-field.has-error .di-textarea {
border-color: var(--global-error-color);
box-shadow: 0 0 0 3px rgba(var(--global-error-color-rgb, 231, 76, 60), 0.16);
}
/* ---- Interactive card (v2) ---------------------------------------
Lighter sibling of `.di-card`, intended for product surfaces like
the studio project grid. Same iridescent bloom on hover, but
smaller padding/radius so it composes inside dense lists. Pairs
with `data-iridescent-hover` for cursor-tracked light direction
(when JS helper is available); otherwise the static diagonal
default still reads. */
.di-card-interactive {
position: relative;
background: var(--global-card-background);
border: 1px solid var(--global-border-color);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
--hover-x: -1;
--hover-y: -1;
transition:
transform 0.4s var(--di-ease-spring),
border-color 0.4s var(--di-ease),
box-shadow 0.4s var(--di-ease);
}
.di-card-interactive:hover {
transform: translateY(-2px);
border-color: rgba(var(--global-text-color-rgb), 0.04);
box-shadow:
calc( 16px * var(--hover-x)) calc( 10px * var(--hover-y)) 40px -10px rgba(var(--brand-violet-rgb), 0.20),
calc(-16px * var(--hover-x)) calc( 10px * var(--hover-y)) 40px -10px rgba(var(--brand-rose-rgb), 0.18),
calc(-16px * var(--hover-x)) calc(-16px * var(--hover-y)) 44px -10px rgba(var(--brand-cognac-rgb), 0.16),
calc( 16px * var(--hover-x)) calc(-16px * var(--hover-y)) 44px -10px rgba(var(--brand-teal-rgb), 0.20),
0 18px 40px -20px rgba(var(--global-text-color-rgb), 0.10);
}
@media (prefers-reduced-motion: reduce) {
.di-card-interactive { transition: none; }
.di-card-interactive:hover { transform: none; }
}
/* ---------- Cards (iridescent hover bloom) ----------------------- */
.di-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 900px) { .di-card-grid { grid-template-columns: 1fr; } }
.di-card {
position: relative;
padding: clamp(28px, 3.4vw, 44px);
background: var(--global-card-background);
border: 1px solid var(--global-border-color);
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 14px;
/* Cursor-tracked shadow direction (see DESIGN_IDENTITY \u00a76.6). */
--hover-x: -1;
--hover-y: -1;
transition:
transform 0.6s var(--di-ease-spring),
border-color 0.6s var(--di-ease),
box-shadow 0.6s var(--di-ease);
}
/* Iridescent ambient glow on hover \u2014 four colored drop shadows positioned
in opposite quadrants so violet \u00b7 rose \u00b7 cognac \u00b7 teal are all visible
simultaneously, like ambient light from a chromatic source. The
source axis rotates under the cursor via `--hover-x/y`, written by
`SShowBrand.attachIridescentHover` in index.js. */
.di-card:hover {
transform: translateY(-3px);
border-color: rgba(var(--global-text-color-rgb), 0.04);
box-shadow:
calc( 22px * var(--hover-x)) calc( 14px * var(--hover-y)) 56px -10px rgba(var(--brand-violet-rgb), 0.22),
calc(-22px * var(--hover-x)) calc( 14px * var(--hover-y)) 56px -10px rgba(var(--brand-rose-rgb), 0.20),
calc(-22px * var(--hover-x)) calc(-22px * var(--hover-y)) 60px -10px rgba(var(--brand-cognac-rgb), 0.18),
calc( 22px * var(--hover-x)) calc(-22px * var(--hover-y)) 60px -10px rgba(var(--brand-teal-rgb), 0.22),
0 28px 56px -24px rgba(var(--global-text-color-rgb), 0.10);
}
.di-card-title {
margin: 4px 0 0;
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 900;
line-height: 1.18;
letter-spacing: -0.024em;
}
.di-card-body {
margin: 0;
font-size: 14.5px;
line-height: 1.68;
color: var(--global-text-muted);
}
/* ---------- Form fields (BORDERLESS, restrained) ---------------- */
.di-form {
display: grid;
gap: 26px;
max-width: 480px;
}
.di-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.di-field-label {
font-family: 'Pretendard Variable', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: -0.005em;
text-transform: none;
color: var(--global-text-muted);
}
/* `.di-field` raw `input`/`textarea`/`select` children inherit the
outlined `.di-input` recipe (same chrome, same focus tokens). The
previous borderless underline treatment was retired in v3 — DI
uses one input style across the product. Surfaces that want the
underline look must opt-in explicitly with a separate class. */
.di-field input,
.di-field textarea,
.di-field select {
width: 100%;
padding: 10px 12px;
background: var(--global-body-background);
border: 1px solid rgba(var(--global-text-color-rgb), 0.14);
border-radius: 10px;
font-family: inherit;
font-size: 13.5px;
color: var(--global-text-color);
transition: border-color 0.18s var(--di-ease),
box-shadow 0.18s var(--di-ease);
-webkit-appearance: none;
appearance: none;
}
.di-field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.di-field select {
cursor: pointer;
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.di-field input::placeholder,
.di-field textarea::placeholder {
color: var(--global-text-muted);
}
.di-field input:hover,
.di-field textarea:hover,
.di-field select:hover {
border-color: rgba(var(--global-text-color-rgb), 0.28);
}
.di-field input:focus,
.di-field textarea:focus,
.di-field select:focus {
outline: none;
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.di-field input:disabled,
.di-field textarea:disabled,
.di-field select:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ---------- Checkbox (custom-styled, theme-aware) ---------------- *
* Replaces the unreliable native `accent-color` approach so the
* checkmark glyph is guaranteed to render in both light and dark
* mode and matches the rest of the DI input chrome (1.5px hairline,
* 5px radius, neutral focus ring).
*
* Markup contract — no extra wrapper element required:
*
*
* The checkmark is drawn directly on the input via `background-image`
* (white in light mode, black in dark mode — bg of the checked box
* is `--global-text-color`, which inverts on theme so the check
* inherits its inverse). */
.di-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
font-size: 13px;
color: var(--global-text-color);
line-height: 1.4;
}
.di-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
cursor: pointer;
background: var(--global-body-background);
border: 1.5px solid rgba(var(--global-text-color-rgb), 0.32);
border-radius: 5px;
transition: background-color 0.15s var(--di-ease),
border-color 0.15s var(--di-ease),
box-shadow 0.15s var(--di-ease);
}
.di-checkbox input[type="checkbox"]:hover:not(:disabled) {
border-color: rgba(var(--global-text-color-rgb), 0.55);
}
.di-checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid var(--focus-outline-color);
outline-offset: 2px;
}
.di-checkbox input[type="checkbox"]:checked {
background-color: var(--global-text-color);
border-color: var(--global-text-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
.di-checkbox input[type="checkbox"]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
/* In dark mode, --global-text-color is light, so the checked box
fill is light too — swap the check stroke to dark for contrast. */
.di-checkbox input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
}
/* ---------- Dialog (modal) primitive ----------------------------- *
* Canonical dialog used by every studio surface — main shell modals,
* editor share / upload dialogs, settings, storage upgrade nag, and any
* marketing-side modal — all use this recipe directly. The primitive
* owns:
* – overlay (backdrop blur, single z-index 9999, fade-in)
* – container (sizing modifiers, drop shadow, scale-in)
* – header (title + subtitle + close X)
* – tabs (animated underline indicator, icon-friendly)
* – body (scroll region) + footer (action row)
* – mobile bottom-sheet behavior at <=640px
*
* Markup contract:
*
*
* Sizing on `.di-dialog`:
* .di-dialog-sm → 440px (single-form modals)
* .di-dialog-md → 560px (settings, default)
* .di-dialog-lg → 720px (rich layouts like share)
*
* Open state: container is shown when overlay has `.is-open`
* (preferred) or the legacy `.active` (studio compatibility).
* See docs/DESIGN.md §7.11 Dialog (modal primitive). */
/* Solid scrim only — no backdrop-filter. Full-viewport blur was the
single biggest cost on mobile (every frame the entire page below had
to be rasterised and blurred). A slightly heavier opacity scrim
carries the same visual job without touching the GPU. */
.di-dialog-overlay {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(10, 10, 12, 0.55);
z-index: 9999;
}
.di-dialog-overlay.is-open,
.di-dialog-overlay.active {
display: flex;
animation: di-dialog-overlay-in 180ms var(--di-ease, ease) both;
}
@keyframes di-dialog-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* No drop-shadow — the scrim already lifts the dialog off the page,
and large-radius shadows force per-frame rasterisation on mobile. A
single hairline border carries the edge definition. */
.di-dialog {
width: 100%;
max-width: 560px;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
background: var(--global-card-background);
border: 1px solid rgba(var(--global-text-color-rgb), 0.08);
border-radius: 16px;
overflow: hidden;
animation: di-dialog-in 200ms var(--di-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
}
.di-dialog-sm { max-width: 440px; }
.di-dialog-md { max-width: 560px; }
.di-dialog-lg { max-width: 720px; }
.di-dialog-xl { max-width: 880px; }
/* translateY + opacity only — compositor-friendly, no scale (avoids
re-rasterising the rounded border on every frame). */
@keyframes di-dialog-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.di-dialog-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 22px 24px 16px;
flex-shrink: 0;
}
.di-dialog-header > div { min-width: 0; flex: 1; }
.di-dialog-title {
margin: 0;
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.018em;
color: var(--global-text-color);
}
.di-dialog-subtitle {
margin: 4px 0 0;
font-size: 13px;
color: var(--global-text-muted);
line-height: 1.5;
}
/* Icon button — square ghost with pill radius. Single-glyph affordance
(close, settings, copy, ...). Sizes line up with .di-btn -sm/-md/-lg
so an icon button reads as the same density as a labeled sibling. */
.di-btn-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 999px;
color: var(--global-text-muted);
cursor: pointer;
flex-shrink: 0;
transition:
background-color 180ms var(--di-ease, ease),
border-color 180ms var(--di-ease, ease),
color 180ms var(--di-ease, ease);
}
.di-btn-icon:hover {
background: var(--state-hover-bg);
color: var(--global-text-color);
}
.di-btn-icon:focus-visible {
outline: 2px solid var(--focus-outline-color);
outline-offset: 2px;
}
.di-btn-icon svg { width: 18px; height: 18px; }
/* Sizes */
.di-btn-icon-sm { width: 28px; height: 28px; }
.di-btn-icon-sm svg { width: 16px; height: 16px; }
.di-btn-icon-lg { width: 36px; height: 36px; }
.di-btn-icon-lg svg { width: 20px; height: 20px; }
/* Outline — hairline border for icon buttons that sit on backgrounds
without their own chrome (header chips, dropdown triggers). */
.di-btn-icon-outline {
border-color: rgba(var(--global-text-color-rgb), 0.1);
}
.di-btn-icon-outline:hover {
border-color: rgba(var(--global-text-color-rgb), 0.2);
}
.di-dialog-tabs {
display: flex;
align-items: center;
gap: 4px;
padding: 0 16px;
margin: 0 8px;
border-bottom: 1px solid rgba(var(--global-text-color-rgb), 0.06);
overflow-x: auto;
scrollbar-width: none;
flex-shrink: 0;
}
.di-dialog-tabs::-webkit-scrollbar { display: none; }
.di-dialog-tab {
position: relative;
height: 40px;
padding: 0 12px;
background: transparent;
border: none;
color: var(--global-text-muted);
font-family: 'Pretendard Variable', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: color 180ms var(--di-ease, ease);
}
.di-dialog-tab:hover { color: var(--global-text-color); }
.di-dialog-tab.is-active,
.di-dialog-tab.active {
color: var(--global-text-color);
font-weight: 600;
}
.di-dialog-tab::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
background: var(--global-text-color);
border-radius: 2px 2px 0 0;
transform: scaleX(0);
transform-origin: center;
transition: transform 220ms var(--di-ease, ease);
}
.di-dialog-tab.is-active::after,
.di-dialog-tab.active::after { transform: scaleX(1); }
.di-dialog-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.di-dialog-tab:focus-visible {
outline: 2px solid var(--focus-outline-color);
outline-offset: -4px;
border-radius: 6px;
}
.di-dialog-body {
flex: 1;
overflow-y: auto;
padding: 18px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.di-dialog-body.is-flush { padding: 0; }
.di-dialog-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 14px 24px 20px;
border-top: 1px solid rgba(var(--global-text-color-rgb), 0.04);
flex-shrink: 0;
}
.di-dialog-footer-split { justify-content: space-between; }
.di-dialog-footer-right { display: inline-flex; align-items: center; gap: 8px; }
/* Mobile bottom-sheet (consistent with existing studio behavior) */
@media (max-width: 640px) {
.di-dialog-overlay { padding: 0; align-items: flex-end; }
.di-dialog {
max-width: 100%;
max-height: calc(100vh - 24px);
border-radius: 16px 16px 0 0;
animation: di-dialog-in-mobile 240ms var(--di-ease-spring, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
}
.di-dialog-header { padding: 20px 18px 12px; }
.di-dialog-tabs { padding: 0 10px; margin: 0 8px; }
.di-dialog-body { padding: 16px 18px; }
.di-dialog-footer { padding: 12px 18px 18px; }
}
@keyframes di-dialog-in-mobile {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-color-scheme: dark) {
.di-dialog { border-color: rgba(var(--global-text-color-rgb), 0.10); }
}
/* ---------- Badges (OUTLINED) ------------------------------------ */
.di-badge {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(var(--global-text-color-rgb), 0.16);
background: transparent;
color: var(--global-text-muted);
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
}
.di-badge-violet { color: #6750D8; border-color: rgba(103, 80, 216, 0.45); }
.di-badge-magenta { color: #B85970; border-color: rgba(199, 107, 134, 0.55); }
.di-badge-amber { color: #A47340; border-color: rgba(201, 148, 100, 0.55); }
.di-badge-cyan { color: #517A70; border-color: rgba(122, 163, 154, 0.6); }
.di-badge-success { color: var(--global-success-color); border-color: rgba(46, 125, 204, 0.45); }
.di-badge-error { color: var(--global-error-color); border-color: rgba(231, 76, 60, 0.45); }
@media (prefers-color-scheme: dark) {
.di-badge-violet { color: #9C8CE8; }
.di-badge-magenta { color: #E59FB3; }
.di-badge-amber { color: #DDB48E; }
.di-badge-cyan { color: #A6C4BC; }
}
/* ---------- Easing list ------------------------------------------ */
.di-easing-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 720px) { .di-easing-list { grid-template-columns: 1fr; } }
.di-easing {
padding: 24px;
background: var(--global-card-background);
border: 1px solid var(--global-border-color);
border-radius: 18px;
}
.di-easing code {
display: inline-block;
margin: 6px 0 12px;
padding: 4px 10px;
background: rgba(var(--global-text-color-rgb), 0.05);
border-radius: 8px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px;
}
/* ---------- Row ---------------------------------------------------- */
.di-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
/* ---------- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.di-hero-aura,
.di-btn-iridescent { animation: none; }
.di-card,
.di-btn,
.di-field { transition: none; }
}
/* =====================================================================
* 00 · Logo
* ---------------------------------------------------------------------
* Three frame styles ("surface", "ink", "lockup") + glyph + wordmark.
* The surface frame uses the page card background so the mark reads
* as it would on the live site; the ink frame previews on dark
* surfaces (OG cards, headers). All variants share the same square
* aspect ratio so the visual rhythm of the grid stays calm.
* ===================================================================== */
.di-logo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 24px);
margin-top: 12px;
}
@media (max-width: 900px) {
.di-logo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.di-logo-grid { grid-template-columns: 1fr; }
}
.di-logo-card {
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.di-logo-card--wide { grid-column: span 2; }
@media (max-width: 560px) {
.di-logo-card--wide { grid-column: auto; }
}
.di-logo-frame {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
border: 1px solid var(--global-border-color);
overflow: hidden;
position: relative;
}
.di-logo-frame--surface {
background: var(--global-card-background);
color: var(--global-text-color);
}
.di-logo-frame--ink {
background: #0E0E10;
color: #fff;
border-color: rgba(255,255,255,0.08);
}
.di-logo-frame--lockup {
aspect-ratio: 16 / 7;
gap: clamp(12px, 2vw, 24px);
flex-direction: row;
}
.di-logo-glyph {
width: 56%;
height: auto;
color: inherit;
}
.di-logo-glyph--lockup { width: 18%; }
.di-logo-wordmark {
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 900;
font-size: clamp(48px, 7.5vw, 96px);
line-height: 0.95;
letter-spacing: -0.045em;
color: inherit;
}
.di-logo-wordmark--lockup {
font-size: clamp(40px, 6vw, 80px);
}
.di-logo-cap {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 4px;
}
.di-logo-name {
font-family: 'Pretendard Variable', sans-serif;
font-weight: 600;
font-size: 13.5px;
color: var(--global-text-color);
letter-spacing: -0.005em;
}
.di-logo-desc {
font-size: 12px;
color: var(--global-text-muted);
letter-spacing: -0.005em;
}
.di-logo-desc code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
padding: 1px 4px;
border-radius: 4px;
background: rgba(var(--global-text-color-rgb), 0.06);
}
.di-logo-rules {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13.5px;
line-height: 1.6;
color: var(--global-text-color);
}
.di-logo-rules li {
padding-left: 14px;
position: relative;
}
.di-logo-rules li::before {
content: '·';
position: absolute;
left: 2px;
top: -2px;
font-weight: 700;
color: var(--global-text-muted);
}
.di-logo-rules code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
padding: 1px 5px;
border-radius: 4px;
background: rgba(var(--global-text-color-rgb), 0.06);
}
/* =====================================================================
* Segmented Control (.di-segmented)
* ---------------------------------------------------------------------
* Single-line radio-group surface for picking 1 of N short values
* (locale, theme, density). Built from a flex track that holds