/* =================================================== PAUL — Subject Detail Pages (shared) Each page sets --accent-a, --accent-b, --glow-accent via a override below. =================================================== */ /* ── Per-theme colour overrides ─────────────────── */ /* AIF — Electric Blue */ body.theme-aif { --accent-a: #2563eb; --accent-b: #3b82f6; --accent-c: #93c5fd; --glow-accent: rgba(37,99,235,0.55); --blob-a: #2563eb; --blob-b: #1e40af; --blob-c: #3b82f6; } /* KMD — Neon Green / Lime */ body.theme-kmd { --accent-a: #16a34a; --accent-b: #22c55e; --accent-c: #86efac; --glow-accent: rgba(22,163,74,0.55); --blob-a: #16a34a; --blob-b: #15803d; --blob-c: #4ade80; } /* OFM — Warm Amber / Orange */ body.theme-ofm { --accent-a: #d97706; --accent-b: #f59e0b; --accent-c: #fcd34d; --glow-accent: rgba(217,119,6,0.55); --blob-a: #d97706; --blob-b: #92400e; --blob-c: #f59e0b; } /* MBK — Hot Pink / Fuchsia */ body.theme-mbk { --accent-a: #c026d3; --accent-b: #e879f9; --accent-c: #f0abfc; --glow-accent: rgba(192,38,211,0.55); --blob-a: #c026d3; --blob-b: #86198f; --blob-c: #e879f9; } /* ── Accent-coloured blobs (override home.css blob colours) */ body.theme-aif .blob-1 { background: radial-gradient(circle, var(--blob-a), transparent 70%); } body.theme-aif .blob-2 { background: radial-gradient(circle, var(--blob-b), transparent 70%); } body.theme-aif .blob-3 { background: radial-gradient(circle, var(--blob-c), transparent 70%); } body.theme-kmd .blob-1 { background: radial-gradient(circle, var(--blob-a), transparent 70%); } body.theme-kmd .blob-2 { background: radial-gradient(circle, var(--blob-b), transparent 70%); } body.theme-kmd .blob-3 { background: radial-gradient(circle, var(--blob-c), transparent 70%); } body.theme-ofm .blob-1 { background: radial-gradient(circle, var(--blob-a), transparent 70%); } body.theme-ofm .blob-2 { background: radial-gradient(circle, var(--blob-b), transparent 70%); } body.theme-ofm .blob-3 { background: radial-gradient(circle, var(--blob-c), transparent 70%); } body.theme-mbk .blob-1 { background: radial-gradient(circle, var(--blob-a), transparent 70%); } body.theme-mbk .blob-2 { background: radial-gradient(circle, var(--blob-b), transparent 70%); } body.theme-mbk .blob-3 { background: radial-gradient(circle, var(--blob-c), transparent 70%); } /* Scrollbar accent */ ::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent-a), var(--accent-b)) !important; } /* ── Active nav link accent */ .nav-active { color: var(--white) !important; } .nav-active::after { right: 0 !important; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)) !important; box-shadow: 0 0 8px var(--glow-accent) !important; } /* logo-dot accent */ .logo-dot { background: linear-gradient(135deg, var(--accent-a), var(--accent-b)) !important; box-shadow: 0 0 12px var(--glow-accent) !important; } /* ────────────────────────────────────────── PAGE HERO ────────────────────────────────────────── */ .page-hero { min-height: 48vh; display: flex; align-items: flex-end; justify-content: center; padding: 120px clamp(20px,6vw,80px) 56px; position: relative; text-align: center; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 65% at 50% 38%, rgba(var(--accent-rgb),.10) 0%, transparent 70%); pointer-events: none; } /* fallback radial per theme */ body.theme-aif .page-hero::before { background: radial-gradient(ellipse 65% 65% at 50% 38%, rgba(59,130,246,.12) 0%, transparent 70%); } body.theme-kmd .page-hero::before { background: radial-gradient(ellipse 65% 65% at 50% 38%, rgba(139,92,246,.12) 0%, transparent 70%); } body.theme-ofm .page-hero::before { background: radial-gradient(ellipse 65% 65% at 50% 38%, rgba(6,182,212,.12) 0%, transparent 70%); } body.theme-mbk .page-hero::before { background: radial-gradient(ellipse 65% 65% at 50% 38%, rgba(244,114,182,.12) 0%, transparent 70%); } .page-hero-inner { display: flex; flex-direction: column; align-items: center; max-width: 780px; width: 100%; } /* Badge */ .page-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 100px; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(8px); font-size: 0.78rem; font-weight: 500; color: var(--white-muted); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 28px; animation: fadeSlideUp .65s cubic-bezier(.22,1,.36,1) .10s both; } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-b); box-shadow: 0 0 8px var(--glow-accent); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.7); } } /* Title */ .page-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(2.4rem, 6.5vw, 4.8rem); line-height: 1.06; letter-spacing: -0.03em; animation: fadeSlideUp .65s cubic-bezier(.22,1,.36,1) .20s both; } .page-title .accent-gradient { background: linear-gradient(135deg, var(--accent-b) 0%, var(--accent-c) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Subtitle */ .page-subtitle { margin-top: 22px; max-width: 600px; font-size: clamp(.95rem,2vw,1.08rem); font-weight: 300; color: var(--white-muted); line-height: 1.75; animation: fadeSlideUp .65s cubic-bezier(.22,1,.36,1) .32s both; } /* Meta row */ .page-meta { margin-top: 28px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; animation: fadeSlideUp .65s cubic-bezier(.22,1,.36,1) .42s both; } .meta-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); font-size: 0.78rem; color: var(--white-muted); } .meta-pill svg { width:13px; height:13px; flex-shrink:0; } /* Divider line */ .hero-divider { width: 56px; height: 2px; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); border-radius: 2px; margin: 32px auto 0; box-shadow: 0 0 12px var(--glow-accent); animation: fadeSlideUp .65s cubic-bezier(.22,1,.36,1) .50s both; } @keyframes fadeSlideUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } } /* ────────────────────────────────────────── BENTO SECTION ────────────────────────────────────────── */ .bento-section { padding: 48px clamp(20px,5vw,80px) clamp(80px,12vw,140px); } /* ────────────────────────────────────────── BENTO GRID ────────────────────────────────────────── */ .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 18px; max-width: 1280px; margin: 0 auto; } /* Size variants */ .bento-card { grid-column: span 1; grid-row: span 1; } .bento-card.span-2-col { grid-column: span 2; } .bento-card.span-3-col { grid-column: span 3; } .bento-card.span-4-col { grid-column: span 4; } .bento-card.span-2-row { grid-row: span 2; } /* ────────────────────────────────────────── BENTO CARD BASE ────────────────────────────────────────── */ .bento-card { position: relative; border-radius: 20px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); overflow: hidden; cursor: pointer; opacity: 0; transform: translateY(28px); transition: opacity .60s cubic-bezier(.22,1,.36,1), transform .60s cubic-bezier(.22,1,.36,1), box-shadow .40s, border-color .40s; } .bento-card.visible { opacity: 1; transform: translateY(0); } /* stagger */ .bento-card:nth-child(1) { transition-delay: .04s; } .bento-card:nth-child(2) { transition-delay: .10s; } .bento-card:nth-child(3) { transition-delay: .16s; } .bento-card:nth-child(4) { transition-delay: .22s; } .bento-card:nth-child(5) { transition-delay: .28s; } .bento-card:nth-child(6) { transition-delay: .34s; } .bento-card:nth-child(7) { transition-delay: .40s; } .bento-card:nth-child(8) { transition-delay: .46s; } .bento-card:nth-child(9) { transition-delay: .52s; } .bento-card:nth-child(10) { transition-delay: .58s; } /* Shimmer sweep */ .bento-card::before { content: ''; position: absolute; top: -50%; left: -70%; width: 50%; height: 200%; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.055) 50%, transparent 80%); transform: skewX(-15deg); transition: left .60s cubic-bezier(.22,1,.36,1); pointer-events: none; z-index: 3; } .bento-card:hover::before { left: 140%; } /* Hover lift */ .bento-card:hover { transform: translateY(-6px) scale(1.014); border-color: color-mix(in srgb, var(--accent-a) 40%, transparent); box-shadow: 0 20px 60px rgba(0,0,0,.42), 0 0 0 1px color-mix(in srgb, var(--accent-a) 30%, transparent), 0 0 40px color-mix(in srgb, var(--accent-a) 15%, transparent); } /* ── Card bg gradient (randomised via nth-child) */ .bento-card:nth-child(odd) .bento-bg { background: linear-gradient(140deg, color-mix(in srgb, var(--accent-a) 18%, transparent), transparent 70%); } .bento-card:nth-child(even) .bento-bg { background: linear-gradient(220deg, color-mix(in srgb, var(--accent-b) 16%, transparent), transparent 70%); } .bento-bg { position: absolute; inset: 0; z-index: 0; } /* Orb */ .bento-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .22; pointer-events: none; z-index: 0; transition: opacity .45s, transform .5s cubic-bezier(.22,1,.36,1); background: var(--accent-a); } .bento-card:nth-child(odd) .bento-orb { width:180px; height:180px; top:-40px; right:-40px; } .bento-card:nth-child(even) .bento-orb { width:180px; height:180px; bottom:-40px; left:-40px; background: var(--accent-b); } .bento-card:hover .bento-orb { opacity: .38; transform: scale(1.2); } /* ── Card inner */ .bento-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 24px; gap: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); padding: 1rem; border-radius: 16px; } /* Number label */ .bento-num { position: absolute; top: 18px; left: 22px; font-family: 'Syne', sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .12em; color: color-mix(in srgb, var(--accent-b) 70%, transparent); text-transform: uppercase; } /* Arrow */ .bento-arrow { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--glass-border); display: grid; place-items: center; opacity: 0; transform: translate(-4px,4px); transition: opacity .3s, transform .35s cubic-bezier(.22,1,.36,1), background .3s, box-shadow .3s; z-index: 4; } .bento-card:hover .bento-arrow { opacity: 1; transform: translate(0,0); background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); box-shadow: 0 0 16px var(--glow-accent); } .bento-arrow svg { width:13px; height:13px; } /* Tag */ .bento-tag { display: inline-block; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--white-muted); margin-bottom: 8px; width: fit-content; transition: color .3s, border-color .3s; } .bento-card:hover .bento-tag { color: var(--accent-c); border-color: color-mix(in srgb, var(--accent-a) 35%, transparent); } /* Title */ .bento-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.22rem); line-height: 1.22; letter-spacing: -.02em; color: var(--white); margin-bottom: 7px; transition: color .3s; } .bento-card:hover .bento-title { color: #fff; } /* Description — only show when enough space */ .bento-desc { font-size: .84rem; font-weight: 300; color: var(--white-muted); line-height: 1.60; display: none; transition: color .3s; } .bento-card.span-2-col .bento-desc, .bento-card.span-3-col .bento-desc, .bento-card.span-4-col .bento-desc, .bento-card.span-2-row .bento-desc { display: block; } .bento-card:hover .bento-desc { color: var(--white-dim); } /* WIP badge */ .bento-wip { position: absolute; bottom: 18px; right: 18px; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(255,200,50,.25); background: rgba(255,200,50,.08); font-size: .65rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,220,80,.7); z-index: 4; } /* ────────────────────────────────────────── RESPONSIVE ────────────────────────────────────────── */ @media (max-width: 1100px) { .bento-grid { grid-template-columns: repeat(3, 1fr); } .bento-card.span-4-col { grid-column: span 3; } .bento-card.span-3-col { grid-column: span 3; } } @media (max-width: 760px) { .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 14px; } .bento-card.span-2-col, .bento-card.span-3-col, .bento-card.span-4-col { grid-column: span 2; } .bento-card.span-2-row { grid-row: span 1; } .bento-desc { display: none !important; } } @media (max-width: 480px) { .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 160px; } .bento-card, .bento-card.span-2-col, .bento-card.span-3-col, .bento-card.span-4-col { grid-column: span 1; } .page-title { font-size: 2.2rem; } }