/* ===== Hub Theme (Technical / Calm) ===== */ :root{ --bg: #0E1116; --panel: #131821; --text: #E6E8EB; --muted: #9AA3AD; --line: #2A2F36; --accent: #4DA3FF; /* Portal refinements (defaults safe even on hub) */ --accent-soft: rgba(77,163,255,0.28); --accent-glow: rgba(77,163,255,0.22); --radius: 16px; --maxw: 1100px; --sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Motion tokens */ --t-fast: 120ms ease; --t-link: 140ms ease; } /* ===== Portal Theme (Restricted / Red) ===== Apply by adding class="portal" to . You can combine with other page classes: class="portal links-page" */ body.portal{ --accent: #C44545; --accent-soft: rgba(196,69,69,0.30); --accent-glow: rgba(196,69,69,0.25); } /* ===== Base / Reset ===== */ *{ box-sizing: border-box; } html, body{ height: 100%; } body{ margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.45; } /* ===== Focus (accessible) ===== */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; } /* ===== Motion Discipline (global) ===== */ a, button, .tile, .card, .item, input, textarea, select{ transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast); } /* ===== Links (neutral until interaction) ===== */ a{ color: inherit; text-decoration: none; position: relative; } /* Accent underline only on hover/focus for “texty” links */ a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background: var(--accent); transition: width var(--t-link); } a:hover::after, a:focus-visible::after{ width:100%; } /* Disable underline animation on button-like links */ .tile::after, .backlink::after{ content: none; } /* ===== Shared “glass card” vibe ===== */ .tile, .card, .item, .backlink, .video-wrap{ border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); } /* ===== Accent Signals (controlled color) ===== */ .tile, .card, .item{ position: relative; overflow: hidden; } /* Left “signal” bar: invisible by default, appears on hover/focus */ .tile::before, .card::before, .item::before{ content:""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: transparent; opacity: 0; transition: opacity var(--t-fast), background var(--t-fast); pointer-events: none; } /* ===== Icon System (GLOBAL) ===== - Works everywhere (hub tiles, page titles, cards, items) */ .i{ stroke: var(--muted); fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.88; transition: stroke var(--t-fast), opacity var(--t-fast); } /* Icons respond to parent interaction */ .tile:hover .i, .tile:focus-visible .i, .card:hover .i, .card:focus-within .i, .item:hover .i, .item:focus-within .i{ stroke: var(--accent); opacity: 1; } /* Kicker/meta become the quiet “status light” */ .tile:hover .kicker, .tile:focus-visible .kicker, .card:hover .meta, .card:focus-within .meta, .item:hover .meta, .item:focus-within .meta{ color: rgba(255,255,255,0.72); } /* ===== Central Shell + Panel ===== */ .hub-shell{ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; position: relative; z-index: 1; } .hub-panel{ width: 100%; max-width: var(--maxw); background: rgba(19, 24, 33, 0.85); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03); animation: panelFadeIn 240ms ease-out both; } /* Portal “authority” outline + deeper shadow (subtle) */ body.portal .hub-panel{ box-shadow: 0 0 0 1px var(--accent-soft), 0 12px 34px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03); } @keyframes panelFadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } } /* ===== Top Bar ===== */ .topbar{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 24px; } .brand{ display: grid; gap: 6px; } .brand h1{ margin: 0; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; } .brand .tag, .tag{ font-family: var(--mono); color: var(--muted); font-size: 12px; } /* ===== Hub Tiles ===== */ .hub{ margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; /* FIX: stop grid items stretching to tallest row item */ align-items: start; } /* FIX: stop children stretching in grid rows (hub tiles) */ .hub > *{ align-self: start; } .tile{ padding: 18px; background: transparent; display: grid; gap: 10px; min-height: 120px; } /* Hub “title row” layout (moves out of index.html inline CSS) */ .hub .title{ display: flex; align-items: center; gap: 14px; } /* Hub tile icon calibration (moves out of index.html inline CSS) */ .hub .title .i{ width: 21px; height: 21px; flex: 0 0 auto; stroke-width: 1.7; transform: translateY(0.6px); } /* Restrict accent: show accent only on interaction */ .tile:hover, .tile:focus-visible{ border-color: var(--accent); background: var(--panel); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 8px 22px rgba(0,0,0,0.35); } /* Accent edge becomes visible on interaction */ .tile:hover::before, .tile:focus-visible::before{ background: var(--accent); opacity: 1; } /* Tile typography (hub expects these classes) */ .kicker{ font-family: var(--mono); color: var(--muted); font-size: 12px; letter-spacing: 0.08em; } /* Subtle kicker tint (the “color hint”) */ .tile:hover .kicker, .tile:focus-visible .kicker{ color: rgba(77,163,255,0.72); } body.portal .tile:hover .kicker, body.portal .tile:focus-visible .kicker{ color: rgba(196,69,69,0.72); } .title{ margin: 0; font-size: 18px; } .desc{ margin: 0; color: var(--muted); font-size: 14px; } .footerhint{ margin-top: 18px; font-family: var(--mono); color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: 16px; } /* ===== Quiet context block ===== */ .site-context{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .site-context p{ margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } /* ===== Section Pages ===== */ .section-head{ display: grid; gap: 10px; margin: 18px 0 22px; } .section-head h2{ margin: 0; font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; } .section-head .sub{ margin: 0; color: var(--muted); font-family: var(--mono); font-size: 13px; } .rule{ height: 1px; background: var(--line); width: 100%; } .backlink{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); color: var(--muted); font-size: 13px; border-radius: 999px; padding: 10px 12px; } .backlink:hover, .backlink:focus-visible{ border-color: var(--accent); background: var(--panel); color: var(--text); transform: translateY(-2px); } /* ===== Cards / Lists ===== */ .card{ padding: 16px; background: transparent; display: grid; gap: 10px; } .card:hover{ border-color: var(--accent); background: var(--panel); transform: translateY(-2px); } /* Accent edge on cards */ .card:hover::before, .card:focus-within::before{ background: var(--accent); opacity: 1; } .meta{ font-family: var(--mono); color: var(--muted); font-size: 12px; } .list{ display: grid; gap: 12px; } .item{ padding: 14px 16px; } .item:hover{ border-color: var(--accent); background: var(--panel); transform: translateY(-2px); } /* Accent edge on items */ .item:hover::before, .item:focus-within::before{ background: var(--accent); opacity: 1; } /* Portal: cards/items feel more “contained” */ body.portal .card, body.portal .item{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 0 0 1px var(--accent-soft); } /* === Active / Current Employer Highlight === */ .item.active{ border-color: var(--accent); background: var(--panel); box-shadow: inset 0 0 0 1px var(--accent-soft), 0 10px 28px rgba(0,0,0,0.35); } /* ===== LINKS PAGE: name big, note small ===== */ body.links-page .item .name{ font-family: var(--sans); font-size: 1.15rem; font-weight: 650; letter-spacing: 0; line-height: 1.25; margin: 0; } body.links-page .item .note{ font-family: var(--mono); font-size: 0.90rem; font-weight: 400; color: var(--muted); line-height: 1.35; margin-top: 6px; } /* Safe fallback */ body.links-page .item.active .note::after{ content: ""; } /* ===== Grid (global default) ===== */ .grid{ display: grid; gap: 14px; grid-template-columns: 1fr; /* FIX: stop grid items stretching to tallest row item */ align-items: start; } /* FIX: stop children stretching in grid rows (cards/tiles/etc.) */ .grid > *{ align-self: start; } @media (min-width: 721px){ .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px){ .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ===== Gallery (photos page and any gallery grids) ===== This fixes “portrait makes neighbors tall” behavior globally. */ .gallery{ display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); /* FIX: stop grid rows equalizing height */ align-items: start; } /* FIX: gallery items never stretch */ .gallery > *{ align-self: start; } /* NOTE: layout columns are usually handled in page CSS, but these defaults are safe if you remove inline layout later. */ .gallery > .tile{ grid-column: span 4; } @media (max-width: 980px){ .gallery > .tile{ grid-column: span 6; } } @media (max-width: 620px){ .gallery > .tile{ grid-column: span 12; } } /* ===== LINKS PAGE ONLY: override inline grid-column so cards flow into columns ===== */ body.links-page .grid > .card{ grid-column: auto !important; } body.links-page .grid > .card.full{ grid-column: 1 / -1 !important; } /* ===== CONTACT PAGE: avoid skinny single-card layout ===== */ body.contact-page .grid{ grid-template-columns: 1fr !important; } body.contact-page .grid > .card{ width: min(720px, 100%); margin-inline: auto; } /* ===== Video ===== */ .video-wrap{ overflow: hidden; background: #0b0e12; aspect-ratio: 16 / 9; } .video-wrap video{ display: block; width: 100%; height: 100% !important; object-fit: cover; background: #000; } .caption{ margin-top: 10px; font-family: var(--mono); color: var(--muted); font-size: 12px; } /* ===== Form controls (dark theme) ===== */ input, textarea, select{ width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); font-family: var(--sans); } textarea{ resize: vertical; } input:hover, textarea:hover, select:hover{ background: rgba(19,24,33,0.35); } input:focus-visible, textarea:focus-visible, select:focus-visible{ border-color: var(--accent); background: rgba(19,24,33,0.55); } /* Portal refinement: controlled glow on focus */ body.portal input:focus-visible, body.portal textarea:focus-visible, body.portal select:focus-visible{ box-shadow: 0 0 0 2px var(--accent-glow); } /* ===== Buttons ===== */ button{ width: 100%; cursor: pointer; background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); font-family: var(--mono); letter-spacing: 0.10em; -webkit-appearance: none; appearance: none; } button:hover, button:focus-visible{ border-color: var(--accent); background: var(--panel); transform: translateY(-2px); } /* Portal refinement: “commit” button feel (only for explicit .portal-btn) */ .portal-btn{ background: transparent; } body.portal button.portal-btn{ background: linear-gradient(180deg, rgba(196,69,69,0.95), rgba(158,52,52,0.95)); border-color: rgba(196,69,69,0.55); color: #07090c; box-shadow: 0 10px 26px rgba(0,0,0,0.35); } body.portal button.portal-btn:hover, body.portal button.portal-btn:focus-visible{ filter: brightness(1.05); } /* ===== Space background ===== */ #starfield{ position: fixed; inset: 0; z-index: -2; pointer-events: none; } body::before{ content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 600px at 20% 30%, rgba(77,163,255,0.10), transparent 60%), radial-gradient(700px 500px at 80% 70%, rgba(120,90,255,0.08), transparent 60%); } body.portal::before{ background: radial-gradient(900px 600px at 20% 30%, rgba(196,69,69,0.11), transparent 60%), radial-gradient(700px 500px at 80% 70%, rgba(120,90,255,0.05), transparent 60%); } /* ===== Page H1 icon (section pages) ===== */ .page-title{ display: flex; align-items: center; gap: 14px; } .page-title .i{ width: 26px; height: 26px; flex: 0 0 auto; stroke-width: 1.8; opacity: 0.9; transform: translateY(1px); } /* ===== Hidden Portal Link (SAFE) ===== */ .portal-dot{ position: fixed; right: 14px; bottom: 14px; width: 10px; height: 10px; border-radius: 999px; background: var(--text); opacity: 0.04; z-index: 10; } .portal-dot:hover, .portal-dot:focus-visible{ opacity: 0.35; } /* ===== Responsive ===== */ @media (max-width: 720px){ .hub{ grid-template-columns: 1fr; } .hub-panel{ padding: 22px 18px; } .topbar{ flex-direction: column; align-items: flex-start; } } /* Mobile stability: starfield can be surprisingly expensive on some phones */ @media (max-width: 720px){ #starfield{ display:none; } } /* ===== Desktop polish ===== */ @media (min-width: 900px){ .hub-shell{ padding: 70px 18px; } .tile:hover, .tile:focus-visible{ box-shadow: 0 0 0 1px var(--accent-soft), 0 12px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03); } .card:hover, .item:hover{ box-shadow: 0 0 0 1px var(--accent-soft), 0 12px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03); } }