/* ============================================================ CRAFTSMAN SCIENTIST — Design System Isagani Julian Hernandez III | Data Portfolio Fonts: Playfair Display · Inter · DM Mono (loaded in ) ============================================================ */ /* ─── Variables ─────────────────────────────────────────────── */ :root { --cream: #F5F0E8; --surface: #FDFAF5; --terracotta: #C4622D; --ink: #1C1917; --smoke: #6B6560; --sage: #7A8C6E; --parchment: #E8E0D0; --shadow-sm: 0 2px 8px rgba(28, 25, 23, 0.07); --shadow-md: 0 6px 24px rgba(28, 25, 23, 0.11); --shadow-lg: 0 16px 48px rgba(28, 25, 23, 0.15); --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; } /* ─── Reset / Base ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Override Tachyons/Ananke body defaults */ body, body.avenir, body.craftsman-body { margin: 0; background: var(--cream) !important; color: var(--ink); font-family: 'Inter', sans-serif !important; font-size: 1rem; line-height: 1.65; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; } a { color: var(--terracotta); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--ink); } /* ─── Navigation ─────────────────────────────────────────────── */ header, header.bg-black, .bg-black { background: var(--cream) !important; border-bottom: 1px solid var(--parchment); } nav[role="navigation"] { width: min(1100px, calc(100% - 2rem)); margin: 0 auto; padding: 0; } /* Custom nav inner layout */ .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; flex-wrap: wrap; } .nav-brand { font-family: 'Playfair Display', serif !important; font-size: 1.1rem !important; font-weight: 700; color: var(--ink) !important; text-decoration: none; text-transform: none !important; letter-spacing: -0.01em !important; white-space: nowrap; } .nav-brand:hover { color: var(--terracotta) !important; background: none; } .nav-links { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; } nav[role="navigation"] a, .nav-links a { font-family: 'DM Mono', monospace !important; font-size: 0.76rem !important; text-transform: uppercase; letter-spacing: 0.1em; color: var(--smoke) !important; padding: 0.35rem 0.7rem; border-radius: 6px; transition: color 0.2s ease, background 0.2s ease; text-decoration: none; display: inline-block; } nav[role="navigation"] a:hover, .nav-links a:hover { color: var(--ink) !important; background: var(--parchment); } .nav-active { color: var(--terracotta) !important; } /* LinkedIn + Contact CTA links in nav */ .nav-cta { border: 1px solid var(--parchment) !important; border-radius: 999px !important; padding: 0.32rem 0.75rem !important; } .nav-cta:hover { border-color: var(--terracotta) !important; color: var(--terracotta) !important; background: rgba(196, 98, 45, 0.06) !important; } .nav-contact { background: var(--terracotta) !important; color: #fff !important; border-color: var(--terracotta) !important; } .nav-contact:hover { background: #a84f24 !important; border-color: #a84f24 !important; color: #fff !important; } /* Hamburger toggle (mobile) */ .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s; } /* ─── Main layout ────────────────────────────────────────────── */ main, main.pb7 { width: min(1100px, calc(100% - 2rem)); margin: 0 auto; padding-bottom: 5rem !important; } /* ─── Glass Card (warm edition) ──────────────────────────────── */ .glass-card { background: var(--surface); border: 1px solid var(--parchment); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.75rem; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; animation: section-in 0.4s ease both; } .glass-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* ─── Typography utilities ───────────────────────────────────── */ .eyebrow { font-family: 'DM Mono', monospace; font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--terracotta); margin: 0 0 0.5rem; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: var(--ink); margin: 0.1rem 0 0.3rem; line-height: 1.2; } code { font-family: 'DM Mono', monospace; font-size: 0.92em; } /* ─── Home page shell ────────────────────────────────────────── */ .maker-shell { padding: 2rem 0 4rem; } .home-clean { display: grid; gap: 1.5rem; max-width: 1040px; margin: 0 auto; } .home-clean > *:nth-child(2) { animation-delay: 0.06s; } .home-clean > *:nth-child(3) { animation-delay: 0.12s; } .home-clean > *:nth-child(4) { animation-delay: 0.18s; } .home-clean > *:nth-child(5) { animation-delay: 0.24s; } .default-single-wrap { max-width: 920px; margin: 0 auto; padding: 2rem 0 0; } .default-single-header { margin-bottom: 1.5rem; } .default-single-header h1 { margin-bottom: 0.35rem; } .analytics-page { display: grid; gap: 1.5rem; max-width: 1040px; margin: 0 auto; padding: 2rem 0 0; } .analytics-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1.25rem; align-items: start; } .analytics-hero h1 { margin: 0.25rem 0 0.75rem; } .analytics-hero-copy { margin: 0; max-width: 60ch; color: var(--smoke); } .analytics-status-panel { background: var(--cream); border: 1px solid var(--parchment); border-radius: var(--radius-md); padding: 1.25rem; } .analytics-status-label, .analytics-helper { font-family: 'DM Mono', monospace; font-size: 0.76rem; letter-spacing: 0.08em; } .analytics-status-label { display: block; margin-bottom: 0.5rem; text-transform: uppercase; color: var(--terracotta); } .analytics-status-panel strong { display: block; font-size: 1.15rem; margin-bottom: 0.65rem; } .analytics-status-panel p { margin-top: 0; } .analytics-helper { color: var(--smoke); text-transform: none; } .analytics-dashboard-card { overflow: hidden; } .analytics-dashboard-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; flex-wrap: wrap; } .analytics-dashboard-frame-wrap { border: 1px solid var(--parchment); border-radius: var(--radius-md); overflow: hidden; background: #fff; } .analytics-dashboard-frame { width: 100%; min-height: 680px; border: 0; } /* ─── Hero ───────────────────────────────────────────────────── */ .home-hero { padding: 2.5rem 2.5rem 2rem; } .home-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.1; color: var(--ink); margin: 0.4rem 0 0.9rem; } .home-hero > p { font-size: 1.05rem; color: var(--smoke); max-width: 62ch; margin: 0 0 0; line-height: 1.6; } /* ─── Impact stats row ───────────────────────────────────────── */ .impact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 1.75rem 0 1.5rem; background: var(--cream); border: 1px solid var(--parchment); border-radius: var(--radius-sm); overflow: hidden; } .impact-stat { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.25rem 1.5rem; border-right: 1px solid var(--parchment); } .impact-stat:last-child { border-right: none; } .impact-stat .stat-label { font-family: 'DM Mono', monospace; font-size: 0.73rem; color: var(--smoke); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; } .big-number { display: block; font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 700; color: var(--terracotta); line-height: 1; } /* ─── Hero CTAs ──────────────────────────────────────────────── */ .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; } .analytics-story-grid, .analytics-kpi-grid, .analytics-taxonomy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; } .analytics-story-card, .analytics-kpi-card, .analytics-taxonomy > div, .analytics-progress-card { background: var(--surface); border: 1px solid var(--parchment); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.25rem; } .analytics-progress-card { margin: 1.5rem 0 2rem; background: linear-gradient(135deg, rgba(196, 98, 45, 0.08), rgba(122, 140, 110, 0.08)), var(--surface); } .analytics-progress-card h2 { margin-top: 0; margin-bottom: 0.65rem; } .analytics-progress-card p:last-child { margin-bottom: 0; } .analytics-story-card h2, .analytics-kpi-card h3, .analytics-taxonomy h3 { margin-top: 0; margin-bottom: 0.65rem; } .analytics-kpi-label { display: inline-block; margin-bottom: 0.7rem; font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta); } .btn-primary { background: var(--terracotta); color: #fff !important; border-radius: 999px; padding: 0.72rem 1.6rem; font-weight: 600; font-size: 0.9rem; text-decoration: none; border: 1.5px solid var(--terracotta); transition: background 0.2s ease, transform 0.2s ease; display: inline-block; } .btn-primary:hover { background: #a84f24; border-color: #a84f24; color: #fff !important; transform: translateY(-2px); } .btn-secondary { background: transparent; color: var(--ink) !important; border: 1.5px solid var(--parchment); border-radius: 999px; padding: 0.72rem 1.6rem; font-weight: 500; font-size: 0.9rem; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; display: inline-block; } .btn-secondary:hover { border-color: var(--terracotta); color: var(--terracotta) !important; transform: translateY(-2px); } @media (max-width: 820px) { .analytics-hero { grid-template-columns: 1fr; } .analytics-story-grid, .analytics-kpi-grid, .analytics-taxonomy { grid-template-columns: 1fr; } .analytics-dashboard-frame { min-height: 520px; } } /* ─── Meta info row ──────────────────────────────────────────── */ .home-meta-row { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-meta-card { padding: 1.25rem 1.5rem; } .home-meta-card .eyebrow { margin-bottom: 0.35rem; } .home-meta-card p { margin: 0; color: var(--ink); font-size: 0.95rem; font-weight: 500; } /* ─── Featured projects section ──────────────────────────────── */ .featured-card { padding: 2rem 2.25rem; } .featured-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .featured-head > div { flex: 1; } .featured-head a { font-family: 'DM Mono', monospace; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--smoke); border-bottom: 1px solid var(--parchment); padding-bottom: 0.1rem; white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease; } .featured-head a:hover { color: var(--terracotta); border-color: var(--terracotta); } .featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .building-section { padding: 2rem 2.25rem; } .building-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .building-card { background: var(--cream); border: 1px solid var(--parchment); border-radius: var(--radius-sm); padding: 1.35rem; } .building-card h3 { margin: 0 0 0.45rem; font-size: 1.18rem; } .building-card p { margin: 0; color: var(--smoke); font-size: 0.92rem; line-height: 1.6; } .building-link { display: inline-block; margin-top: 0.85rem; font-weight: 600; } .building-label { display: inline-block; margin: 0 0 0.7rem; font-family: 'DM Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; } .building-label-active { color: var(--terracotta); } .building-label-muted { color: var(--smoke); } .building-tag { display: inline-block; margin-top: 0.9rem; font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--ink); border: 1px solid var(--parchment); border-radius: 999px; background: var(--surface); padding: 0.35rem 0.65rem; } /* ─── Project tiles (home featured + any .project-tile) ─────── */ .project-tile { position: relative; background: var(--cream); border: 1px solid var(--parchment); border-radius: var(--radius-sm); padding: 1.35rem; text-decoration: none !important; color: var(--ink); display: block; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .project-tile:hover { transform: translateY(-4px); border-color: var(--terracotta); box-shadow: var(--shadow-md); color: var(--ink); } .project-kicker { font-family: 'DM Mono', monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); margin: 0 0 0.55rem; } .project-tile h3, .project-tile h2 { font-family: 'Playfair Display', serif; font-size: 1.15rem; line-height: 1.25; color: var(--ink); margin: 0 0 0.6rem; } .project-tile > p { font-size: 0.9rem; color: var(--smoke); margin: 0; line-height: 1.5; } /* ─── "Beyond the screen" section ───────────────────────────── */ .beyond-section { padding: 2rem 2.25rem; } .beyond-section .section-title { margin-bottom: 0.75rem; } .interests-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.25rem; } .interest-card { padding: 1.25rem; border-radius: var(--radius-sm); background: var(--cream); border: 1px solid var(--parchment); } /* Stitch-inspired dashed border */ .craft-border { border: 2px dashed rgba(196, 98, 45, 0.45) !important; } .interest-card h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--ink); margin: 0 0 0.55rem; } .interest-card p { font-size: 0.88rem; color: var(--smoke); margin: 0; line-height: 1.55; } .beyond-inline-copy { margin: 0.25rem 0 0; max-width: 68ch; color: var(--smoke); font-size: 0.98rem; line-height: 1.65; } /* ─── SafeRoute Demo ─────────────────────────────────────────── */ .demo-disclosure { padding: 2rem 2.25rem; } .toolkit-subtext { color: var(--smoke); font-size: 0.93rem; margin-top: 0.2rem; margin-bottom: 1rem; } .demo-kpis { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.25rem; } .kpi-card { border: 1px solid var(--parchment); border-radius: var(--radius-sm); padding: 1rem 1.1rem; background: var(--cream); } .kpi-card p { margin: 0; font-family: 'DM Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--smoke); } .kpi-card strong { display: block; margin-top: 0.3rem; font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--terracotta); line-height: 1; } .demo-dashboard { display: grid; gap: 1rem; grid-template-columns: 300px 1fr; } .demo-controls { border: 1px solid var(--parchment); border-radius: var(--radius-sm); padding: 1.1rem; background: var(--cream); display: flex; flex-direction: column; gap: 1rem; } .demo-controls label { display: flex; flex-direction: column; gap: 0.4rem; font-family: 'DM Mono', monospace; font-size: 0.78rem; color: var(--smoke); text-transform: uppercase; letter-spacing: 0.07em; } .demo-controls select { font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--ink); background: var(--surface); border: 1px solid var(--parchment); border-radius: 6px; padding: 0.45rem 0.6rem; text-transform: none; letter-spacing: 0; width: 100%; } .demo-controls input[type="range"] { width: 100%; accent-color: var(--terracotta); border: none; background: none; padding: 0; cursor: pointer; } .demo-map-wrap { border: 1px solid var(--parchment); border-radius: var(--radius-sm); background: var(--cream); padding: 0.5rem; /* No overflow:hidden — Leaflet uses absolute positioning for tiles */ } #geo-map { height: 360px; /* Keep border-radius off geo-map itself — Leaflet clips its own canvas */ border-radius: 0; border: none; z-index: 0; } .mini-lab-output { margin-top: 0.75rem; border-top: 1px solid var(--parchment); padding-top: 0.75rem; } .mini-lab-output p { margin: 0.3rem 0; font-family: 'DM Mono', monospace; font-size: 0.74rem; color: var(--smoke); line-height: 1.55; text-transform: none; letter-spacing: 0; } #risk-error { color: var(--terracotta); } /* ─── Projects list page ─────────────────────────────────────── */ .project-shell { padding: 2rem 0 4rem; } .project-shell .list-header { padding: 2.25rem 2.5rem; border-radius: var(--radius-md); } .project-shell .list-header h1 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin: 0.5rem 0 0.85rem; color: var(--ink); } .project-shell .list-header p { color: var(--smoke); max-width: 65ch; margin: 0; font-size: 1.02rem; } .project-page-featured { margin-top: 1.5rem; } /* ─── Flagship tiles (projects list) ────────────────────────── */ .flagship-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; align-items: stretch; } .flagship-tile { position: relative; background: var(--surface); border: 1px solid var(--parchment); border-radius: var(--radius-md); padding: 4.75rem 1.75rem 1.75rem; min-height: 320px; display: flex; flex-direction: column; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .flagship-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--terracotta); } .flagship-tile .project-kicker { margin-bottom: 0.4rem; } .flagship-tile h2 { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--ink); margin: 0 0 0.75rem; line-height: 1.2; } .flagship-tile > p { color: var(--smoke); font-size: 0.92rem; line-height: 1.55; flex: 1; margin: 0 0 0.75rem; } /* ─── Impact badge ───────────────────────────────────────────── */ .impact-badge { padding: 0.6rem 0.75rem; border: 1px solid var(--parchment); border-radius: var(--radius-sm); background: var(--cream); } .impact-corner { position: absolute; top: 14px; right: 14px; margin: 0; min-width: 130px; z-index: 2; text-align: right; } .impact-value { font-family: 'Playfair Display', serif; font-size: 1.85rem; font-weight: 700; color: var(--terracotta); line-height: 1; margin: 0; } .impact-label { font-family: 'DM Mono', monospace; font-size: 0.68rem; color: var(--smoke); text-transform: uppercase; letter-spacing: 0.07em; margin: 0.2rem 0 0; } .compact-badge .impact-value { font-size: 1.25rem; } .compact-badge .impact-label { font-size: 0.63rem; } /* ─── Tech pills ─────────────────────────────────────────────── */ .chip-row, .tech-pill-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.75rem; } .tech-pill { font-family: 'DM Mono', monospace; font-size: 0.7rem; border-radius: 999px; padding: 0.28rem 0.62rem; border: 1px solid transparent; } .pill-lang { color: #1e4d7b; border-color: rgba(30, 77, 123, 0.35); background: rgba(30, 77, 123, 0.08); } .pill-ml { color: #5a3e8c; border-color: rgba(90, 62, 140, 0.35); background: rgba(90, 62, 140, 0.07); } .pill-viz { color: #4e6141; border-color: rgba(78, 97, 65, 0.4); background: rgba(122, 140, 110, 0.1); } .pill-other { color: var(--smoke); border-color: var(--parchment); background: var(--cream); } /* ─── Project action buttons ─────────────────────────────────── */ .project-actions { margin-top: auto; padding-top: 0.85rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .action-btn { font-family: 'DM Mono', monospace; font-size: 0.72rem; text-decoration: none; border-radius: 999px; padding: 0.4rem 0.8rem; border: 1px solid var(--parchment); transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease; display: inline-block; } .action-btn:hover { transform: translateY(-2px); } .code-btn { color: var(--smoke); background: var(--cream); } .code-btn:hover { border-color: var(--sage); color: var(--sage); } .case-btn { color: var(--terracotta); background: rgba(196, 98, 45, 0.06); border-color: rgba(196, 98, 45, 0.3); } .case-btn:hover { border-color: var(--terracotta); background: rgba(196, 98, 45, 0.12); color: var(--terracotta); } /* ─── Bento / secondary project cards ───────────────────────── */ .project-cards, .bento-case-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1.5rem; } .bento-case-grid .project-card, .project-card { position: relative; background: var(--surface); border: 1px solid var(--parchment); border-radius: var(--radius-md); padding: 3.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; min-height: 280px; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--terracotta); } .project-card h2 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--ink); margin: 0.2rem 0 0.6rem; line-height: 1.25; } .project-card h2 a { text-decoration: none; color: var(--ink); } .project-card h2 a:hover { color: var(--terracotta); } .project-card > p { color: var(--smoke); font-size: 0.9rem; line-height: 1.5; flex: 1; margin: 0 0 0.5rem; } .project-meta { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--smoke); margin: 0; } /* ─── Project single page ────────────────────────────────────── */ .project-single-wrap { max-width: 760px; margin: 3rem auto 0; padding: 0 1rem; } .project-single-header { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--parchment); } .back-link { display: inline-block; font-family: 'DM Mono', monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--smoke); margin-bottom: 1.25rem; transition: color 0.2s ease; } .back-link:hover { color: var(--terracotta); } .single-section-label { font-family: 'DM Mono', monospace; font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--terracotta); margin-bottom: 0.6rem; display: block; } .project-single-header h1 { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 3.5vw, 2.8rem); color: var(--ink); margin: 0 0 0.75rem; line-height: 1.1; } .project-single-date { display: block; font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--smoke); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.5rem; } .project-single-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--parchment); } /* Single page content typography */ .project-single-content, .nested-copy-line-height { font-family: 'Inter', sans-serif; line-height: 1.72; color: var(--ink); } .project-single-content h1, .project-single-content h2, .project-single-content h3, .project-single-content h4, .nested-copy-line-height h1, .nested-copy-line-height h2, .nested-copy-line-height h3 { font-family: 'Playfair Display', serif; color: var(--ink); } .project-single-content h2, .nested-copy-line-height h2 { font-size: 1.65rem; margin-top: 2.75rem; margin-bottom: 0.75rem; padding-top: 2rem; border-top: 1px solid var(--parchment); } .project-single-content h3, .nested-copy-line-height h3 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--terracotta); } .project-single-content p, .nested-copy-line-height p, .nested-copy-line-height li { color: var(--ink); } .project-single-content a, .nested-links a { color: var(--terracotta); text-decoration-color: rgba(196, 98, 45, 0.35); text-underline-offset: 0.2rem; } .project-single-content a:hover, .nested-links a:hover { color: var(--ink); } .project-single-content strong { color: var(--ink); font-weight: 600; } .project-single-content em { font-style: italic; color: var(--smoke); } .project-single-content code { font-family: 'DM Mono', monospace; font-size: 0.87em; background: var(--parchment); border-radius: 4px; padding: 0.15em 0.42em; color: var(--terracotta); } .project-single-content pre { background: var(--surface); border: 1px solid var(--parchment); border-radius: var(--radius-sm); padding: 1.35rem; overflow-x: auto; margin: 1.5rem 0; } .project-single-content pre code { background: none; padding: 0; color: var(--ink); font-size: 0.88rem; } .project-single-content ul, .project-single-content ol { padding-left: 1.5rem; } .project-single-content li { margin-bottom: 0.45rem; color: var(--ink); } /* Ananke content wrappers for single page */ .flex-l.mw8 { max-width: 760px !important; margin: 3rem auto 0 !important; padding: 0 1rem !important; display: block !important; } .mt4.w-100 { padding-bottom: 2rem; border-bottom: 1px solid var(--parchment); margin-bottom: 2rem; } .mt4.w-100 h1 { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 3.5vw, 2.8rem); color: var(--ink); margin: 0.5rem 0; } .mt4.w-100 aside { font-family: 'DM Mono', monospace; font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--terracotta); } .mt4.w-100 time { display: block; font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--smoke); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.4rem; } /* ─── About page layout ──────────────────────────────────────── */ .about-wrap { max-width: 820px; margin: 2.5rem auto 0; display: grid; gap: 1.5rem; } .about-header { padding: 2.25rem 2.5rem; } .about-header-inner { display: flex; align-items: center; gap: 2rem; } .about-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center top; border: 3px solid var(--parchment); flex-shrink: 0; } .about-header-text { flex: 1; } @media (max-width: 560px) { .about-header-inner { flex-direction: column; align-items: flex-start; gap: 1rem; } .about-photo { width: 90px; height: 90px; } } .about-header h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0.4rem 0 1.25rem; line-height: 1.1; } .about-header-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; } .btn-resume { background: var(--sage) !important; border-color: var(--sage) !important; } .btn-resume:hover { background: #5e6d56 !important; border-color: #5e6d56 !important; } .about-content { padding: 2rem 2.5rem; line-height: 1.72; } .about-content h1 { font-size: 2rem; margin-top: 0; } .about-content h2 { font-size: 1.45rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--parchment); margin-bottom: 0.75rem; } .about-content h3 { font-size: 1.1rem; margin-top: 1.5rem; color: var(--terracotta); } .about-content p, .about-content li { color: var(--ink); } .about-content strong { color: var(--ink); font-weight: 600; } /* ─── Default single page ────────────────────────────────────── */ .default-single-wrap { max-width: 760px; margin: 3rem auto 0; padding: 0 1rem; } .default-single-header { margin-bottom: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--parchment); } .default-single-header h1 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin: 0; } /* ─── About page ─────────────────────────────────────────────── */ .about-solve-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .about-solve-card { border: 1px solid var(--parchment); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; background: var(--surface); } .about-solve-icon { font-family: 'DM Mono', monospace; font-size: 0.73rem; letter-spacing: 0.1em; color: var(--terracotta); margin: 0 0 0.45rem; text-transform: uppercase; } .about-solve-card h3 { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--ink); margin: 0 0 0.45rem; } .about-solve-card p { font-size: 0.88rem; color: var(--smoke); margin: 0; line-height: 1.55; } .about-tag-groups { display: grid; gap: 1rem; margin-top: 1rem; } .about-tag-groups section h3 { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--ink); margin: 0 0 0.5rem; } .about-pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .about-pill { font-family: 'DM Mono', monospace; font-size: 0.74rem; border: 1px solid var(--parchment); border-radius: 999px; background: var(--surface); color: var(--ink); padding: 0.3rem 0.68rem; display: inline-block; } .about-section-gap { height: 1.5rem; } .about-link-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; } .about-link-buttons a { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.88rem; color: var(--ink) !important; background: var(--surface); border: 1.5px solid var(--parchment); border-radius: 999px; padding: 0.52rem 1.1rem; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; display: inline-block; } .about-link-buttons a:hover { transform: translateY(-2px); border-color: var(--terracotta); color: var(--terracotta) !important; } .certification-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .certification-card { border: 1px solid var(--parchment); border-radius: var(--radius-sm); background: var(--surface); padding: 1.25rem; box-shadow: var(--shadow-sm); } .certification-badge { display: inline-block; margin: 0 0 0.6rem; padding: 0.28rem 0.62rem; border-radius: 999px; background: rgba(196, 98, 45, 0.08); border: 1px solid rgba(196, 98, 45, 0.22); color: var(--terracotta); font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } .certification-card h3 { margin: 0 0 0.35rem; font-size: 1.08rem; } .certification-issuer { margin: 0 0 0.55rem; font-weight: 600; color: var(--ink); } .certification-note { margin: 0; color: var(--smoke); font-size: 0.9rem; line-height: 1.6; } .certification-image { display: block; width: 120px; max-width: 100%; height: auto; margin: 0.9rem 0 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--parchment); background: var(--surface); } .certification-link { display: inline-block; margin-top: 0.8rem; font-family: 'DM Mono', monospace; font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--terracotta); border-bottom: 1px solid rgba(196, 98, 45, 0.3); padding-bottom: 0.1rem; } .certification-link:hover { color: var(--ink); border-color: var(--ink); } /* ─── Footer ─────────────────────────────────────────────────── */ footer, footer.bg-black, .site-footer { background: var(--cream) !important; border-top: 1px solid var(--parchment); margin-top: 3rem; padding: 2.5rem 0 2rem; } footer *, footer a { color: var(--smoke) !important; font-family: 'Inter', sans-serif; font-size: 0.85rem; } footer a:hover { color: var(--terracotta) !important; } .footer-inner { width: min(1100px, calc(100% - 2rem)); margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .footer-brand { display: flex; flex-direction: column; gap: 0.2rem; } .footer-name { font-family: 'Playfair Display', serif !important; font-size: 1rem !important; font-weight: 700; color: var(--ink) !important; } .footer-title { font-family: 'DM Mono', monospace !important; font-size: 0.72rem !important; color: var(--smoke) !important; text-transform: uppercase; letter-spacing: 0.07em; } .footer-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; } .footer-nav a { font-family: 'DM Mono', monospace !important; font-size: 0.73rem !important; text-transform: uppercase; letter-spacing: 0.09em; color: var(--smoke) !important; padding: 0.25rem 0.6rem; border-radius: 4px; border: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .footer-nav a:hover { color: var(--terracotta) !important; border-color: var(--parchment); } .footer-copy { font-family: 'DM Mono', monospace; font-size: 0.68rem; color: var(--smoke) !important; margin: 0; text-transform: uppercase; letter-spacing: 0.07em; } /* ─── iframes ────────────────────────────────────────────────── */ iframe { border: 1px solid var(--parchment); border-radius: var(--radius-sm); background: var(--surface); } .case-study-note { margin: 0.85rem 0 1.1rem; color: var(--smoke); font-size: 0.92rem; line-height: 1.6; } /* ─── Animations ─────────────────────────────────────────────── */ @keyframes section-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } /* ─── Responsive ─────────────────────────────────────────────── */ @media (max-width: 860px) { .home-meta-row, .interests-grid, .about-solve-grid, .certification-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .demo-dashboard { grid-template-columns: 1fr; } .flagship-grid { grid-template-columns: 1fr; } .about-wrap { max-width: 100%; margin: 1.5rem auto 0; } } @media (max-width: 640px) { .nav-toggle { display: flex; } .nav-links { display: none; width: 100%; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0; } nav[role="navigation"].nav-open .nav-links { display: flex; } .nav-links a { width: 100%; text-align: left; } .about-header, .about-content { padding: 1.5rem; } .home-meta-row, .interests-grid, .about-solve-grid, .certification-grid, .demo-kpis, .featured-grid, .project-cards, .bento-case-grid { grid-template-columns: 1fr; } .impact-row { grid-template-columns: 1fr; } .impact-stat { border-right: none; border-bottom: 1px solid var(--parchment); } .impact-stat:last-child { border-bottom: none; } .home-hero { padding: 1.75rem 1.5rem 1.5rem; } .home-hero h1 { font-size: 2rem; } .home-clean { gap: 1.1rem; } .glass-card { padding: 1.25rem; } .featured-card, .beyond-section, .demo-disclosure { padding: 1.5rem; } .impact-corner { position: static; margin-bottom: 0.85rem; text-align: left; } .flagship-tile { padding-top: 1.75rem; } #geo-map { height: 280px; } .project-single-wrap, .flex-l.mw8 { margin-top: 1.5rem !important; } .proof-strip { grid-template-columns: 1fr; } .proof-stat { border-right: none; border-bottom: 1px solid var(--parchment); padding: 1rem 1.25rem; } .proof-stat:last-child { border-bottom: none; } .project-grid { grid-template-columns: 1fr; } .project-filter-bar { align-items: flex-start; flex-direction: column; } .single-outcome-block { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } /* ============================================================ NEW COMPONENT STYLES — Proof strip, outcome-first cards, single page outcome block ============================================================ */ /* ─── Hero refinements ───────────────────────────────────────── */ .hero-value-prop { font-size: 1.05rem; color: var(--smoke); max-width: 60ch; line-height: 1.6; margin: 0 0 0; } /* ─── Proof strip (standalone, outside hero card) ────────────── */ .proof-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--parchment); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; animation: section-in 0.4s ease both; animation-delay: 0.06s; } .proof-stat { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.5rem 1.75rem; border-right: 1px solid var(--parchment); } .proof-stat:last-child { border-right: none; } /* ─── Outcome-first project tile (homepage featured grid) ────── */ .project-tile { position: relative; background: var(--cream); border: 1px solid var(--parchment); border-radius: var(--radius-sm); padding: 1.35rem; display: flex; flex-direction: column; gap: 0.1rem; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .project-tile:hover { transform: translateY(-4px); border-color: var(--terracotta); box-shadow: var(--shadow-md); } .project-outcome { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; color: var(--terracotta); line-height: 1.2; margin: 0 0 0.2rem; } .project-subtitle { font-family: 'DM Mono', monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); margin: 0 0 0.65rem; } .project-desc { font-size: 0.9rem; color: var(--smoke); line-height: 1.55; margin: 0; flex: 1; } .project-cta { display: inline-block; margin-top: 1rem; font-family: 'DM Mono', monospace; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--terracotta); border-bottom: 1px solid rgba(196, 98, 45, 0.35); padding-bottom: 0.1rem; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; } .project-cta:hover { color: var(--ink); border-color: var(--ink); } /* ─── Projects list page — unified grid ──────────────────────── */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; align-items: start; } .project-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding: 1rem 1.25rem; } .project-filter-label { font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smoke); } .project-filter-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .project-filter-btn { font-family: 'DM Mono', monospace; font-size: 0.74rem; color: var(--smoke); background: var(--cream); border: 1px solid var(--parchment); border-radius: 999px; padding: 0.45rem 0.8rem; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .project-filter-btn:hover { color: var(--ink); border-color: var(--terracotta); transform: translateY(-1px); } .project-filter-btn.is-active { color: #fff; background: var(--terracotta); border-color: var(--terracotta); } .project-card-full { background: var(--surface); border: 1px solid var(--parchment); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.1rem; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; animation: section-in 0.4s ease both; } .project-card-full:hover { transform: translateY(-4px); border-color: var(--terracotta); box-shadow: var(--shadow-md); } .project-card-full .project-outcome { font-size: 1.3rem; } .project-card-full .project-desc { margin-bottom: 0.5rem; } .project-track-row { margin-top: 0.15rem; } /* ─── Single project page — outcome block ────────────────────── */ .single-outcome-block { display: flex; align-items: center; gap: 2rem; background: var(--cream); border: 1px solid var(--parchment); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin-bottom: 1.75rem; flex-wrap: wrap; } .single-impact { display: flex; flex-direction: column; gap: 0.2rem; min-width: 100px; } .single-impact-value { font-family: 'Playfair Display', serif; font-size: 2.75rem; font-weight: 700; color: var(--terracotta); line-height: 1; } .single-impact-label { font-family: 'DM Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--smoke); } .single-outcome-phrase { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--ink); margin: 0; line-height: 1.35; flex: 1; } .single-tags { margin-top: 1rem; padding-top: 0; margin-bottom: 0; } .role-fit-banner { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.95rem 0 0; padding: 0.38rem 0.72rem; border-radius: 999px; border: 1px solid rgba(196, 98, 45, 0.24); background: rgba(196, 98, 45, 0.07); color: var(--smoke); font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em; } .role-fit-banner span { color: var(--terracotta); }