/* ============================================================ LCD Portfolio — component styles Consumes tokens from ../../colors_and_type.css ============================================================ */ /* ---------- THEME INVERT ---------- Default theme is dark (defined in colors_and_type.css). When [data-theme="light"] is set on , the LCD tokens are remapped so every surface, rule, and glyph flips. The transition is driven by a global property animation. */ html[data-theme="light"] { --lcd-black: #f0f0f0; --lcd-ink: #e8e8e8; --lcd-surface: #dedede; --lcd-surface-2: #cccccc; --lcd-surface-3: #b4b4b4; --lcd-rule: #d4d4d4; --lcd-rule-soft: #e0e0e0; --lcd-off-white: #080808; --lcd-white: #000000; --lcd-fg-mute: #5a5a5a; --lcd-fg-faint: #8a8a8a; --lcd-fg-ghost: #c2c2c2; /* Keep the registered-mark accent — but pull it down a notch so it doesn't glare against a light field. */ --lcd-blue: #1f6fe0; /* Re-bind semantics so cascaded references update */ --fg-1: var(--lcd-off-white); --fg-2: var(--lcd-fg-mute); --fg-3: var(--lcd-fg-faint); --fg-accent: var(--lcd-blue); --bg-1: var(--lcd-black); --bg-2: var(--lcd-ink); --bg-3: var(--lcd-surface); --bg-4: var(--lcd-surface-2); } /* Animate the invert across every themed surface. */ html, body, .lcd-topbar, .lcd-section, .lcd-footer, .lcd-topbar__link, .lcd-topbar__link::after, .lcd-hero-title, .lcd-hero-section__meta, .lcd-work__title, .lcd-work__type, .lcd-art__title, .lcd-art__sub, .lcd-placeholder, .lcd-placeholder__label, .lcd-field, .lcd-field__label, .lcd-field__input, .lcd-btn-neon, .lcd-footer__mark, .lcd-footer__social a, .lcd-footer__copy, .lcd-theme-toggle, .lcd-theme-toggle__knob, .lcd-theme-toggle__label, .lcd-display-1, .lcd-display-2, .lcd-h1, .lcd-h2, .lcd-h3, .lcd-label, .lcd-label-xs, .lcd-body, .lcd-body-sm, .lcd-caption { transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), fill var(--dur-3) var(--ease-out), stroke var(--dur-3) var(--ease-out); } html, body { background: var(--bg-1); } .lcd-app { min-height: 100vh; } /* ---------- THEME TOGGLE (pill) ---------- */ .lcd-theme-toggle { position: relative; display: inline-flex; align-items: center; width: 140px; height: 30px; border: 1px solid var(--lcd-rule); background: transparent; border-radius: 999px; padding: 0; cursor: pointer; font-family: var(--font-display); user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; justify-self: center; } .lcd-theme-toggle:focus-visible { outline: 1px solid var(--fg-1); outline-offset: 2px; } .lcd-theme-toggle__knob { position: absolute; top: -1px; left: -1px; width: 70px; height: 30px; background: var(--fg-1); border-radius: 999px; transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out); will-change: transform; } html[data-theme="light"] .lcd-theme-toggle__knob { transform: translateX(70px); } .lcd-theme-toggle__label { position: relative; z-index: 1; flex: 1; text-align: center; font-size: 10px; letter-spacing: 0.18em; line-height: 30px; text-transform: uppercase; color: var(--fg-1); } /* The label sitting on top of the knob inverts to read against it */ html[data-theme="dark"] .lcd-theme-toggle__label[data-pos="dark"] { color: var(--bg-1); } html[data-theme="light"] .lcd-theme-toggle__label[data-pos="light"] { color: var(--bg-1); } html:not([data-theme]) .lcd-theme-toggle__label[data-pos="dark"] { color: var(--bg-1); } @media (max-width: 860px) { .lcd-theme-toggle { width: 110px; height: 26px; } .lcd-theme-toggle__knob { width: 55px; height: 26px; } html[data-theme="light"] .lcd-theme-toggle__knob { transform: translateX(55px); } .lcd-theme-toggle__label { font-size: 9px; line-height: 26px; } } /* ---------- TOPBAR ---------- */ .lcd-topbar { position: sticky; top: 0; z-index: 20; background: var(--bg-1); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px var(--page-pad-x); border-bottom: 1px solid var(--lcd-rule); gap: 24px; } .lcd-topbar__center { display: flex; justify-content: center; } .lcd-topbar__mark { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: baseline; gap: 1px; } .lcd-topbar__r { color: var(--fg-accent); font-size: 10px; vertical-align: super; line-height: 1; } .lcd-topbar__nav { display: flex; gap: 28px; justify-content: flex-end; flex-wrap: nowrap; grid-column: 3; } .lcd-topbar__link { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-1); font-weight: 400; padding: 6px 0; position: relative; transition: opacity var(--dur-2) var(--ease-out); } .lcd-topbar__link:hover { opacity: 0.6; } .lcd-topbar__link.is-active { color: var(--fg-1); } .lcd-topbar__link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--fg-1); } /* ---------- HERO ---------- */ .lcd-hero-section { min-height: calc(100vh - 48px); position: relative; display: flex; padding: 0 var(--page-pad-x) var(--space-8); align-items: flex-end; } .lcd-hero-section__inner { width: 100%; } .lcd-hero-title { font-family: var(--font-display); font-size: clamp(64px, 13.5vw, 220px); line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase; margin: 0 0 var(--space-5); color: var(--fg-1); } .lcd-hero-section__meta { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-1); padding-left: 4px; } /* ---------- SECTION SHELL ---------- */ .lcd-section { padding: var(--section-pad-y) var(--page-pad-x); border-top: 1px solid var(--lcd-rule); } .lcd-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: var(--space-8); flex-wrap: wrap; } .lcd-section__head > .lcd-display-1 { flex: 1 1 auto; white-space: nowrap; } .lcd-link { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-1); border-bottom: 1px solid var(--fg-1); padding-bottom: 3px; } /* ---------- PLACEHOLDER ---------- */ .lcd-placeholder { position: relative; width: 100%; background: var(--bg-3); display: grid; place-items: center; overflow: hidden; } .lcd-placeholder__reticle { width: 36px; height: 36px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 14px)); } .lcd-placeholder__label { position: absolute; bottom: clamp(16px, 3vw, 28px); left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-3); font-weight: 300; } /* ---------- SELECTED WORKS ---------- */ .lcd-works__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter-image); align-items: start; } @media (max-width: 1100px) { .lcd-works__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .lcd-works__grid { grid-template-columns: 1fr 1fr; } } .lcd-work { display: flex; flex-direction: column; gap: 16px; } .lcd-work--wide { grid-column: span 2; } .lcd-work__meta { padding: 4px 2px 0; display: flex; flex-direction: column; gap: 4px; } .lcd-work__title { font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 22px); text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); line-height: 1; /* Reserve two lines so cards stay equal height when a title wraps — keeps every image flush to the top of its row (no dark gaps). */ min-height: 2em; } .lcd-work__type { font-size: 12px; color: var(--fg-2); font-weight: 300; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- ABOUT ---------- */ .lcd-about__grid { display: block; margin-bottom: var(--space-8); } .lcd-about__copy { display: flex; flex-direction: column; gap: var(--space-5); max-width: 880px; } .lcd-about__copy h2 { margin: 0 0 var(--space-3); } .lcd-about__copy .lcd-body { max-width: 62ch; color: var(--fg-1); } .lcd-about__meta { display: flex; flex-direction: column; gap: 0; margin: var(--space-3) 0 0; padding: 0; border-top: 1px solid var(--lcd-rule); } .lcd-about__meta-row { display: grid; grid-template-columns: 140px 1fr; align-items: baseline; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--lcd-rule); } .lcd-about__meta dt { color: var(--fg-2); } .lcd-about__meta dd { margin: 0; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-1); } @media (max-width: 720px) { .lcd-about__meta-row { grid-template-columns: 1fr; gap: 6px; } } /* ---------- ART PRACTICE ---------- */ .lcd-art__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter-image); } .lcd-art__item { display: flex; flex-direction: column; gap: 12px; } .lcd-art__caption { padding: 2px; } .lcd-art__title { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); line-height: 1; } .lcd-art__sub { font-size: 11px; color: var(--fg-2); font-weight: 300; margin-top: 6px; } /* ---------- CONTACT ---------- */ .lcd-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 8vw, 120px); } .lcd-contact__copy { display: flex; flex-direction: column; gap: var(--space-5); } .lcd-contact__addr { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 4px; } .lcd-contact__addr .lcd-label-xs { color: var(--fg-2); margin-bottom: 6px; } .lcd-contact__form { display: flex; flex-direction: column; gap: 0; } .lcd-field { display: block; padding: 14px 0 10px; border-bottom: 1px solid var(--lcd-rule); transition: border-color var(--dur-2) var(--ease-out); } .lcd-field.is-focus { border-bottom-color: var(--fg-1); } .lcd-field__label { display: block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 8px; } .lcd-field.is-focus .lcd-field__label { color: var(--fg-1); } .lcd-field__input { width: 100%; font-family: var(--font-body); font-weight: 300; font-size: 16px; color: var(--fg-1); background: transparent; border: 0; outline: none; padding: 0; } .lcd-field__input::placeholder { color: var(--fg-3); } .lcd-field__input--ta { resize: vertical; min-height: 72px; } /* Neon-style submit button — warm monochrome adaptation Twin hairline glows above + below fade in on hover; pill shape, no fill. */ .lcd-btn-neon { position: relative; margin-top: var(--space-6); align-self: flex-start; display: inline-block; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-1); padding: 16px 40px; background: transparent; border: 1px solid var(--lcd-rule); border-radius: 999px; cursor: pointer; overflow: visible; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); } .lcd-btn-neon:hover { border-color: var(--fg-accent); color: var(--fg-accent); } .lcd-btn-neon:active { transform: translateY(1px); } .lcd-btn-neon__label { position: relative; z-index: 1; } .lcd-btn-neon__glow { position: absolute; left: 0; right: 0; width: 75%; height: 1px; margin: 0 auto; pointer-events: none; background: linear-gradient( to right, transparent 0%, var(--fg-accent) 50%, transparent 100% ); filter: drop-shadow(0 0 6px var(--fg-accent)); opacity: 0; transition: opacity 500ms var(--ease-out); } .lcd-btn-neon__glow--top { top: 0; } .lcd-btn-neon__glow--bottom { bottom: -1px; } .lcd-btn-neon:hover .lcd-btn-neon__glow--top { opacity: 1; } .lcd-btn-neon:hover .lcd-btn-neon__glow--bottom { opacity: 0.35; } .lcd-btn-neon:disabled { color: var(--fg-2); border-color: var(--lcd-rule); cursor: default; } .lcd-btn-neon:disabled:hover { border-color: var(--lcd-rule); } .lcd-btn-neon:disabled .lcd-btn-neon__glow { opacity: 0; } /* ---------- FOOTER ---------- */ .lcd-footer { border-top: 1px solid var(--lcd-rule); } .lcd-footer__inner { padding: var(--space-6) var(--page-pad-x); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 24px; } .lcd-footer__mark { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: baseline; gap: 1px; } .lcd-footer__social { display: flex; gap: 20px; justify-content: center; } .lcd-footer__social a { color: var(--fg-1); opacity: 0.7; transition: opacity var(--dur-2) var(--ease-out); } .lcd-footer__social a:hover { opacity: 1; } .lcd-footer__copy { text-align: right; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-2); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 860px) { .lcd-topbar { grid-template-columns: auto 1fr auto; gap: 12px; } .lcd-topbar__nav { gap: 14px; grid-column: auto; } .lcd-topbar__center { display: none; } .lcd-works__grid, .lcd-art__grid { grid-template-columns: 1fr 1fr; } .lcd-about__grid, .lcd-contact__grid { grid-template-columns: 1fr; } .lcd-footer__inner { grid-template-columns: 1fr; text-align: center; gap: 16px; } .lcd-footer__social { justify-content: center; } .lcd-footer__copy { text-align: center; } }