/* =================================================================== design.css — site-wide design system Unified tokens, shadow-first visual language, hierarchy utilities, timeline spine, photo crop variants, full-bleed sections. Load AFTER styles.css / plant-page.css so utility classes can win. =================================================================== */ :root { /* Brand */ --brand-leaf: #7ab362; --brand-bloom: #e0667e; --brand-gold: #e8c57a; --brand-bark: #5c4132; --brand-slate: #4a6274; /* Surface */ --surf-0: #12100e; --surf-1: #1d1811; --surf-2: #28211a; --surf-3: #34291f; /* Ink */ --ink-hi: #f4ecdf; --ink-mid: #d7c9b3; --ink-lo: #8d7f6d; /* Shadows — single soft layer, no stacking */ --shadow-sm: 0 2px 10px rgba(0,0,0,0.22); --shadow-md: 0 14px 32px rgba(0,0,0,0.28); --shadow-lg: 0 28px 60px rgba(0,0,0,0.38); /* Radius */ --r-sm: 10px; --r-md: 18px; --r-lg: 24px; --r-xl: 34px; /* Spacing */ --sp-1: 8px; --sp-2: 14px; --sp-3: 22px; --sp-4: 36px; --sp-5: 58px; --sp-6: 94px; /* Easing */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); } /* -------------------------------------------------------------- Light theme — warm paper, not stark white. Activated by . Toggle lives in the nav. -------------------------------------------------------------- */ :root[data-theme="light"] { --surf-0: #f6efdf; --surf-1: #eee3cc; --surf-2: #e4d7bb; --surf-3: #d9c9a8; --ink-hi: #2a1f14; --ink-mid: #5a4a34; --ink-lo: #8a7a62; --brand-bark: #6b4a2f; --shadow-sm: 0 2px 8px rgba(80,55,30,0.10); --shadow-md: 0 12px 28px rgba(80,55,30,0.14); --shadow-lg: 0 24px 52px rgba(80,55,30,0.20); } :root[data-theme="light"] body { background: radial-gradient(circle at top, #f9f3e4 0%, #eee3cc 55%, #dfd0b0 100%) !important; color: var(--ink-hi) !important; } :root[data-theme="light"] header#site-nav { background: rgba(246,239,223,0.85); border-bottom: 1px solid rgba(107,74,47,0.18); } :root[data-theme="light"] header#site-nav .links a { color: var(--ink-mid); } :root[data-theme="light"] header#site-nav .links a:hover, :root[data-theme="light"] header#site-nav .links a[aria-current="page"] { background: rgba(107,74,47,0.10); color: var(--brand-bark); } :root[data-theme="light"] .tile, :root[data-theme="light"] .feature, :root[data-theme="light"] .surface { background: rgba(255,251,240,0.85); color: var(--ink-hi); } :root[data-theme="light"] .tile p, :root[data-theme="light"] .feature p { color: var(--ink-mid); } :root[data-theme="light"] .pullquote { color: var(--ink-hi); } :root[data-theme="light"] .pullquote em { color: var(--brand-bark); } :root[data-theme="light"] .archive { background: rgba(255,251,240,0.5); color: var(--ink-mid); } :root[data-theme="light"] .archive:hover { background: rgba(255,251,240,0.9); color: var(--ink-hi); } :root[data-theme="light"] .hero-editorial { background: radial-gradient(ellipse at 85% -10%, rgba(224,102,126,0.12), transparent 55%), radial-gradient(ellipse at 0% 110%, rgba(122,179,98,0.18), transparent 50%), linear-gradient(160deg, #f9f3e4, #eee3cc 60%, #e4d7bb); } :root[data-theme="light"] .hero-editorial h1 { background: linear-gradient(110deg, var(--brand-bark) 0%, #c47a4f 55%, #d44e7a 100%); -webkit-background-clip: text; background-clip: text; } :root[data-theme="light"] .hero-editorial .lede, :root[data-theme="light"] .section-head .section-sub { color: var(--ink-mid); } /* Theme toggle chip */ .theme-toggle { background: none; border: 1px solid rgba(232,197,122,0.3); color: var(--ink-mid); padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; margin-left: 8px; } .theme-toggle:hover { background: rgba(232,197,122,0.12); color: var(--brand-gold); } :root[data-theme="light"] .theme-toggle { border-color: rgba(107,74,47,0.3); color: var(--ink-mid); } :root[data-theme="light"] .theme-toggle:hover { background: rgba(107,74,47,0.1); color: var(--brand-bark); } /* -------------------------------------------------------------- Brand mark — inline SVG monogram rendered by nav.js -------------------------------------------------------------- */ .brand-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 600; letter-spacing: 0.02em; } .brand-mark svg { width: 28px; height: 28px; display: block; filter: drop-shadow(0 2px 6px rgba(232,197,122,0.25)); } .brand-mark .brand-text { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 16px; letter-spacing: 0.01em; } /* -------------------------------------------------------------- Nav (shared — replaces per-page nav styling when present) -------------------------------------------------------------- */ header#site-nav > nav { display: flex; align-items: center; justify-content: center; max-width: 1440px; margin: 0 auto; padding: 10px clamp(10px, 1.6vw, 18px); gap: 10px; } header#site-nav .links { display: flex; flex: 1 1 auto; flex-wrap: nowrap; justify-content: center; gap: 6px; min-width: 0; } header#site-nav .links a { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 9px; border: 1px solid rgba(232,197,122,0.2); border-radius: 8px; background: rgba(255,255,255,0.045); box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 8px 18px rgba(0,0,0,0.12); font-size: 11.5px; font-weight: 650; line-height: 1.1; color: var(--ink-mid); text-decoration: none; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease; } header#site-nav .links a:hover, header#site-nav .links a[aria-current="page"] { background: rgba(232,197,122,0.14); border-color: rgba(232,197,122,0.42); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 24px rgba(0,0,0,0.18); color: var(--brand-gold); text-decoration: none; } header#site-nav .links a:hover { transform: translateY(-1px); } @media (max-width: 720px) { header#site-nav > nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } header#site-nav .brand-mark { min-width: 0; order: 1; } header#site-nav .theme-toggle { justify-self: end; margin-left: 0; order: 2; } header#site-nav .links { grid-column: 1 / -1; order: 3; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: thin; } } /* -------------------------------------------------------------- Hierarchy utilities — card sizes -------------------------------------------------------------- */ .card-lg { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); } .card-md { padding: 22px; border-radius: var(--r-lg); box-shadow: var(--shadow-md); } .card-sm { padding: 16px; border-radius: var(--r-md); box-shadow: var(--shadow-sm); } /* Shadow-first surface (preferred over bordered) */ .surface { background: linear-gradient(180deg, var(--surf-2), var(--surf-1)); border: none; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.03); } .surface-soft { background: rgba(40,33,26,0.55); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: none; box-shadow: var(--shadow-md); } /* Hero — editorial full-width */ .hero-editorial { position: relative; padding: clamp(40px, 7vw, 92px) clamp(24px, 4vw, 56px); border-radius: var(--r-xl); background: radial-gradient(ellipse at 85% -10%, rgba(232,197,122,0.22), transparent 55%), radial-gradient(ellipse at 0% 110%, rgba(122,179,98,0.20), transparent 50%), linear-gradient(160deg, var(--surf-3), var(--surf-1) 60%, var(--surf-0)); box-shadow: var(--shadow-lg); overflow: hidden; } .hero-editorial h1 { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; margin: 6px 0 14px; background: linear-gradient(110deg, #fff 0%, var(--brand-gold) 55%, var(--brand-bloom) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% auto; animation: hero-shine 16s linear infinite; } @keyframes hero-shine { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } } .hero-editorial .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-gold); font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; } .hero-editorial .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brand-gold); } .hero-editorial .lede { max-width: 640px; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink-mid); line-height: 1.6; } /* Pull quote / breathing spot */ .pullquote { padding: clamp(36px, 6vw, 72px) clamp(22px, 4vw, 44px); text-align: center; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.35; color: var(--ink-hi); letter-spacing: -0.005em; } .pullquote::before, .pullquote::after { content: ""; display: block; width: 44px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-leaf), var(--brand-gold)); margin: 10px auto; } .pullquote em { color: var(--brand-gold); font-style: normal; } /* Full-bleed photo strip */ .photostrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: var(--sp-4) 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); } .photostrip img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 1s var(--ease-out), filter 0.5s ease; } .photostrip img:hover { transform: scale(1.03); filter: saturate(1.1); } @media (max-width: 760px) { .photostrip { grid-template-columns: repeat(2, 1fr); } } /* Photo aspect variants */ .photo-landscape { aspect-ratio: 16/10 !important; } .photo-portrait { aspect-ratio: 3/4 !important; } .photo-square { aspect-ratio: 1/1 !important; } .photo-wide { aspect-ratio: 21/9 !important; } /* -------------------------------------------------------------- Timeline spine — for plant sub-page .timeline-stack -------------------------------------------------------------- */ .timeline-stack { position: relative; padding-left: clamp(30px, 4vw, 46px); } .timeline-stack::before { content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, transparent 0%, var(--brand-leaf) 12%, var(--brand-gold) 88%, transparent 100%); border-radius: 2px; opacity: 0.55; } .timeline-stack > .timeline-entry, .timeline-stack > article { position: relative; } .timeline-stack > .timeline-entry::before, .timeline-stack > article::before { content: ""; position: absolute; left: -36px; top: 28px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-leaf); box-shadow: 0 0 0 3px var(--surf-1), 0 0 16px rgba(122,179,98,0.45); z-index: 2; } .timeline-stack > .timeline-entry:nth-child(even)::before, .timeline-stack > article:nth-child(even)::before { background: var(--brand-gold); box-shadow: 0 0 0 3px var(--surf-1), 0 0 16px rgba(232,197,122,0.45); } @media (max-width: 600px) { .timeline-stack { padding-left: 26px; } .timeline-stack::before { left: 8px; } .timeline-stack > .timeline-entry::before, .timeline-stack > article::before { left: -24px; top: 22px; width: 10px; height: 10px; } } /* -------------------------------------------------------------- Card hierarchy for landing grids -------------------------------------------------------------- */ .stack-lg { display: grid; gap: clamp(18px, 3vw, 32px); } .stack-md { display: grid; gap: 18px; } .row-2 { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } .row-3 { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 820px) { .row-2, .row-3 { grid-template-columns: 1fr; } } /* Feature card — big, photo-led */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surf-2); box-shadow: var(--shadow-md); text-decoration: none; color: inherit; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); position: relative; } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; } .feature .feature-media { min-height: 260px; background-size: cover; background-position: center; transition: transform 0.9s var(--ease-out); } .feature:hover .feature-media { transform: scale(1.05); } .feature .feature-copy { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; justify-content: center; gap: 8px; } .feature .eyebrow { color: var(--brand-gold); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; } .feature h3 { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.8rem); letter-spacing: -0.01em; margin: 0; line-height: 1.15; } .feature p { color: var(--ink-mid); margin: 0; line-height: 1.55; } @media (max-width: 720px) { .feature { grid-template-columns: 1fr; } .feature .feature-media { min-height: 200px; } } /* Standard card — smaller, stacked grid */ .tile { padding: 22px; border-radius: var(--r-md); background: var(--surf-2); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); display: flex; flex-direction: column; gap: 8px; } .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; } .tile h3 { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-weight: 500; font-size: 1.15rem; margin: 0; letter-spacing: -0.005em; } .tile p { color: var(--ink-mid); margin: 0; font-size: 14px; line-height: 1.55; } /* Archive card — minimal */ .archive { padding: 14px 16px; border-radius: var(--r-sm); background: rgba(40,33,26,0.4); color: var(--ink-mid); font-size: 13px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .archive:hover { background: rgba(40,33,26,0.7); color: var(--ink-hi); text-decoration: none; } .archive::after { content: "→"; color: var(--brand-gold); } /* Section header */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: clamp(28px, 4vw, 48px) 0 16px; } .section-head h2 { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.01em; margin: 0; } .section-head .section-sub { color: var(--ink-lo); font-size: 13px; letter-spacing: 0.02em; } /* -------------------------------------------------------------- Modular workbench homepage — bento-style hub layout -------------------------------------------------------------- */ .workbench-home { max-width: 1240px !important; } .workbench-home .eyebrow, .workbench-home .module-kicker { color: var(--brand-gold); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .workbench-hero { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.7fr); gap: 18px; margin-top: 8px; } .hub-panel, .module-card, .dock-panel, .workbench-note { position: relative; overflow: hidden; border: 1px solid rgba(232,197,122,0.13); background: linear-gradient(145deg, rgba(52,41,31,0.88), rgba(29,24,17,0.92)), var(--surf-2); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.04); } .hub-panel::before, .module-card::before, .dock-panel::before, .workbench-note::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(135deg, rgba(0,0,0,0.75), transparent 72%); } .hub-intro { min-height: 420px; padding: clamp(34px, 6vw, 76px); border-radius: var(--r-xl); display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 18% 18%, rgba(122,179,98,0.24), transparent 34%), radial-gradient(circle at 82% 20%, rgba(232,197,122,0.18), transparent 35%), radial-gradient(circle at 84% 88%, rgba(224,102,126,0.14), transparent 34%), linear-gradient(145deg, #34291f, #15110d 72%); } .hub-intro h1 { max-width: 860px; margin: 12px 0 16px; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: clamp(2.45rem, 6vw, 5.2rem); font-weight: 550; line-height: 0.98; letter-spacing: -0.045em; color: var(--ink-hi); } .hub-intro .lede { max-width: 720px; margin: 0; color: var(--ink-mid); font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.65; } .hub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .hub-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(232,197,122,0.2); background: rgba(255,255,255,0.055); color: var(--ink-hi); font-weight: 650; font-size: 13px; text-decoration: none; } .hub-button.primary { color: #21180e; background: linear-gradient(120deg, var(--brand-gold), #e89a7a 58%, var(--brand-bloom)); border-color: transparent; } .hub-button:hover { text-decoration: none; transform: translateY(-1px); } .hub-status { border-radius: var(--r-xl); padding: 24px; display: grid; align-content: end; gap: 12px; } .status-line { padding: 14px 0; border-bottom: 1px solid rgba(232,197,122,0.12); } .status-line:last-child { border-bottom: 0; } .status-line span { display: block; color: var(--ink-lo); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 5px; } .status-line strong { display: block; color: var(--ink-hi); font-size: 14px; line-height: 1.35; } .module-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 18px; margin-top: 18px; } .module-card { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 24px; min-height: 220px; border-radius: var(--r-lg); color: inherit; text-decoration: none; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s ease; } .module-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(232,197,122,0.28); text-decoration: none; } .module-card h2, .dock-panel h2 { margin: 0; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: clamp(1.35rem, 2.4vw, 2.25rem); font-weight: 540; letter-spacing: -0.025em; line-height: 1.05; } .module-card p, .dock-panel p, .workbench-note p { margin: 0; color: var(--ink-mid); line-height: 1.55; font-size: 14px; } .module-large { grid-column: span 2; grid-row: span 2; min-height: 460px; padding: 0; justify-content: stretch; } .module-large .module-image { flex: 1 1 auto; min-height: 250px; background-size: cover; background-position: center; filter: saturate(1.05) contrast(1.02); } .module-large .module-copy { padding: 26px; background: linear-gradient(180deg, rgba(18,16,14,0.84), rgba(18,16,14,0.98)); } .calendar-module { background: radial-gradient(circle at 100% 0%, rgba(122,179,98,0.28), transparent 48%), linear-gradient(145deg, rgba(44,59,37,0.95), rgba(25,24,18,0.95)); } .news-module { background: radial-gradient(circle at 0% 0%, rgba(79,140,255,0.28), transparent 48%), linear-gradient(145deg, rgba(27,38,58,0.95), rgba(20,18,22,0.95)); } .photos-module { background: radial-gradient(circle at 100% 100%, rgba(224,102,126,0.24), transparent 50%), linear-gradient(145deg, rgba(61,36,42,0.96), rgba(26,20,18,0.96)); } .games-module { background: radial-gradient(circle at 80% 10%, rgba(232,197,122,0.25), transparent 48%), linear-gradient(145deg, rgba(61,50,30,0.96), rgba(24,20,18,0.96)); } .workbench-note { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 18px; padding: 22px 24px; border-radius: var(--r-lg); } .workbench-note span { color: var(--brand-gold); font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .tool-dock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } .dock-panel { padding: 24px; border-radius: var(--r-lg); } .dock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .workbench-home .item { border-color: rgba(232,197,122,0.12); background: rgba(255,255,255,0.045); } .workbench-home .item-title { color: var(--ink-hi); } .workbench-home .muted { color: var(--ink-mid); } .module-board-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .module-board-secondary .module-card { min-height: 190px; } .ai-panel h3 { margin: 8px 0 10px; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 1.45rem; font-weight: 540; } :root[data-theme="light"] .hub-panel, :root[data-theme="light"] .module-card, :root[data-theme="light"] .dock-panel, :root[data-theme="light"] .workbench-note { background: linear-gradient(145deg, rgba(255,251,240,0.9), rgba(238,227,204,0.9)), var(--surf-1); border-color: rgba(107,74,47,0.14); } :root[data-theme="light"] .hub-intro { background: radial-gradient(circle at 18% 18%, rgba(122,179,98,0.18), transparent 34%), radial-gradient(circle at 82% 20%, rgba(232,197,122,0.24), transparent 35%), radial-gradient(circle at 84% 88%, rgba(224,102,126,0.14), transparent 34%), linear-gradient(145deg, #fff8e8, #e8d9ba 72%); } :root[data-theme="light"] .hub-intro h1, :root[data-theme="light"] .module-card h2, :root[data-theme="light"] .dock-panel h2, :root[data-theme="light"] .status-line strong { color: var(--ink-hi); } :root[data-theme="light"] .module-card p, :root[data-theme="light"] .dock-panel p, :root[data-theme="light"] .workbench-note p, :root[data-theme="light"] .hub-intro .lede { color: var(--ink-mid); } @media (max-width: 980px) { .workbench-hero, .tool-dock { grid-template-columns: 1fr; } .module-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .module-large { grid-column: span 2; } } @media (max-width: 640px) { .workbench-home { padding-inline: 14px !important; } .hub-intro { min-height: 360px; padding: 28px; } .module-board, .module-board-secondary { grid-template-columns: 1fr; } .module-large { grid-column: span 1; grid-row: span 1; min-height: 0; } .module-large .module-image { min-height: 210px; } .workbench-note { grid-template-columns: 1fr; } .dock-head { display: block; } .dock-head h2 { margin-top: 6px; } } /* -------------------------------------------------------------- Screenshot-matched desktop workbench hub -------------------------------------------------------------- */ .home-hidden-nav { display: none !important; } .workbench-home { position: relative; z-index: 1; max-width: 1480px !important; padding: 26px clamp(16px, 3vw, 42px) 70px !important; } body.home-page { background: radial-gradient(ellipse at 0% 54%, rgba(76,211,255,0.28), transparent 34%), radial-gradient(ellipse at 100% 54%, rgba(40,153,255,0.26), transparent 36%), linear-gradient(180deg, #020711, #061833 62%, #020711) !important; } body.home-page::before { content: ""; position: fixed; inset: -8vh -18vw -14vh; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(2,7,17,0.82), rgba(2,7,17,0.02) 17%, rgba(2,7,17,0.0) 84%, rgba(2,7,17,0.82)), linear-gradient(180deg, rgba(2,7,17,0.62), rgba(2,7,17,0.02) 24%, rgba(2,7,17,0.18) 70%, rgba(2,7,17,0.84)), url("galaxy-home-20260530.webp") center 42% / cover no-repeat; opacity: 0.96; filter: saturate(1.28) contrast(1.08); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); animation: galaxy-drift 28s ease-in-out infinite alternate; } body.home-page::after { content: ""; position: fixed; inset: -38vmax -42vmax; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(1,4,12,0.52), rgba(1,4,12,0.0) 17%, rgba(1,4,12,0.0) 83%, rgba(1,4,12,0.52)), radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.08), transparent 34%), url("galaxy-home-20260530.webp") center 50% / cover no-repeat; opacity: 0.3; filter: saturate(1.22) contrast(1.06) blur(0.4px); mix-blend-mode: screen; transform-origin: 50% 50%; animation: galaxy-slow-turn 210s linear infinite; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 43%, rgba(0,0,0,0.72) 58%, transparent 83%); mask-image: radial-gradient(ellipse at 50% 50%, #000 0 43%, rgba(0,0,0,0.72) 58%, transparent 83%); } .desktop-hub { position: relative; isolation: isolate; display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 52px); border: 1px solid rgba(55, 111, 215, 0.44); border-radius: 18px; overflow: visible; background: rgba(2, 8, 19, 0.58); box-shadow: 0 32px 90px rgba(0,0,0,0.62), inset 0 1px 0 rgba(91,154,255,0.12); } .desktop-hub::before { content: ""; position: absolute; inset: -12vh -22vw -16vh; z-index: -2; background: linear-gradient(90deg, rgba(2,7,17,0.8), rgba(2,7,17,0.0) 16%, rgba(2,7,17,0.0) 84%, rgba(2,7,17,0.8)), linear-gradient(180deg, rgba(2,7,17,0.76), rgba(2,7,17,0.0) 24%, rgba(2,7,17,0.18) 72%, rgba(2,7,17,0.86)), url("galaxy-home-20260530.webp") center 42% / cover no-repeat; opacity: 0.96; filter: saturate(1.28) contrast(1.08); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); animation: galaxy-drift 28s ease-in-out infinite alternate; } .galaxy-backdrop { position: absolute; inset: -10vh -18vw -14vh; z-index: 0; overflow: hidden; background: linear-gradient(90deg, rgba(1,4,12,0.68), rgba(1,4,12,0.0) 13%, rgba(1,4,12,0.0) 87%, rgba(1,4,12,0.68)), linear-gradient(180deg, rgba(1,4,12,0.78), rgba(1,4,12,0.02) 22%, rgba(1,4,12,0.1) 68%, rgba(1,4,12,0.82)), url("galaxy-home-20260530.webp") center 43% / cover no-repeat; filter: saturate(1.36) contrast(1.08); transform: translateZ(0); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 89%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 89%, transparent); mask-composite: intersect; } .galaxy-backdrop::before, .galaxy-backdrop::after, .galaxy-backdrop span { content: ""; position: absolute; display: block; pointer-events: none; } .galaxy-backdrop::before { inset: 0; background: radial-gradient(ellipse at 32% 47%, rgba(247,252,255,0.38), transparent 18%), radial-gradient(ellipse at 43% 51%, rgba(95,210,255,0.24), transparent 38%), radial-gradient(ellipse at 70% 67%, rgba(41,221,255,0.18), transparent 25%); filter: blur(2px) saturate(1.24); opacity: 0.9; mix-blend-mode: screen; animation: galaxy-drift 30s ease-in-out infinite alternate; } .galaxy-backdrop::after { inset: 0; z-index: 5; background: radial-gradient(ellipse at 31% 46%, transparent 0 40%, rgba(1,5,14,0.1) 64%, rgba(1,5,14,0.58) 94%), linear-gradient(180deg, rgba(1,5,14,0.22), rgba(1,5,14,0.0) 38%, rgba(1,5,14,0.52)); } .galaxy-spiral { display: block !important; inset: -34vmax -38vmax; z-index: 2; background: linear-gradient(90deg, rgba(1,4,12,0.54), rgba(1,4,12,0.0) 17%, rgba(1,4,12,0.0) 83%, rgba(1,4,12,0.54)), radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.08), transparent 34%), url("galaxy-home-20260530.webp") center 50% / cover no-repeat; opacity: 0.32; filter: saturate(1.22) contrast(1.06) blur(0.4px); mix-blend-mode: screen; transform-origin: 50% 50%; animation: galaxy-slow-turn 210s linear infinite; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 43%, rgba(0,0,0,0.72) 58%, transparent 83%); mask-image: radial-gradient(ellipse at 50% 50%, #000 0 43%, rgba(0,0,0,0.72) 58%, transparent 83%); } .galaxy-spiral::before { content: none; } .galaxy-dust { inset: 0; z-index: 3; background: radial-gradient(ellipse at 17% 78%, rgba(72,221,255,0.18), transparent 27%), radial-gradient(ellipse at 83% 18%, rgba(61,143,255,0.2), transparent 28%), radial-gradient(circle at 76% 72%, rgba(124,250,255,0.12), transparent 23%); filter: blur(11px); opacity: 0.78; animation: galaxy-dust-orbit 42s ease-in-out infinite alternate; } .galaxy-stars { display: none !important; inset: 0; z-index: 4; background-repeat: repeat; opacity: 0.8; } .galaxy-stars-a { background-image: radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(112,226,255,0.8) 0 1px, transparent 1.7px), radial-gradient(circle, rgba(255,255,255,0.72) 0 1.4px, transparent 2px); background-size: 42px 31px, 67px 49px, 113px 83px; background-position: 14px 8px, 38px 25px; animation: galaxy-star-slide 38s linear infinite; } .galaxy-stars-b { background-image: radial-gradient(circle, rgba(255,255,255,0.66) 0 0.8px, transparent 1.5px), radial-gradient(circle, rgba(105,184,255,0.56) 0 1.1px, transparent 1.8px); background-size: 27px 33px, 93px 71px; background-position: 66px 31px, 20px 57px; filter: blur(0.25px); opacity: 0.88; animation: galaxy-star-slide 72s linear infinite reverse; } .galaxy-backdrop + .hub-sidebar, .galaxy-backdrop ~ .hub-main { position: relative; z-index: 1; } .hub-sidebar { display: flex; flex-direction: column; gap: 18px; padding: 28px 18px; border-radius: 18px 0 0 18px; overflow: hidden; background: radial-gradient(circle at 65% 0%, rgba(18,98,223,0.26), transparent 44%), linear-gradient(180deg, rgba(4,16,34,0.76), rgba(2,9,20,0.82)); border-right: 1px solid rgba(53,112,219,0.28); backdrop-filter: blur(14px) saturate(1.12); -webkit-backdrop-filter: blur(14px) saturate(1.12); } .hub-brand { display: grid; gap: 7px; color: #f4ecdf; text-decoration: none; } .hub-brand strong { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 38px; font-weight: 560; letter-spacing: -0.04em; } .hub-brand span, .sidebar-note { color: #ffffff; font-size: 13px; line-height: 1.45; } .sidebar-note { color: #ffffff; } .sidebar-note { margin: -6px 0 0; max-width: 180px; } .side-nav { display: grid; gap: 13px; align-items: stretch; justify-content: stretch; width: 100%; max-width: none; margin: 4px 0 0; padding: 0; } .side-nav-section { display: grid; gap: 6px; --nav-accent: 41, 201, 255; --nav-accent-2: 28, 116, 241; } .side-nav-heading { display: flex; align-items: center; gap: 7px; min-height: 18px; padding: 0 8px; color: rgba(var(--nav-accent), 0.95); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; } .side-nav-heading::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--nav-accent)); box-shadow: 0 0 12px rgba(var(--nav-accent), 0.62); } .side-nav-section--home { --nav-accent: 41, 201, 255; --nav-accent-2: 28, 116, 241; } .side-nav-section--garden { --nav-accent: 141, 241, 79; --nav-accent-2: 57, 145, 79; } .side-nav-section--media { --nav-accent: 183, 124, 255; --nav-accent-2: 95, 88, 222; } .side-nav-section--projects { --nav-accent: 255, 195, 77; --nav-accent-2: 217, 126, 48; } .side-nav-section--archive { --nav-accent: 148, 181, 211; --nav-accent-2: 82, 116, 154; } .side-nav-section--garden .side-nav-heading { color: #aaf782; } .side-nav-section--projects .side-nav-heading { color: #ffd37c; } .side-nav-section--archive .side-nav-heading { color: #c4d7ea; } .side-nav-section + .side-nav-section { padding-top: 5px; border-top: 1px solid rgba(var(--nav-accent), 0.15); } .side-nav-section--media + .side-nav-section--projects, .side-nav-section--projects + .side-nav-section--archive { border-top-color: rgba(var(--nav-accent), 0.18); } .desktop-hub .side-nav a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 12px; border: 1px solid rgba(var(--nav-accent), 0.34); border-radius: 9px; background: radial-gradient(circle at 7% 50%, rgba(var(--nav-accent), 0.18), transparent 42%), linear-gradient(180deg, rgba(var(--nav-accent-2), 0.34), rgba(7,24,56,0.72)); color: #ffffff !important; font-size: 13px; font-weight: 650; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 18px rgba(0,0,0,0.16); transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } .desktop-hub .side-nav a:hover, .desktop-hub .side-nav a.active { background: radial-gradient(circle at 18% 0%, rgba(var(--nav-accent), 0.48), transparent 46%), linear-gradient(180deg, rgba(var(--nav-accent-2), 0.96), rgba(8,66,174,0.9)); border-color: rgba(var(--nav-accent), 0.76); color: #ffffff !important; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 0 0 1px rgba(var(--nav-accent), 0.16), 0 12px 26px rgba(var(--nav-accent-2), 0.32); } .desktop-hub .side-nav a:hover { transform: translateX(2px); } .desktop-hub .side-nav a.active { color: #ffffff !important; text-shadow: 0 1px 10px rgba(255,255,255,0.24); } .side-nav-icon { flex: 0 0 auto; width: 20px; height: 20px; color: #dceeff; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(39,196,255,0.18)); } .desktop-hub .side-nav a:hover .side-nav-icon, .desktop-hub .side-nav a.active .side-nav-icon { color: #ffffff; filter: drop-shadow(0 0 9px rgba(72,224,255,0.48)); } .desktop-hub .side-nav a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffffff !important; } .side-controls { margin-top: auto; display: flex; gap: 18px; color: #ffffff; padding: 0 12px 6px; } .hub-main { padding: 34px 30px 34px; background: radial-gradient(circle at 72% 0%, rgba(27,106,255,0.08), transparent 46%), radial-gradient(circle at 96% 42%, rgba(23,202,255,0.06), transparent 34%), linear-gradient(180deg, rgba(3,10,22,0.16), rgba(5,16,32,0.2)); backdrop-filter: saturate(1.08); -webkit-backdrop-filter: saturate(1.08); } .hub-topbar { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; padding: 20px 22px; border: 1px solid rgba(65,127,232,0.48); border-radius: 16px; background: radial-gradient(circle at 80% 55%, rgba(30,150,255,0.32) 0 1px, transparent 2px), radial-gradient(circle at 42% 18%, rgba(91,169,255,0.42) 0 1px, transparent 2px), radial-gradient(circle at 92% 20%, rgba(195,233,255,0.75) 0 1px, transparent 2px), radial-gradient(circle at 66% 70%, rgba(109,192,255,0.45) 0 1px, transparent 2px), radial-gradient(ellipse at 88% 48%, rgba(31,133,255,0.38), transparent 32%), linear-gradient(145deg, rgba(4,22,48,0.58), rgba(2,10,24,0.7)); background-size: auto, auto, auto, auto, auto, auto; backdrop-filter: blur(16px) saturate(1.16); -webkit-backdrop-filter: blur(16px) saturate(1.16); box-shadow: inset 0 1px 0 rgba(128,183,255,0.12), -7px 8px 0 rgba(0,0,0,0.52), 0 18px 44px rgba(0,0,0,0.34); } .hub-topbar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(92deg, transparent 0 43%, rgba(37,122,255,0.18) 43.2%, transparent 44.5%), linear-gradient(112deg, transparent 0 57%, rgba(41,201,255,0.13) 57.2%, transparent 58.2%), linear-gradient(154deg, transparent 0 69%, rgba(62,121,222,0.14) 69.2%, transparent 70%), linear-gradient(0deg, rgba(62,121,222,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(62,121,222,0.07) 1px, transparent 1px); background-size: auto, auto, auto, 64px 64px, 64px 64px; opacity: 0.72; pointer-events: none; } .hub-topbar::after { content: ""; position: absolute; right: -5%; top: 16%; width: 52%; height: 70%; background: radial-gradient(ellipse at 52% 50%, rgba(52,162,255,0.9), rgba(52,162,255,0.28) 2%, transparent 5%), repeating-radial-gradient(ellipse at 52% 50%, transparent 0 17px, rgba(59,152,255,0.12) 18px 19px, transparent 20px 34px); filter: blur(0.2px); transform: rotate(-8deg); opacity: 0.82; pointer-events: none; } .hub-topbar > * { position: relative; z-index: 1; } .home-title-lockup { max-width: 760px; } .home-kicker { display: inline-flex; margin-bottom: 7px; color: #2fc7ff; font-size: 11px; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; } .home-kicker::before { content: ""; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; align-self: center; background: #2fc7ff; animation: home-beacon 2.4s ease-out infinite; } @keyframes home-beacon { 0% { box-shadow: 0 0 6px rgba(47,199,255,0.9), 0 0 0 0 rgba(47,199,255,0.45); } 70%, 100% { box-shadow: 0 0 6px rgba(47,199,255,0.55), 0 0 0 10px rgba(47,199,255,0); } } .hub-topbar h1 { margin: 0 0 6px; color: #fff7e8; font-size: clamp(2.25rem, 5vw, 4.65rem); font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-weight: 760; line-height: 0.9; letter-spacing: 0; text-shadow: 0 18px 38px rgba(0,0,0,0.38); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .hub-topbar h1 { text-shadow: none; filter: drop-shadow(0 18px 38px rgba(0,0,0,0.38)); background: linear-gradient(105deg, #fff7e8 0%, #fff7e8 34%, #8fe7ff 44%, #ffe9b0 50%, #ffb98a 56%, #fff7e8 66%, #fff7e8 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: home-title-sheen 8s ease-in-out infinite; } } @keyframes home-title-sheen { 0%, 22% { background-position: 100% 0; } 62%, 100% { background-position: 0% 0; } } .hub-topbar p { max-width: 680px; margin: 0; color: #c8d9df; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.5; } .home-signal-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .home-signal-row span { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 10px; border: 1px solid rgba(58,132,255,0.52); border-radius: 8px; background: rgba(7,35,82,0.62); color: #e7f2ff; font-size: 12px; font-weight: 750; white-space: nowrap; } .home-signal-row span:first-child { border-color: rgba(47,199,255,0.62); color: #71dcff; } /* Animated FX layer inside the Home Base topbar: twinkles, comets, and a satellite tracing the planet's orbit rings drawn by .hub-topbar::after. */ .hub-topbar .topbar-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } .topbar-fx .fx-tw { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #cfeaff; box-shadow: 0 0 6px rgba(160,220,255,0.9); opacity: 0.12; animation: home-twinkle 3.6s ease-in-out infinite; } @keyframes home-twinkle { 0%, 100% { opacity: 0.1; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1.2); } } .topbar-fx .fx-comet { position: absolute; top: 16%; left: -10%; width: 130px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(125,225,255,0), rgba(214,243,255,0.95)); filter: drop-shadow(0 0 6px rgba(125,225,255,0.85)); opacity: 0; animation: home-comet 13s linear infinite; } .topbar-fx .fx-comet-b { top: 52%; width: 90px; height: 1.5px; animation-duration: 19s; animation-delay: -8.5s; } @keyframes home-comet { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(11deg); } 2.5% { opacity: 0.9; } 11% { opacity: 0; transform: translate3d(80vw, 15.5vw, 0) rotate(11deg); } 100% { opacity: 0; transform: translate3d(80vw, 15.5vw, 0) rotate(11deg); } } .topbar-fx .fx-orbit { position: absolute; left: 80%; top: 51%; width: 220px; height: 220px; margin: -110px 0 0 -110px; transform: rotate(-8deg) scaleY(0.36); } .topbar-fx .fx-orbit-spin { position: absolute; inset: 0; animation: home-orbit 16s linear infinite; } .topbar-fx .fx-sat { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #d9f3ff; box-shadow: 0 0 8px 2px rgba(110,205,255,0.85); } @keyframes home-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .topbar-actions { display: flex; align-items: center; gap: 12px; } .topbar-actions a, .topbar-actions button { border: 1px solid rgba(92,158,255,0.62); background: linear-gradient(180deg, rgba(30,104,230,0.9), rgba(8,47,136,0.92)); color: #e5f2f6; border-radius: 8px; padding: 9px 13px; font-size: 13px; font-weight: 700; text-decoration: none; } .hub-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .hub-card { min-height: 274px; display: flex; flex-direction: column; padding: 14px; border: 1px solid rgba(55,121,220,0.5); border-radius: 10px; background: radial-gradient(circle at 92% 0%, rgba(24,92,220,0.11), transparent 38%), rgba(3,14,31,0.54); color: #eef6f8; text-decoration: none; box-shadow: inset 0 1px 0 rgba(120,179,255,0.09), -7px 8px 0 rgba(0,0,0,0.52), 0 12px 30px rgba(0,0,0,0.28); backdrop-filter: blur(5px) saturate(1.12); -webkit-backdrop-filter: blur(5px) saturate(1.12); transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; } .hub-card:hover { transform: translateY(-3px); border-color: rgba(62,188,255,0.72); background: radial-gradient(circle at 92% 0%, rgba(39,170,230,0.15), transparent 38%), rgba(5,22,49,0.82); box-shadow: inset 0 1px 0 rgba(120,179,255,0.12), -8px 9px 0 rgba(0,0,0,0.58), 0 14px 34px rgba(0,0,0,0.32); text-decoration: none; } .hub-card-media { height: 108px; margin: -2px -2px 16px; border-radius: 7px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 999px rgba(2,8,18,0.08), inset 0 -42px 42px rgba(0,0,0,0.28); } .hub-card-media.blue, .hub-card-media.lab { filter: saturate(0.85) hue-rotate(150deg) contrast(1.06) brightness(0.82); } .hub-card-media.tools { filter: saturate(.8) brightness(.75); } .game-card-animation { position: relative; isolation: isolate; overflow: hidden; /* Track the 2:1 SVG scene so single-column (mobile) widths don't crop the HUD and cannon off the top/bottom of the inline arcade animation. */ height: auto; aspect-ratio: 2 / 1; min-height: 108px; background: linear-gradient(180deg, rgba(5,10,31,0.22), rgba(3,12,28,0.78)), url('home-cards/games-space-bg.jpg') center / cover no-repeat, linear-gradient(180deg, #080b2b 0%, #101955 54%, #061328 100%); } .game-card-animation::before, .game-card-animation::after, .game-card-animation i { content: ""; position: absolute; display: block; pointer-events: none; } .game-card-animation::before { inset: 0; z-index: 1; background: radial-gradient(ellipse at 22% 82%, rgba(92,221,255,0.16), transparent 38%), radial-gradient(ellipse at 78% 18%, rgba(255,91,208,0.12), transparent 34%); opacity: 0.8; } .game-card-animation::after { inset: 0; z-index: 6; background: radial-gradient(circle at 50% 52%, transparent 0 38%, rgba(0,0,0,0.3) 100%); opacity: 0.72; } /* GameMaster Arcade hub-card scene is now a self-contained inline SVG in index.html (.gma-screen) — the old .game-* / arcade-* div animation was removed with it. */ @keyframes galaxy-turn { from { rotate: 0deg; } to { rotate: 360deg; } } @keyframes galaxy-slow-turn { from { transform: rotate(-1deg) scale(1.03); } to { transform: rotate(359deg) scale(1.03); } } @keyframes galaxy-drift { from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); } to { transform: translate3d(1.5%, 1%, 0) scale(1.08); } } @keyframes galaxy-dust-orbit { 0% { transform: translate3d(-1.2%, 0.5%, 0) rotate(-0.4deg) scale(1.01); } 50% { transform: translate3d(0.7%, -0.8%, 0) rotate(0.45deg) scale(1.035); } 100% { transform: translate3d(1.4%, 0.8%, 0) rotate(0.85deg) scale(1.055); } } @keyframes galaxy-star-slide { from { background-position: 14px 8px, 38px 25px; } to { background-position: -240px 138px, -320px 205px; } } @media (prefers-reduced-motion: reduce) { body.home-page::before, body.home-page::after, .desktop-hub::before, .galaxy-backdrop::before, .galaxy-spiral, .galaxy-dust, .galaxy-stars { animation-duration: 180s; } /* The Home Base topbar effects intentionally keep running at full speed here, matching the GameMaster Arcade card below it. Jez's own PC reports reduced motion (Windows animation effects off) and the topbar effects are the point of the hero. */ } .hub-card h2 { margin: 0 0 9px; color: #f4ecdf; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 1.17rem; line-height: 1.1; letter-spacing: -0.01em; } .hub-card p { margin: 0; color: #a8bdc6; font-size: 13px; line-height: 1.45; } .hub-card span { margin-top: auto; color: #ffffff; font-size: 13px; font-weight: 750; } .icon-card { justify-content: flex-start; } .hub-icon { height: 108px; margin: -2px -2px 16px; border-radius: 7px; display: grid; place-items: center; font-size: 58px; color: #e8c57a; background: linear-gradient(rgba(74,187,221,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(74,187,221,0.08) 1px, transparent 1px), radial-gradient(circle at 50% 45%, rgba(68,155,199,0.18), transparent 54%), #0a2130; background-size: 18px 18px, 18px 18px, auto, auto; } .brain-icon { color: #72caf0; } .quick-glance { margin-top: 22px; padding: 18px 22px 20px; border-radius: 12px; background: rgba(5,20,43,0.66); border: 1px solid rgba(55,121,220,0.34); box-shadow: inset 0 1px 0 rgba(120,179,255,0.09), -7px 8px 0 rgba(0,0,0,0.52), 0 12px 30px rgba(0,0,0,0.28); backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08); } .quick-glance h2 { margin: 0 0 14px; color: #f4ecdf; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 1rem; } .glance-grid { display: grid; grid-template-columns: 1.1fr 1.1fr 1.45fr 1fr 1fr 1fr; gap: 18px; } .glance-grid div { min-width: 0; } .glance-grid span { display: block; color: #2fc7ff; font-size: 11px; font-weight: 800; margin-bottom: 4px; } .glance-grid strong { display: block; color: #d7e5ea; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-ai-briefing { margin-top: 18px; padding: 20px 22px 22px; border-radius: 12px; background: linear-gradient(135deg, rgba(47,199,255,0.08), transparent 42%), rgba(5,20,43,0.72); border: 1px solid rgba(55,121,220,0.34); box-shadow: inset 0 1px 0 rgba(120,179,255,0.09), -7px 8px 0 rgba(0,0,0,0.52), 0 12px 30px rgba(0,0,0,0.28); backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08); } .home-ai-briefing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .home-ai-briefing h2 { margin: 3px 0 0; color: #f4ecdf; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 1.18rem; } .home-ai-briefing-head a { flex: 0 0 auto; color: #2fc7ff; font-size: 12px; font-weight: 800; text-decoration: none; } .home-ai-briefing-head a:hover { color: #f4ecdf; } .home-ai-briefing-meta { margin-top: 8px; color: #92aebf; font-size: 12px; } .home-ai-briefing-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; } .home-ai-briefing-item { min-width: 0; padding: 14px; border-radius: 10px; background: rgba(0,0,0,0.22); border: 1px solid rgba(120,179,255,0.16); } .home-ai-briefing-thumb { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 12px; overflow: hidden; border-radius: 8px; background: radial-gradient(circle at 20% 18%, rgba(47,199,255,0.42), transparent 34%), linear-gradient(135deg, rgba(232,197,122,0.26), rgba(27,49,99,0.7)); border: 1px solid rgba(120,179,255,0.2); color: #f4ecdf; font-size: 11px; font-weight: 900; line-height: 1.25; text-align: center; text-decoration: none; text-transform: uppercase; } .home-ai-briefing-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .home-ai-briefing-thumb.is-fallback { padding: 14px; } .home-ai-briefing-item span { display: inline-flex; margin-bottom: 8px; color: #101820; background: #e8c57a; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } .home-ai-briefing-item a { display: block; color: #f4ecdf; font-size: 0.95rem; font-weight: 800; line-height: 1.25; text-decoration: none; } .home-ai-briefing-item a:hover { color: #2fc7ff; } .home-ai-briefing-item p { margin: 8px 0 0; color: #8eb7c7; font-size: 11px; font-weight: 700; } .home-ai-briefing-item small { display: block; margin-top: 9px; color: #b8cbd3; font-size: 12px; line-height: 1.45; } .home-ai-briefing-empty { margin: 0; color: #b8cbd3; font-size: 13px; } .below-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } .below-hub article { padding: 20px; border-radius: 12px; background: rgba(5,20,43,0.66); border: 1px solid rgba(55,121,220,0.34); box-shadow: inset 0 1px 0 rgba(120,179,255,0.09), -7px 8px 0 rgba(0,0,0,0.52), 0 12px 30px rgba(0,0,0,0.28); backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08); } .below-hub h2 { margin: 8px 0 8px; color: #f4ecdf; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 1.28rem; } .below-hub p { margin: 0; color: #a8bdc6; line-height: 1.55; } .ai-agent-hub { grid-template-columns: 1fr; } .ai-agent-hub details { margin-top: 12px; color: #a8bdc6; } .ai-agent-hub details > div { margin-top: 12px; max-height: 340px; overflow: auto; padding: 16px; border-radius: 10px; background: rgba(0,0,0,0.25); font: 12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; } .ai-agent-hub a { color: #ffffff; } @media (max-width: 1180px) { .desktop-hub { grid-template-columns: 250px minmax(0,1fr); } .hub-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .glance-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .home-ai-briefing-list { grid-template-columns: 1fr; } } @media (min-width: 761px) and (max-width: 1180px) and (hover: none) and (pointer: coarse) { .workbench-home { max-width: 1040px !important; padding: 18px clamp(14px, 3vw, 30px) 54px !important; } .desktop-hub { grid-template-columns: 1fr; min-height: auto; } .hub-sidebar { display: none; } .hub-main { padding: 24px clamp(18px, 3vw, 28px) 30px; } .hub-topbar { max-width: 820px; margin-right: auto; margin-left: auto; } .hub-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .hub-card { min-height: 248px; } .hub-card-media, .hub-icon { height: 96px; } } @media (min-width: 761px) { .is-touch-tablet .workbench-home { max-width: 1040px !important; padding: 18px clamp(14px, 3vw, 30px) 54px !important; } .is-touch-tablet .desktop-hub { grid-template-columns: 1fr; min-height: auto; } .is-touch-tablet .hub-sidebar { display: none; } .is-touch-tablet .hub-main { padding: 24px clamp(18px, 3vw, 28px) 30px; } .is-touch-tablet .hub-topbar { max-width: 820px; margin-right: auto; margin-left: auto; } .is-touch-tablet .hub-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .is-touch-tablet .hub-card { min-height: 248px; } .is-touch-tablet .hub-card-media, .is-touch-tablet .hub-icon { height: 96px; } .is-touch-tablet body.home-page { background: linear-gradient(180deg, rgba(2,7,17,0.72), rgba(6,24,51,0.42) 48%, rgba(2,7,17,0.82)), url("galaxy-home-20260530.webp") center top / 190% auto repeat-y, linear-gradient(180deg, #020711, #061833 62%, #020711) !important; } .is-touch-tablet body.home-page::before, .is-touch-tablet body.home-page::after, .is-touch-tablet .desktop-hub::before { content: none !important; } .is-touch-tablet .galaxy-backdrop { display: none !important; } .is-touch-tablet .hub-card, .is-touch-tablet .hub-topbar, .is-touch-tablet .quick-glance, .is-touch-tablet .home-ai-briefing, .is-touch-tablet .below-hub article { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: none !important; } } @media (max-width: 760px) { .workbench-home { padding: 12px !important; } .desktop-hub { grid-template-columns: 1fr; } .hub-sidebar { display: none; } .hub-main { padding: 22px 16px; } .hub-topbar { display: block; } .topbar-actions { margin-top: 14px; } .hub-card-grid, .below-hub { grid-template-columns: 1fr; } .glance-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .home-ai-briefing { padding: 18px 16px 20px; } .home-ai-briefing-head { align-items: flex-start; } .home-ai-briefing-list { grid-template-columns: 1fr; } } @media (max-width: 760px), (hover: none) and (pointer: coarse) { body.home-page { background: linear-gradient(180deg, rgba(2,7,17,0.72), rgba(6,24,51,0.42) 48%, rgba(2,7,17,0.82)), url("galaxy-home-20260530.webp") center top / 190% auto repeat-y, linear-gradient(180deg, #020711, #061833 62%, #020711) !important; } body.home-page::before, body.home-page::after, .desktop-hub::before, .galaxy-backdrop, .galaxy-backdrop::before, .galaxy-backdrop::after, .galaxy-backdrop span { animation: none !important; background: none !important; filter: none !important; mix-blend-mode: normal !important; transform: none !important; -webkit-mask-image: none !important; mask-image: none !important; } body.home-page::before, body.home-page::after, .desktop-hub::before { content: none !important; } .galaxy-backdrop { display: none !important; } .hub-card, .hub-topbar, .hub-sidebar, .quick-glance, .home-ai-briefing, .below-hub article { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .hub-card, .hub-topbar, .quick-glance, .home-ai-briefing, .below-hub article, .desktop-hub .side-nav a { transition: none !important; } }