/* Colour tokens live in css/themes.css (swap via ). */ :root { /* JetBrains Mono is the signature face (from the kitty setup); Inter for body. */ --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --display: 'JetBrains Mono', var(--mono); --max: 1200px; --pad: clamp(1.25rem, 4vw, 2.5rem); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } body { background: var(--bg); color: var(--text); font-family: var(--mono); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; -webkit-tap-highlight-color: transparent; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } ::selection { background: var(--accent); color: var(--bg); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } /* ============ NAV ============ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.25rem var(--pad); padding-top: max(1.25rem, env(safe-area-inset-top)); padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: center; transition: background 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--border); } .nav-logo { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); } .nav-logo:hover { color: var(--accent); } .nav-logo-full { white-space: nowrap; word-spacing: -0.2em; } .nav-logo-short { display: none; } .nav-burger { display: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; width: 26px; height: 26px; background: none; border: none; padding: 0; cursor: pointer; z-index: 101; } .nav-burger span { display: block; width: 100%; height: 2px; background: var(--text-soft); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease; } .nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 100%; } .nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; } .nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 100%; } .nav-links { display: flex; gap: 1.9rem; list-style: none; font-family: var(--mono); font-size: 0.92rem; font-weight: 600; } .nav-links a { position: relative; padding: 0.25rem 0; color: var(--text); transition: color 0.2s ease; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--accent); } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease; } .nav-links a:hover::after, .nav-links a:focus-visible::after { width: 100%; } .nav-links a.is-active { color: var(--accent); } .nav-links a.is-active::after { width: 100%; } @media (max-width: 640px) { .nav { padding: 1rem var(--pad); padding-top: max(1rem, env(safe-area-inset-top)); } .nav-logo { font-size: 1rem; width: 26px; } .nav-logo-full { display: none; } .nav-logo-short { display: inline; } .nav-burger { display: flex; } .nav.menu-open { background: var(--nav-bg); border-bottom-color: var(--border); } .nav-links { position: fixed; top: 0; left: 0; right: 0; z-index: 100; flex-direction: column; align-items: flex-start; gap: 0; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 4.5rem var(--pad) 1.25rem; padding-top: max(4.5rem, calc(env(safe-area-inset-top) + 3.5rem)); font-size: 0.95rem; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s step-end; } .nav.menu-open .nav-links { transform: translateY(0); opacity: 1; visibility: visible; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s step-start; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 0.7rem 0; } } /* ============ HERO ============ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 0 var(--pad); overflow: hidden; background: radial-gradient(ellipse at 78% 32%, var(--glow), transparent 60%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 60%); } /* subtle static warm contour motif — no animation, no particles */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; background-image: repeating-linear-gradient(115deg, transparent 0 38px, var(--accent-dim) 38px 39px); -webkit-mask-image: radial-gradient(ellipse at 80% 35%, #000 0%, transparent 62%); mask-image: radial-gradient(ellipse at 80% 35%, #000 0%, transparent 62%); } .hero-wrap { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 4rem; align-items: center; pointer-events: none; } .hero-wrap > * { pointer-events: auto; } .hero-content { min-width: 0; } /* Portrait frame */ .hero-portrait { opacity: 0; animation: fadeInUp 1.1s 0.9s forwards cubic-bezier(.16,.68,.43,.99); } .portrait-frame { position: relative; aspect-ratio: 3 / 4; background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%); border: 1px solid var(--border); overflow: hidden; isolation: isolate; } .portrait-frame::before { content: 'PORTRAIT\A HMKG · Band & Drill Team'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); text-align: center; padding: 1rem; white-space: pre-line; letter-spacing: 0.14em; line-height: 1.8; z-index: 0; } .portrait-frame:has(img)::before { display: none; } .portrait-frame img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 1; filter: contrast(1.02) saturate(0.92); } .frame-corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); z-index: 2; pointer-events: none; } .frame-corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .frame-corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; } .frame-corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; } .frame-corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .hero-portrait figcaption { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 0.85rem; text-align: right; letter-spacing: 0.08em; } .hero-portrait figcaption .cap-accent { color: var(--accent); } @media (max-width: 900px) { .hero-wrap { grid-template-columns: 1fr; gap: 2.5rem; } .hero-portrait { max-width: 260px; margin: 0 auto; width: 100%; } .hero-portrait figcaption { text-align: center; } } @media (max-width: 440px) { .hero { min-height: 100svh; align-items: flex-start; padding-top: 6rem; } .hero-portrait { max-width: 220px; } .hero-cta { gap: 0.6rem; } .btn { padding: 0.8rem 1.2rem; font-size: 0.86rem; } } .hero-label { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); margin-bottom: 1.75rem; opacity: 0; animation: fadeInUp 0.9s 0.1s forwards cubic-bezier(.16,.68,.43,.99); } .hero-label::before { content: '● '; font-size: 0.6em; vertical-align: 0.12em; color: var(--accent); } .hero-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.85rem, 5.6vw, 4.4rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 2rem; opacity: 0; animation: fadeInUp 1s 0.3s forwards cubic-bezier(.16,.68,.43,.99); word-break: break-word; } .accent { color: var(--accent); font-style: italic; font-weight: 400; } .hero-title-light { font-weight: 400; color: var(--text-soft); } .hero-sub { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--text-soft); max-width: 640px; margin-bottom: 2.5rem; opacity: 0; animation: fadeInUp 0.9s 0.5s forwards cubic-bezier(.16,.68,.43,.99); } .hero-sub strong { color: var(--text); font-weight: 500; } .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeInUp 0.9s 0.7s forwards cubic-bezier(.16,.68,.43,.99); } .btn { font-family: var(--mono); font-size: 0.95rem; font-weight: 600; padding: 0.95rem 1.6rem; border: 1px solid transparent; transition: all 0.25s ease; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5ch; } .btn-primary { background: var(--accent); color: var(--bg); } .btn-primary:hover { background: transparent; color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .btn-ghost { border-color: var(--border); color: var(--text); background: transparent; } .btn-ghost:hover { border-color: var(--text); transform: translateY(-2px); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ============ SECTIONS ============ */ .section { padding: clamp(5rem, 13vh, 9rem) 0; border-top: 1px solid var(--border); position: relative; } .section-label { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); margin-bottom: 1rem; letter-spacing: 0.05em; } .section-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 3.5rem; max-width: 900px; } /* ============ ABOUT ============ */ .about-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: start; } .about-text p { font-size: 1.1rem; color: var(--text-soft); margin-bottom: 1.25rem; max-width: 62ch; } .about-text strong { color: var(--text); font-weight: 500; } .about-stats { display: flex; flex-direction: column; gap: 2rem; border-left: 1px solid var(--border); padding-left: 2rem; } .stat-num { display: block; font-family: var(--display); font-weight: 500; font-size: 3.2rem; color: var(--accent); line-height: 1; margin-bottom: 0.4rem; } .stat-lbl { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); line-height: 1.5; } .stat-lbl em { color: var(--text); font-style: normal; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-stats { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 2rem; flex-direction: row; flex-wrap: wrap; gap: 2rem 3rem; } .stat-num { font-size: 2.5rem; } } /* ============ SKILLS ============ */ .skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } #skills .section-label + .skills-grid { margin-top: 0; } .skill-block-title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.6rem; } .skill-block-tags { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.03em; margin-bottom: 0.9rem; } .skill-block p:not(.skill-block-tags) { color: var(--text-soft); max-width: 46ch; } .skill-block p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 860px) { .skills-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ============ TIMELINE ============ */ .timeline { display: flex; flex-direction: column; } .tl-item { display: grid; grid-template-columns: 150px 1fr; gap: 3rem; padding: 2rem 0; border-top: 1px solid var(--border); position: relative; } .tl-item:last-child { border-bottom: 1px solid var(--border); } .tl-date { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); padding-top: 0.5rem; } .tl-body h3 { font-family: var(--display); font-weight: 500; font-size: 1.55rem; margin-bottom: 0.3rem; letter-spacing: -0.015em; } .tl-role { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); margin-bottom: 0.85rem !important; } .tl-body p:last-child { color: var(--text-soft); max-width: 65ch; margin-bottom: 0; } .tl-tag { display: inline-block; font-family: var(--mono); font-size: 0.7rem; padding: 0.2rem 0.55rem; background: var(--accent); color: var(--bg); margin-bottom: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } .tl-featured .tl-body h3 { color: var(--text); } .tl-body h3 a { color: inherit; transition: color 0.2s ease; border-bottom: 1px solid transparent; } .tl-body h3 a:hover { color: var(--accent); } .ext { font-size: 0.95em; color: var(--muted); display: inline-block; transition: transform 0.25s ease, color 0.25s ease; margin-left: -0.2em; } .tl-body h3 a:hover .ext { color: var(--accent); transform: translate(2px, -2px); } .tl-bullets { list-style: none; margin-top: 1rem; max-width: 65ch; } .tl-bullets li { position: relative; padding-left: 1.25rem; margin-bottom: 0.6rem; color: var(--text-soft); font-size: 0.95rem; } .tl-bullets li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); } .tl-bullets code { font-family: var(--mono); font-size: 0.85em; color: var(--text); background: var(--surface); padding: 0.1em 0.4em; border: 1px solid var(--border); border-radius: 2px; } @media (max-width: 640px) { .tl-item { grid-template-columns: 1fr; gap: 0.5rem; } } /* ============ PROJECTS ============ */ .projects-list { display: flex; flex-direction: column; gap: 1.25rem; } .project-acc { border: 1px solid var(--border); background: var(--bg-2); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .project-acc:hover { border-color: var(--accent); } .project-acc[open] { border-color: var(--accent); box-shadow: 0 20px 40px -20px var(--shadow); } .project-acc-head { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 1.75rem 2rem; } .project-acc-head::-webkit-details-marker { display: none; } .project-acc-summary { min-width: 0; flex: 1; } .project-acc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; font-family: var(--mono); font-size: 0.78rem; gap: 1rem; } .project-num { color: var(--accent); font-weight: 500; } .project-tags { color: var(--muted); text-align: right; } .project-acc h3 { font-family: var(--display); font-weight: 500; font-size: 1.4rem; margin-bottom: 0.6rem; letter-spacing: -0.015em; } .project-hook { color: var(--text-soft); font-size: 0.95rem; } .project-acc-chevron { flex: none; width: 11px; height: 11px; margin-top: 0.4rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.25s ease; } .project-acc[open] > .project-acc-head > .project-acc-chevron { transform: rotate(-135deg); } .project-acc-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .project-acc-body { padding: 0 2rem 2rem; } .proj-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .proj-block:first-child { margin-top: 0; padding-top: 0; border-top: none; } .proj-kicker { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 0.6rem; } .proj-block p { color: var(--muted); font-size: 0.95rem; max-width: 75ch; } .proj-block p + p { margin-top: 0.85rem; } .proj-block code { font-family: var(--mono); font-size: 0.88em; color: var(--text); } .proj-role { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); } .proj-role a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .proj-role a:hover { color: var(--text); } .proj-evidence-link { margin-top: 0.85rem; font-family: var(--mono); font-size: 0.85rem; } .proj-evidence-link a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .proj-evidence-link a:hover { color: var(--text); } @media (max-width: 640px) { .project-acc-head { padding: 1.4rem 1.25rem; } .project-acc-body { padding: 0 1.25rem 1.75rem; } } /* ============ LAB / SELF-HOSTED ============ */ .lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .lab-text p { font-size: 1.1rem; color: var(--text-soft); margin-bottom: 1.25rem; max-width: 55ch; } .lab-stack { border: 1px solid var(--border); background: var(--bg-2); padding: 1.5rem 1.75rem; font-family: var(--mono); position: relative; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .lab-stack:hover { border-color: var(--accent); box-shadow: 0 20px 40px -20px var(--shadow); } .lab-stack-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px dashed var(--border); color: var(--muted); font-size: 0.75rem; letter-spacing: 0.08em; margin-bottom: 0.75rem; } .lab-stack-badge { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.15em; } .lab-stack-row { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: 0.7rem 0; align-items: baseline; } .lab-stack-row + .lab-stack-row { border-top: 1px solid var(--border); } .lab-stack-key { color: var(--accent); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.06em; } .lab-stack-val { color: var(--text-soft); font-family: var(--mono); font-size: 0.95rem; font-weight: 400; } @media (max-width: 860px) { .lab-grid { grid-template-columns: 1fr; gap: 2.5rem; } .lab-stack-row { grid-template-columns: 110px 1fr; } } /* ============ CONTACT ============ */ .contact-lead { font-size: 1.15rem; color: var(--text-soft); max-width: 60ch; margin-bottom: 3rem; } .contact-links { display: flex; flex-direction: column; } .contact-link { display: grid; grid-template-columns: 150px 1fr; gap: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--border); align-items: baseline; transition: padding-left 0.3s ease, color 0.3s ease; } .contact-link:last-child { border-bottom: 1px solid var(--border); } .contact-link:hover { padding-left: 1rem; color: var(--accent); } .contact-lbl { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); } .contact-link:hover .contact-lbl { color: var(--accent); } .contact-val { font-family: var(--display); font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 500; user-select: text; -webkit-user-select: text; cursor: text; word-break: break-word; overflow-wrap: anywhere; } .contact-link { -webkit-user-drag: none; } .contact-val .arr { user-select: none; -webkit-user-select: none; cursor: pointer; } .arr { display: inline-block; transition: transform 0.3s ease; } .contact-link:hover .arr { transform: translate(4px, -4px); } @media (max-width: 640px) { .contact-link { grid-template-columns: 1fr; gap: 0.25rem; } } /* ============ FOOTER ============ */ .footer { padding: 2rem 0; padding-bottom: max(2rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); font-family: var(--mono); font-size: 0.8rem; color: var(--muted); } .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer a { color: var(--muted); transition: color 0.2s; } .footer a:hover { color: var(--accent); } /* ============ REVEAL ANIMATIONS ============ */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s cubic-bezier(.16,.68,.43,.99), transform 0.9s cubic-bezier(.16,.68,.43,.99); } .reveal.visible { opacity: 1; transform: translateY(0); } /* staggered reveal for grid children */ .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-stagger.visible > * { opacity: 1; transform: translateY(0); } .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; } .reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; } .reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.25s; } .reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.35s; } .reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.45s; } .reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.55s; } /* ============ DATA / ANALYTICS ============ */ .analytics-lead { max-width: 64ch; margin-bottom: 3rem; } .analytics-lead p { font-size: 1.1rem; color: var(--text-soft); margin-bottom: 1.1rem; } .analytics-lead strong { color: var(--text); font-weight: 500; } .viz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .viz-card { border: 1px solid var(--border); background: var(--bg-2); padding: 1.75rem; position: relative; } .viz-card-wide { grid-column: 1 / -1; } .viz-head { margin-bottom: 1.5rem; } .viz-kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); } .viz-head h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; margin-top: 0.35rem; } .viz-source { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-top: 1.25rem; letter-spacing: 0.02em; } /* animated bars (3-city price/m²) */ .bar-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 0.9rem; align-items: center; margin-bottom: 0.9rem; } .bar-label { font-family: var(--mono); font-size: 0.82rem; color: var(--text-soft); } .bar-track { height: 12px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; } .bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brown), var(--accent)); transition: width 1.1s cubic-bezier(.16,.68,.43,.99); } .is-in .bar-fill { width: var(--w, 0%); } .bar-val { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); min-width: 7ch; text-align: right; } /* animated line (Asker trend) */ .viz-line { width: 100%; height: auto; display: block; } .viz-line .vl-path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.6s ease; } .is-in .viz-line .vl-path { stroke-dashoffset: 0; } .viz-line .vl-area { fill: var(--accent-dim); opacity: 0; transition: opacity 1s ease 0.4s; } .is-in .viz-line .vl-area { opacity: 1; } .viz-line .vl-axis { stroke: var(--border); stroke-width: 1; } .viz-line .vl-tick { fill: var(--muted); font-family: var(--mono); font-size: 10px; } .viz-line .vl-dot { fill: var(--accent); opacity: 0; transition: opacity 0.4s ease 1.4s; } .is-in .viz-line .vl-dot { opacity: 1; } /* honest model scorecard */ .sc-grid { display: flex; flex-wrap: wrap; gap: 2.5rem 3rem; } .sc-item { } .sc-num { display: block; font-family: var(--display); font-weight: 700; font-size: 2.4rem; color: var(--accent); line-height: 1; } .sc-num.warn { color: var(--accent-soft); } .sc-lbl { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); display: block; margin-top: 0.4rem; } .sc-note { font-size: 0.95rem; color: var(--text-soft); max-width: 70ch; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .sc-models { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-top: 0.75rem; } .sc-models b { color: var(--text-soft); font-weight: 500; } .sc-purpose { font-size: 1rem; color: var(--text); max-width: 70ch; margin: 0 0 1.1rem; } .sc-land { font-size: 0.95rem; color: var(--text-soft); max-width: 70ch; margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .sc-subhead { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; } /* GIS technique figures */ .gis-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .gis-fig { border: 1px solid var(--border); background: var(--bg-2); padding: 0.75rem; } .gis-fig img { width: 100%; height: auto; } .gis-fig figcaption { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 0.75rem; padding: 0 0.25rem; line-height: 1.5; } .gis-fig figcaption b { color: var(--accent); font-weight: 500; } @media (max-width: 760px) { .viz-grid, .gis-figures { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .bar-fill { width: var(--w, 0%) !important; } .viz-line .vl-path { stroke-dashoffset: 0 !important; } .viz-line .vl-area, .viz-line .vl-dot { opacity: 1 !important; } } /* ============ SOFTER EDGES (rounded corners + gentle depth) ============ */ :root { --radius: 12px; --radius-sm: 7px; } .project, .viz-card, .lab-stack, .gis-fig { border-radius: var(--radius); box-shadow: 0 1px 2px var(--shadow), 0 14px 34px -26px var(--shadow); } .btn, .bar-track, .tl-bullets code { border-radius: var(--radius-sm); } .tl-tag { border-radius: 4px; } /* ============ INTERACTIVE ASKER MAP ============ */ .gis-map-fig { display: flex; flex-direction: column; } .asker-map { height: 460px; width: 100%; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); } .map-fallback { display: flex; align-items: center; justify-content: center; height: 100%; padding: 1rem; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); text-align: center; } /* Leaflet's internal panes/controls use z-index up to 1000; without an isolated stacking context they compare directly against the fixed nav's z-index and can paint over it while scrolling. Isolating confines them to the map box. */ .leaflet-container { background: var(--surface); font-family: var(--sans); isolation: isolate; } .map-legend { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-family: var(--mono); font-size: 0.7rem; color: var(--text-soft); line-height: 1.7; box-shadow: 0 2px 10px var(--shadow); } .map-legend .ml-t { display: block; color: var(--accent); margin-bottom: 0.3rem; letter-spacing: 0.08em; } .map-legend .ml-row { display: flex; align-items: center; gap: 0.45rem; } .map-legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; } /* ============ ANALYTICS BLOCKS (Oslo/cities clearly separated from Asker) ============ */ .analytics-block { margin-top: 3.5rem; } .analytics-block:first-of-type { margin-top: 0; } .analytics-subhead { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.85rem; padding-top: 1.75rem; border-top: 1px solid var(--border); margin-bottom: 0.6rem; } .analytics-subhead span { font-family: var(--mono); font-weight: 400; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; } .analytics-note { color: var(--text-soft); font-size: 0.95rem; max-width: 72ch; margin-bottom: 1.5rem; } /* collapsible analytics sections (native
) */ details.acc { margin-top: 2.5rem; } .acc > summary.acc-head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--border); } .acc > summary.acc-head::-webkit-details-marker { display: none; } .acc > summary.acc-head .analytics-subhead { border-top: none; padding-top: 0; margin-bottom: 0; } .acc-head::after { content: ''; flex: none; width: 11px; height: 11px; margin-right: 0.2rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.25s ease; } .acc[open] > summary.acc-head::after { transform: rotate(-135deg); } .acc > summary.acc-head:hover .analytics-subhead { color: var(--accent); } .acc > summary.acc-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .acc-body { padding-top: 1.4rem; } .viz-grid.one-col { grid-template-columns: 1fr; } /* ---- analytics: no forced stretch (kills empty space), richer city bars, growth + explainers ---- */ .viz-grid, .gis-figures { align-items: start; } .bar-row { grid-template-columns: 92px 1fr auto auto; } .bar-track { position: relative; } .bar-spread { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--accent-dim); } .bar-fill { position: absolute; left: 0; top: 0; bottom: 0; } .bar-idx { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); min-width: 9.5ch; text-align: right; } .viz-growth { margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.7rem; } .viz-growth b { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--accent); } .viz-growth span { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); } .sc-explain { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--border); display: grid; gap: 0.6rem; } .sc-explain div { font-size: 0.9rem; color: var(--text-soft); } .sc-explain b { color: var(--accent); font-weight: 500; } .sc-interaction { margin-top: 1.15rem; font-size: 0.96rem; color: var(--text); } /* ============ EMBEDDED EXPLAINER VIDEO ============ */ .video-card { margin-bottom: 2rem; border: 1px solid var(--border); background: var(--bg-2); border-radius: var(--radius); box-shadow: 0 1px 2px var(--shadow), 0 14px 34px -26px var(--shadow); overflow: hidden; } .video-card video { width: 100%; height: auto; display: block; background: #16110d; } .video-card figcaption { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); padding: 0.85rem 1rem; line-height: 1.6; } .video-card figcaption b { color: var(--accent); font-weight: 500; } .video-head { padding: 1.1rem 1.25rem 0.95rem; border-bottom: 1px solid var(--border); } .video-kicker { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; } .video-head h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; } /* ============ PROPERTY-VALUATION DASHBOARD (evEstimat-style) ============ */ .dash { margin-top: 0.5rem; margin-bottom: 2.5rem; border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); } .dash-kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; } .dash-subhead { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; margin: 0.35rem 0 0.5rem; } .dash-addr { font-family: var(--mono); font-size: 0.85rem; color: var(--text-soft); margin-bottom: 1.5rem; } .dash-addr b { color: var(--text); font-weight: 500; } /* shared dashboard card shell: matches .viz-card vocabulary */ .dash-card { border: 1px solid var(--border); background: var(--bg-2); border-radius: var(--radius); box-shadow: 0 1px 2px var(--shadow), 0 14px 34px -26px var(--shadow); padding: 1.6rem 1.75rem; } .dash-card-head { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem; } /* grid: estimate full-width on top, then 2-col (left stack + map), table, strip */ .dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; } .dash-full { grid-column: 1 / -1; } .dash-left { display: flex; flex-direction: column; gap: 1.5rem; } /* ---- 1. Estimate header ---- */ .dash-estimate { display: flex; flex-direction: column; } .dash-est-label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .dash-est-big { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--accent); margin: 0.35rem 0 0.2rem; } .dash-est-unit { font-size: 0.4em; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; } .dash-est-row { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); } .dash-est-cell { display: flex; flex-direction: column; gap: 0.2rem; } .dash-est-k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); } .dash-est-v { font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--text); } .dash-est-yr { color: var(--muted); font-weight: 400; font-size: 0.85em; } .dash-delta.up { color: var(--accent-soft); } .dash-delta.down { color: var(--brown); } .dash-est-honest { font-size: 0.85rem; color: var(--muted); margin-top: 1rem; max-width: 80ch; line-height: 1.55; } /* ---- 2. Nokkelinfo key/value list ---- */ .dash-kv { display: flex; flex-direction: column; } .dash-kv-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.62rem 0; align-items: baseline; } .dash-kv-row + .dash-kv-row { border-top: 1px solid var(--border); } .dash-kv-k { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); } .dash-kv-v { font-family: var(--display); font-weight: 500; font-size: 0.95rem; color: var(--text); text-align: right; } /* ---- 3. Area score gauge + hazard bars ---- */ .dash-gauge { margin-bottom: 1.3rem; } .dash-gauge-num { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--accent); } .dash-gauge-max { font-size: 0.42em; font-weight: 500; color: var(--muted); margin-left: 0.35rem; } .dash-gauge-label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--text-soft); margin: 0.35rem 0 0.7rem; } .dash-gauge-track { height: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .dash-gauge-fill { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--brown), var(--accent)); } .dash-haz-head { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.7rem; } .dash-haz-row { display: grid; grid-template-columns: 78px 1fr 3ch; gap: 0.7rem; align-items: center; margin-bottom: 0.55rem; } .dash-haz-k { font-family: var(--mono); font-size: 0.78rem; color: var(--text-soft); } .dash-haz-track { height: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .dash-haz-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--accent-soft); } .dash-haz-v { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); text-align: right; } .dash-score-note { font-size: 0.78rem; color: var(--muted); margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); line-height: 1.55; } /* ---- 4. Comparable-sales table ---- */ .dash-comps-wrap { overflow-x: auto; } .dash-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.82rem; } .dash-table th { text-align: left; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .dash-table td { padding: 0.62rem 0.85rem; border-bottom: 1px solid var(--border); color: var(--text-soft); white-space: nowrap; } .dash-table .num { text-align: right; } .dash-table td.dash-dist-self { text-align: center; color: var(--muted); } .dash-row-subject { background: var(--accent-dim); } .dash-row-subject td { color: var(--text); font-weight: 500; } .dash-row-subject td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .dash-row-review td { background: rgba(192, 138, 78, 0.12); } .dash-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 0.08em 0.45em; border-radius: 4px; margin-left: 0.4rem; vertical-align: middle; } .dash-tag.warn { background: var(--accent-soft); color: var(--bg); } /* ---- 5. Mini map ---- */ .dash-map { height: 360px; width: 100%; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); } .dash-map-fig { display: flex; flex-direction: column; height: 100%; } .dash-map-cap { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 0.75rem; line-height: 1.5; } .dash-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1.2rem; margin-top: 0.85rem; font-family: var(--mono); font-size: 0.72rem; color: var(--text-soft); } .dash-map-leg { display: flex; align-items: center; gap: 0.45rem; } .dash-map-key { width: 13px; height: 13px; border-radius: 999px; box-sizing: border-box; background: #FBF6EF; border: 3px solid var(--accent); } .dash-map-ramp { width: 66px; height: 10px; border-radius: 999px; border: 1px solid var(--border); background: linear-gradient(90deg, #E8D3A0, #D6A95F, #B5762F, #8A5A36, #5A3A24); } .dash-map-hint { color: var(--muted); } /* ---- 6. Model-quality strip ---- */ .dash-ms-kicker { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 1.1rem; } .dash-ms-grid { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; } .dash-ms-item { display: flex; flex-direction: column; } .dash-ms-num { font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--accent); } .dash-ms-num.warn { color: var(--accent-soft); } .dash-ms-lbl { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); margin-top: 0.45rem; line-height: 1.5; } .dash-ms-honest { font-size: 0.92rem; color: var(--text); margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); max-width: 80ch; } .dash-source { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-top: 1.25rem; letter-spacing: 0.02em; } /* ---- tabbed workspace ---- */ .dash-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 1px solid var(--border); margin: 1.4rem 0 1.9rem; } .dash-tab { appearance: none; border: 1px solid transparent; border-bottom: none; background: transparent; font-family: var(--mono); font-size: 0.92rem; color: var(--muted); padding: 0.65rem 1.1rem 0.8rem; cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: -1px; display: flex; flex-direction: column; gap: 0.18rem; line-height: 1.2; transition: color 0.15s, background 0.15s; } .dash-tab:hover { color: var(--text); background: var(--accent-dim); } .dash-tab-sub { font-size: 0.64rem; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; } .dash-tab.is-active { color: var(--accent); background: var(--bg-2); border-color: var(--border); font-weight: 600; } .dash-tab.is-active .dash-tab-sub { color: var(--accent-soft); } .dash-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .dash-panel { display: none; } .dash-panel.is-active { display: block; } /* ---- last-12-months area analysis ---- */ .an-head { margin-bottom: 1.6rem; } .an-headline { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; font-family: var(--mono); font-size: 1.02rem; color: var(--text); } .an-big { font-family: var(--display); font-weight: 800; font-size: 2.5rem; color: var(--accent); line-height: 1; } .an-sub { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-top: 0.55rem; line-height: 1.55; } .an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .an-grid .dash-full { grid-column: 1 / -1; } .an-rows { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .an-row { display: grid; grid-template-columns: 8.5ch 1fr 12ch; align-items: center; gap: 0.7rem; } .an-row-k { font-family: var(--mono); font-size: 0.73rem; color: var(--muted); } .an-track { height: 7px; background: var(--accent-dim); border-radius: 999px; overflow: hidden; } .an-fill { display: block; height: 100%; width: var(--w); background: var(--accent-soft); border-radius: 999px; } .an-row.is-mean .an-fill { background: var(--accent); } .an-row.is-mean .an-row-k, .an-row.is-mean .an-row-v { color: var(--text); font-weight: 600; } .an-row-v { font-family: var(--mono); font-size: 0.82rem; color: var(--text-soft); text-align: right; } .an-missing-head { display: block; font-family: var(--mono); font-size: 0.74rem; color: var(--text); margin-bottom: 0.6rem; } .an-missing-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem 0.6rem; } .an-missing-list li { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; } .an-missing-note { font-size: 0.88rem; color: var(--text-soft); margin-top: 0.9rem; line-height: 1.6; max-width: 78ch; } /* ---- GIS choropleth view ---- */ .gis-head { margin-bottom: 1.3rem; } .gis-sub { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-top: 0.55rem; line-height: 1.55; max-width: 78ch; } .gis-map { height: 480px; border-radius: var(--radius-sm); overflow: hidden; } .gis-legend { display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem; margin-top: 1rem; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } .gis-leg-item { display: flex; align-items: center; gap: 0.45rem; } .gis-leg-sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); } .gis-leg-dot { width: 9px; height: 9px; border-radius: 999px; border: 1px solid var(--brown); background: rgba(58, 42, 28, 0.55); } @media (max-width: 760px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } .an-grid { grid-template-columns: minmax(0, 1fr); } .dash-tab-sub { display: none; } .dash-tab { font-size: 0.85rem; padding: 0.6rem 0.85rem; } .gis-map { height: 380px; } }