/* ============================================================================ * personality.css — Layer 2 consumer rules for the 6-system personality contract * ============================================================================ * Authoritative reference: .claude/workspace/docs/personality-contract.md * * Personality is a SKIN layer. It consumes 36 --p-* CSS variables and 9 * [data-personality-*] data attributes set on by presets. Six systems * are wired here: Form, Surface, Motion, Ornament, Image, Interaction. * * Rhythm (spacing) and Type expression (heading/body weight, tracking, * transform, leading) are intentionally NOT in this contract — panels own * their own typography and spacing so mobile-native panels stay * mobile-native under every preset. * * Concatenated into scaffolding.css at serve time (see ScaffoldingProvider + * ScaffoldingAssetController). * ========================================================================= */ /* ──────────────────────────────────────────────────────────────────────────── * FORM (radius scale) * ──────────────────────────────────────────────────────────────────────── */ .p-card { border-radius: var(--p-radius-md, 8px); } .p-block { border-radius: var(--p-radius-md, 8px); } .p-input { border-radius: var(--p-radius-sm, 4px); } .p-tag { border-radius: var(--p-radius-xs, 2px); } .p-button { border-radius: var(--p-radius-button, 6px); } .p-image { border-radius: var(--p-radius-image, 0); } .p-image-frame { border-radius: var(--p-radius-image, 0); } .p-panel-root { border-radius: var(--p-radius-lg, 16px); } /* Functional invariants only — display + cursor. Padding, font-size, and * line-height are panel-author concerns. */ .p-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; cursor: pointer; border-width: 0; border-style: solid; } .p-input { border-width: 1px; border-style: solid; } /* ──────────────────────────────────────────────────────────────────────────── * SURFACE (cards, blocks, panels) * ──────────────────────────────────────────────────────────────────────── */ .p-card { background: var(--p-card-bg, color-mix(in srgb, var(--bg-surface, rgba(255, 255, 255, 0.04)) 70%, var(--text-main, currentColor) 4%)); border-width: var(--p-card-border-width, 1px); border-style: var(--p-card-border-style, solid); border-color: var(--p-card-border-color, color-mix(in srgb, var(--text-main, currentColor) 14%, transparent)); box-shadow: var(--p-card-shadow, 0 1px 2px color-mix(in srgb, var(--text-main, #000) 6%, transparent), 0 4px 12px color-mix(in srgb, var(--text-main, #000) 4%, transparent)); backdrop-filter: var(--p-card-backdrop, none); -webkit-backdrop-filter: var(--p-card-backdrop, none); } .p-block { background: var(--p-block-bg, transparent); border: var(--p-block-border, none); } .p-divider { background: var(--p-divider-color, color-mix(in srgb, var(--text-main, currentColor) 18%, transparent)); height: var(--p-divider-thickness, 1px); border: 0; opacity: var(--p-ornament-opacity, 0.6); } /* Surface mode variants — reach for these when the simple var set isn't enough */ [data-personality-surface="glass"] .p-card { background: color-mix(in srgb, var(--bg-surface, #1a1a20) 50%, transparent); } [data-personality-surface="neon"] .p-card { position: relative; } [data-personality-surface="neon"] .p-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, var(--color-primary, currentColor), transparent 50%, var(--color-primary, currentColor)); z-index: -1; opacity: 0.6; pointer-events: none; } /* Rhythm and Type expression are intentionally NOT in this contract — panels * own their own spacing and typography so mobile-native panels stay * mobile-native under every preset. See personality-contract.md. */ /* ──────────────────────────────────────────────────────────────────────────── * MOTION * ──────────────────────────────────────────────────────────────────────── */ .p-card, .p-button, .p-image, .p-image-frame { transition: transform var(--p-duration-fast, 150ms) var(--p-easing-default, ease-out), box-shadow var(--p-duration-fast, 150ms) var(--p-easing-default, ease-out), border-color var(--p-duration-base, 250ms) var(--p-easing-default, ease-out), background-color var(--p-duration-base, 250ms) var(--p-easing-default, ease-out), filter var(--p-duration-base, 250ms) var(--p-easing-default, ease-out), opacity var(--p-duration-base, 250ms) var(--p-easing-default, ease-out); } .p-card:hover { transform: translateY(var(--p-hover-lift, 0)); } [data-personality-motion="spring"] .p-card, [data-personality-motion="spring"] .p-button { transition-timing-function: var(--p-easing-accent, cubic-bezier(0.34, 1.56, 0.64, 1)); } [data-personality-motion="glitch"] .p-card:hover { animation: p-glitch 200ms steps(3) 1; } @keyframes p-glitch { 0% { transform: translate(0, 0); } 33% { transform: translate(-1px, 0); } 66% { transform: translate(1px, 0); } 100% { transform: translate(0, 0); } } /* ──────────────────────────────────────────────────────────────────────────── * ORNAMENT * ──────────────────────────────────────────────────────────────────────── */ /* Divider style variants */ [data-personality-divider="dashed"] .p-divider { background: repeating-linear-gradient( 90deg, var(--p-divider-color, var(--border-subtle, rgba(255, 255, 255, 0.1))) 0 6px, transparent 6px 12px ); } [data-personality-divider="dotted"] .p-divider { background: repeating-linear-gradient( 90deg, var(--p-divider-color, var(--border-subtle, rgba(255, 255, 255, 0.1))) 0 2px, transparent 2px 6px ); } [data-personality-divider="gradient"] .p-divider { background: linear-gradient( 90deg, transparent, var(--color-primary, currentColor), transparent ); } [data-personality-divider="glyph"] .p-divider { background: transparent; height: auto; text-align: center; position: relative; } [data-personality-divider="glyph"] .p-divider::before { content: "✦"; color: var(--color-primary, currentColor); background: var(--bg-body, transparent); padding: 0 0.75em; font-size: 0.8em; opacity: var(--p-ornament-opacity, 0.6); } /* Eyebrow accent treatments — only the ornament marker; typography (weight, * letter-spacing, transform) is the panel author's call. */ .p-eyebrow { display: inline-flex; align-items: center; gap: 0.5em; } [data-personality-eyebrow="dot"] .p-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary, currentColor); flex-shrink: 0; } [data-personality-eyebrow="bar"] .p-eyebrow::before { content: ""; width: 24px; height: var(--p-accent-line-width, 2px); background: var(--p-accent-line-color, var(--color-primary, currentColor)); flex-shrink: 0; } [data-personality-eyebrow="underline"] .p-eyebrow { border-bottom: var(--p-accent-line-width, 2px) solid var(--p-accent-line-color, var(--color-primary, currentColor)); padding-bottom: 0.25em; } [data-personality-eyebrow="bracket"] .p-eyebrow::before { content: "["; color: var(--p-accent-line-color, var(--color-primary, currentColor)); } [data-personality-eyebrow="bracket"] .p-eyebrow::after { content: "]"; color: var(--p-accent-line-color, var(--color-primary, currentColor)); } /* Corner brackets — applied to .p-bracketed elements */ [data-personality-corner="brackets"] .p-bracketed { position: relative; } [data-personality-corner="brackets"] .p-bracketed::before, [data-personality-corner="brackets"] .p-bracketed::after { content: ""; position: absolute; width: 12px; height: 12px; border: var(--p-accent-line-width, 2px) solid var(--p-accent-line-color, var(--color-primary, currentColor)); pointer-events: none; } [data-personality-corner="brackets"] .p-bracketed::before { top: 0; left: 0; border-right: 0; border-bottom: 0; } [data-personality-corner="brackets"] .p-bracketed::after { bottom: 0; right: 0; border-left: 0; border-top: 0; } [data-personality-corner="frame"] .p-bracketed { position: relative; outline: var(--p-accent-line-width, 2px) solid var(--p-accent-line-color, var(--color-primary, currentColor)); outline-offset: 4px; } /* Texture overlays — applied to panel surface via ::after layer */ [data-personality-texture]:not([data-personality-texture="none"]) .p-textured { position: relative; } [data-personality-texture]:not([data-personality-texture="none"]) .p-textured::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; } [data-personality-texture="grain"] .p-textured::after { background-image: radial-gradient( circle at 50% 50%, color-mix(in srgb, var(--text-main, currentColor) 8%, transparent) 0, transparent 1px ); background-size: 3px 3px; opacity: 0.4; mix-blend-mode: overlay; } [data-personality-texture="scanlines"] .p-textured::after { background: repeating-linear-gradient( 0deg, transparent 0 2px, color-mix(in srgb, var(--text-main, currentColor) 4%, transparent) 2px 3px ); } [data-personality-texture="dot-grid"] .p-textured::after { background-image: radial-gradient( circle, color-mix(in srgb, var(--text-main, currentColor) 8%, transparent) 1px, transparent 1px ); background-size: 20px 20px; } [data-personality-texture="noise"] .p-textured::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); opacity: 0.06; mix-blend-mode: overlay; } /* Generic ornament opacity hook */ .p-ornament { opacity: var(--p-ornament-opacity, 0.6); } /* Accent line element */ .p-accent-line { height: var(--p-accent-line-width, 0); background: var(--p-accent-line-color, var(--color-primary, currentColor)); width: 100%; } /* ──────────────────────────────────────────────────────────────────────────── * IMAGE * ──────────────────────────────────────────────────────────────────────── */ .p-image { filter: var(--p-image-filter-rest, none); } .p-image-frame { border: var(--p-image-frame-style, 0); padding: var(--p-image-frame-offset, 0); display: inline-block; } .p-image:hover { filter: var(--p-image-filter-hover, var(--p-image-filter-rest, none)); } [data-personality-image-hover="zoom"] .p-image:hover { transform: scale(1.05); } [data-personality-image-hover="pan"] .p-image:hover { transform: translateY(-2%); } [data-personality-image-hover="lift"] .p-image:hover { transform: translateY(-4px); box-shadow: 0 12px 24px color-mix(in srgb, var(--text-main, currentColor) 16%, transparent); } [data-personality-image-hover="rgb-shift"] .p-image:hover { filter: var(--p-image-filter-hover, none); box-shadow: 2px 0 0 color-mix(in srgb, var(--color-primary, #f0f) 50%, transparent), -2px 0 0 color-mix(in srgb, var(--color-primary, #0ff) 50%, transparent); } /* Caption-rise mode requires .p-image-wrap > .p-image + .p-image-caption structure */ [data-personality-image-hover="caption-rise"] .p-image-wrap { position: relative; overflow: hidden; display: inline-block; } [data-personality-image-hover="caption-rise"] .p-image-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; background: linear-gradient( transparent, color-mix(in srgb, var(--bg-body, #000) 80%, transparent) ); transform: translateY(100%); transition: transform var(--p-duration-base, 250ms) var(--p-easing-default, ease-out); color: var(--text-main, #fff); } [data-personality-image-hover="caption-rise"] .p-image-wrap:hover .p-image-caption { transform: translateY(0); } /* ──────────────────────────────────────────────────────────────────────────── * INTERACTION * ──────────────────────────────────────────────────────────────────────── */ .p-card:focus-visible, .p-button:focus-visible, .p-image:focus-visible, .p-link:focus-visible { outline: var(--p-focus-ring-width, 2px) solid var(--p-focus-ring-color, var(--color-primary, currentColor)); outline-offset: var(--p-focus-ring-offset, 2px); } .p-card:hover { box-shadow: var(--p-card-hover-shadow, var(--p-card-shadow, none)); } .p-button:hover { background: var(--p-button-hover-bg, var(--color-primary, currentColor)); } .p-link { text-decoration-color: var(--p-link-underline-color, currentColor); text-decoration-thickness: var(--p-link-underline-thickness, 1px); } /* Link underline modes */ [data-personality-link-underline="none"] .p-link { text-decoration: none; } [data-personality-link-underline="always"] .p-link { text-decoration: underline; } [data-personality-link-underline="hover-fade"] .p-link { text-decoration: none; } [data-personality-link-underline="hover-fade"] .p-link:hover { text-decoration: underline; } [data-personality-link-underline="hover-slide"] .p-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 var(--p-link-underline-thickness, 1px) no-repeat; text-decoration: none; transition: background-size var(--p-duration-base, 250ms) var(--p-easing-default, ease-out); } [data-personality-link-underline="hover-slide"] .p-link:hover { background-size: 100% var(--p-link-underline-thickness, 1px); } [data-personality-link-underline="hover-grow"] .p-link { text-decoration: underline; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--p-duration-fast, 150ms); } [data-personality-link-underline="hover-grow"] .p-link:hover { text-decoration-thickness: 3px; } /* Button hover modes */ [data-personality-button-hover="glow"] .p-button:hover { box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary, currentColor) 60%, transparent); } [data-personality-button-hover="slide"] .p-button { position: relative; overflow: hidden; isolation: isolate; } [data-personality-button-hover="slide"] .p-button::before { content: ""; position: absolute; inset: 0; background: var(--p-button-hover-bg, var(--color-primary, currentColor)); transform: translateX(-100%); transition: transform var(--p-duration-base, 250ms) var(--p-easing-default, ease-out); z-index: -1; } [data-personality-button-hover="slide"] .p-button:hover::before { transform: translateX(0); } [data-personality-button-hover="arrow-emerge"] .p-button .p-arrow { display: inline-block; transform: translateX(-4px); opacity: 0; transition: transform var(--p-duration-fast, 150ms) var(--p-easing-default, ease-out), opacity var(--p-duration-fast, 150ms) var(--p-easing-default, ease-out); } [data-personality-button-hover="arrow-emerge"] .p-button:hover .p-arrow { transform: translateX(0); opacity: 1; } [data-personality-button-hover="fill-shift"] .p-button:hover { background: var(--p-button-hover-bg, var(--color-primary, currentColor)); }