/* ================================================================ SOURCE LAYER: assets/styles.css Consolidated into site-v16.css to reduce production requests while preserving cascade order and all original maintenance comments. ================================================================ */ :root{color-scheme:light;--bg:#f8faf7;--bg2:#f0f5f2;--surface:rgba(255,255,255,.82);--surface2:#fff;--text:#0f172a;--muted:#334155;--faint:#64748b;--border:rgba(15,23,42,.12);--accent:#10b981;--accent2:#34d399;--cyan:#06b6d4;--gold:#c79539;--shadow:0 18px 60px rgba(15,23,42,.10);--shadow2:0 28px 90px rgba(15,23,42,.16);--radius:28px;--ease:cubic-bezier(.16,1,.3,1)} html[data-theme=dark]{color-scheme:dark;--bg:#05070a;--bg2:#0a0d12;--surface:rgba(12,18,22,.78);--surface2:#0d1518;--text:#f8fafc;--muted:#d5e3df;--faint:#9fb1ab;--border:rgba(255,255,255,.13);--accent:#10b981;--accent2:#34d399;--cyan:#67e8f9;--gold:#f0c46c;--shadow:0 24px 80px rgba(0,0,0,.32);--shadow2:0 36px 110px rgba(0,0,0,.42)} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px;background:var(--bg);overflow-x:hidden}body{margin:0;background:radial-gradient(900px circle at 8% 6%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 50%),radial-gradient(800px circle at 92% 12%,color-mix(in srgb,var(--cyan) 9%,transparent),transparent 48%),linear-gradient(180deg,var(--bg),var(--bg2) 48%,var(--bg));color:var(--text);font-family:Inter,Plus Jakarta Sans,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}a{color:inherit}button,a{touch-action:manipulation}button{font:inherit}.skip-link{position:fixed;z-index:999;left:16px;top:16px;transform:translateY(-140%);background:var(--text);color:var(--bg);padding:.7rem 1rem;border-radius:999px;font-weight:800}.skip-link:focus{transform:none}.ambient{position:fixed;inset:0;z-index:-3;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--text) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 4%,transparent) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.8) 55%,transparent 100%)}.cursor-aura{position:fixed;width:420px;height:420px;left:var(--mx,50vw);top:var(--my,20vh);translate:-50% -50%;border-radius:999px;pointer-events:none;z-index:-2;background:radial-gradient(circle,rgba(16,185,129,.18),rgba(52,211,153,.08) 38%,transparent 70%);mix-blend-mode:multiply;filter:blur(18px);transition:opacity .25s}html[data-theme=dark] .cursor-aura{mix-blend-mode:screen;background:radial-gradient(circle,rgba(16,185,129,.24),rgba(6,182,212,.10) 42%,transparent 72%)}.dynamic-island{position:fixed;z-index:100;left:50%;top:16px;transform:translateX(-50%);display:flex;gap:.7rem;align-items:center;max-width:min(88vw,720px);padding:.72rem 1.05rem;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--surface2) 76%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(140%);transition:width .3s var(--ease),background .3s,color .3s}.dynamic-island i{width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);box-shadow:0 0 20px var(--accent)}.dynamic-island span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800;font-size:.86rem;color:var(--text)}.hero,.section,.footer{width:min(1440px,calc(100% - 32px));margin-inline:auto}.hero{min-height:100svh;padding:90px 0 80px}.topline{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 0 2rem}.brand{display:flex;gap:.8rem;align-items:center;text-decoration:none}.brand strong{display:grid;place-items:center;width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--cyan));color:#02110c}.brand span{font-weight:800}.nav-actions{display:flex;align-items:center;gap:.75rem}.theme-toggle,.cta,.primary,.secondary,.mail,.filter-row button,.flag-tabs button,.to-top{border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);padding:.78rem 1rem;text-decoration:none;box-shadow:0 0 0 1px transparent,0 0 26px color-mix(in srgb,var(--accent) 8%,transparent);transition:transform .22s var(--ease),box-shadow .22s,background .22s}.theme-toggle:hover,.cta:hover,.primary:hover,.secondary:hover,.mail:hover,.filter-row button:hover,.flag-tabs button:hover,.to-top:hover{transform:translateY(-2px);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 38%,transparent),var(--shadow)}.primary,.cta{background:linear-gradient(135deg,var(--accent),var(--cyan));color:#04110d;font-weight:900}.secondary,.mail{background:color-mix(in srgb,var(--surface2) 70%,transparent)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) 420px;gap:2rem;align-items:center}.eyebrow,.section-title span,.type-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:900}.hero h1,.section-title h2,.closing-card h2{font-family:"Instrument Serif","Space Grotesk",ui-serif,Georgia,serif;font-weight:680;letter-spacing:-.05em;line-height:.9;margin:.3rem 0 1rem}.hero h1{font-size:clamp(3.4rem,9vw,9rem)}.section-title h2,.closing-card h2{font-size:clamp(2.5rem,6vw,6.5rem)}.lead,.section-title p,.closing-card p{font-size:clamp(1rem,1.35vw,1.35rem);line-height:1.65;color:var(--muted);max-width:980px}.badge-cloud,.hero-links,.filter-row{display:flex;flex-wrap:wrap;gap:.7rem}.glow-badge{border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));border-radius:999px;padding:.56rem .76rem;background:color-mix(in srgb,var(--surface2) 62%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 22%,transparent);animation:badgeGlow 3s ease-in-out infinite}.hero-links{margin-top:1.35rem}.signature-card{position:relative;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:2rem;border:1px solid var(--border);border-radius:36px;background:linear-gradient(160deg,color-mix(in srgb,var(--surface2) 86%,transparent),color-mix(in srgb,var(--accent) 7%,transparent));box-shadow:var(--shadow2);overflow:hidden}.signature-card:before{content:"";position:absolute;inset:-20% -10% auto;height:52%;border-radius:0 0 50% 50%;background:radial-gradient(circle,var(--accent),transparent 62%);opacity:.18}.signature-card span{font-size:4.5rem;font-weight:950;letter-spacing:-.12em}.signature-card strong{font-size:1.35rem}.signature-card p,.signature-card small{color:var(--muted)}.checkmark{width:min(260px,60vw);aspect-ratio:1;border:18px solid var(--text);border-radius:50%;display:grid;place-items:center}.checkmark svg{width:70%;height:70%}.checkmark path{fill:none;stroke:var(--text);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}.metric-card,.value-card,.project-card,.skill-card,.framework-card,.panel,.closing-card{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 70%,transparent),var(--surface));box-shadow:var(--shadow);padding:1.35rem;position:relative;overflow:hidden;transform-style:preserve-3d}.metric-card strong{font-size:clamp(2.4rem,5vw,4.5rem);letter-spacing:-.08em}.metric-card span,.panel-head span{display:block;font-weight:950}.metric-card p,.metric-card em,.project-card p,.skill-card p,.framework-card p,.muted{color:var(--muted);line-height:1.55}.complete-badge{display:inline-block;margin-top:.8rem;color:var(--accent);font-style:normal;font-weight:900;opacity:0;transform:translateY(8px);transition:.35s}.metric-card.complete .complete-badge{opacity:1;transform:none}.flow-diagram{margin:2rem 0;display:flex;align-items:center;gap:.7rem;overflow-x:auto;padding:1rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);scrollbar-width:thin}.flow-node{min-width:max-content;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));background:color-mix(in srgb,var(--surface2) 72%,transparent);color:var(--text);border-radius:999px;padding:.78rem 1rem;font-weight:900;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 15%,transparent)}.flow-node.active{background:linear-gradient(135deg,var(--accent),var(--cyan));color:#04110d}.flow-node span{margin-right:.5rem;opacity:.7}.flow-arrow{color:var(--accent);font-style:normal;animation:pulseArrow 1.6s infinite}.flow-detail{padding:1rem 1.25rem;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--muted)}.section{padding:clamp(5rem,9vw,10rem) 0;position:relative}.section:before{content:"";display:block;height:1px;margin-bottom:clamp(2rem,4vw,4rem);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 58%,transparent),transparent);animation:sweep 4s infinite}.section-title{position:relative;z-index:2;margin-bottom:2rem}.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.value-card span{color:var(--accent);font-weight:950}.value-card h3,.project-card h3,.skill-card h3,.framework-card h3{font-size:1.35rem;margin:.6rem 0}.viz-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:1rem;margin-top:1.25rem}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.segmented{display:flex;gap:.4rem;flex-wrap:wrap}.segmented button,.filter-row button,.flag-tabs button{padding:.55rem .8rem;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:999px}.segmented button.active,.filter-row button.active,.flag-tabs button.active{background:linear-gradient(135deg,var(--accent),var(--cyan));color:#04110d;font-weight:900}.risk-totals{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin:1rem 0}.risk-totals b{border:1px solid var(--border);border-radius:20px;padding:1rem;background:var(--surface2)}.risk-totals span{font-size:2.4rem}.risk-totals small{display:block;color:var(--muted)}.risk-row{display:grid;grid-template-columns:160px 1fr 54px;gap:.7rem;align-items:center;margin:.62rem 0}.risk-row span{font-size:.86rem;color:var(--muted)}.risk-bar{height:14px;border-radius:999px;background:color-mix(in srgb,var(--text) 8%,transparent);position:relative;overflow:hidden}.risk-bar i,.risk-bar b{position:absolute;inset-block:0;left:0;width:var(--w);border-radius:999px}.risk-bar i{background:color-mix(in srgb,var(--gold) 70%,transparent)}.risk-bar b{background:linear-gradient(90deg,var(--accent),var(--cyan))}.radar{width:100%;max-height:320px}.radar-grid circle,.radar-grid line{fill:none;stroke:var(--border)}.radar polygon{fill:rgba(16,185,129,.24);stroke:var(--accent);stroke-width:2}.flagship-grid{display:grid;grid-template-columns:260px 1fr;gap:1rem}.flag-tabs{display:grid;gap:.7rem;align-content:start;position:sticky;top:84px}.flag-tabs button{text-align:left;border-radius:20px}.flag-tabs span{display:block;color:var(--accent);font-weight:950}.flag-panel{display:none}.flag-panel.active{display:block}.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0}.mini-metrics b{border:1px solid var(--border);border-radius:18px;padding:.75rem;background:var(--surface2)}.mini-metrics span{display:block;font-size:1.5rem}.mini-metrics small{color:var(--muted)}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:20px;max-width:100%;background:var(--surface2);position:relative}.table-wrap:after{content:"Scroll →";position:sticky;right:8px;bottom:6px;float:right;font-size:.72rem;color:var(--faint);background:var(--surface2);padding:.25rem .55rem;border-radius:999px}table{border-collapse:collapse;width:100%;min-width:760px}th,td{text-align:left;border-bottom:1px solid var(--border);padding:.85rem}th{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}td{color:var(--muted)}.heatmap{height:360px;position:relative;border:1px solid var(--border);border-radius:24px;background:linear-gradient(135deg,rgba(16,185,129,.12),transparent 42%),linear-gradient(45deg,transparent,rgba(199,149,57,.12));overflow:hidden}.axis{position:absolute;font-size:.75rem;color:var(--faint);font-weight:900}.axis.x{right:1rem;bottom:1rem}.axis.y{left:1rem;top:1rem}.heat-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);max-width:160px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));background:var(--surface2);color:var(--text);box-shadow:0 0 20px color-mix(in srgb,var(--accent) 25%,transparent);border-radius:999px;padding:.5rem .75rem;font-size:.78rem;font-weight:900}.heat-node.active{background:linear-gradient(135deg,var(--accent),var(--cyan));color:#04110d}.heat-detail{color:var(--muted)}.donut{width:220px;height:220px;margin:1rem auto;border-radius:50%;background:conic-gradient(var(--accent) 0 40%, var(--cyan) 40% 70%, var(--gold) 70% 100%);display:grid;place-items:center}.donut:before{content:"";position:absolute}.donut span{display:grid;place-items:center;width:128px;height:128px;border-radius:50%;background:var(--surface2);font-size:3rem;font-weight:950}.legend{display:grid;gap:.6rem}.legend b{font-size:.85rem;color:var(--muted)}.legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;background:var(--accent);margin-right:.5rem}.legend b:nth-child(2) i{background:var(--cyan)}.legend b:nth-child(3) i{background:var(--gold)}.filter-row{margin-bottom:1rem}.track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(320px,420px);gap:1rem;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;padding:.25rem .25rem 1rem;scrollbar-width:thin}.track.compact{grid-auto-columns:minmax(300px,360px)}.track>*{scroll-snap-align:start}.project-card small,.framework-card small,.skill-card small{color:var(--accent);font-weight:900}.project-card span,.framework-card span,.skill-card em{display:block;color:var(--faint);font-style:normal;margin-top:.8rem}.track-hint{color:var(--faint);font-weight:900;margin:.4rem 0 1rem}.framework-card{text-decoration:none;min-height:260px}.closing-card{text-align:center;padding:clamp(2rem,6vw,5rem)}.closing-card h2{max-width:1000px;margin-inline:auto}.closing-card p{margin-inline:auto}.footer{padding:4rem 0 2rem;border-top:1px solid var(--border)}.footer-brand{max-width:760px}.footer-brand span{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--cyan));color:#04110d;font-weight:950}.footer-brand b{display:block;margin-top:1rem;font-size:1.45rem}.footer-brand p{color:var(--muted)}.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}.footer a{display:block;margin:.5rem 0;color:var(--muted)}.social-grid{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}.social-dot{display:grid!important;place-items:center;width:58px;height:58px;border-radius:999px;background:color-mix(in srgb,var(--surface2) 88%,transparent);border:1px solid var(--border);box-shadow:var(--shadow);text-decoration:none!important;color:var(--text)!important;font-weight:950;text-transform:uppercase;transition:.22s var(--ease)}.social-dot:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 0 24px color-mix(in srgb,var(--accent) 30%,transparent),var(--shadow2)}.copyright{color:var(--faint);margin-top:2rem}.tilt{transition:transform .2s var(--ease),box-shadow .2s}.tilt:hover{box-shadow:var(--shadow2)}.ripple{position:fixed;border-radius:50%;width:16px;height:16px;translate:-50% -50%;background:rgba(16,185,129,.38);pointer-events:none;z-index:999;animation:ripple .62s ease-out forwards}@keyframes ripple{to{width:160px;height:160px;opacity:0}}@keyframes badgeGlow{0%,100%{box-shadow:0 0 12px color-mix(in srgb,var(--accent) 18%,transparent)}50%{box-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}}@keyframes pulseArrow{50%{transform:translateX(4px);opacity:.55}}@keyframes sweep{0%,100%{opacity:.35}50%{opacity:1}}@media (pointer:coarse){.cursor-aura{left:50%!important;top:22%!important;opacity:.65}.tilt:hover{transform:none}}@media (max-width:1100px){.hero-grid,.viz-grid,.flagship-grid{grid-template-columns:1fr}.signature-card{min-height:420px}.metrics,.value-grid{grid-template-columns:repeat(2,1fr)}.flag-tabs{position:relative;top:auto;display:flex;overflow-x:auto}.risk-row{grid-template-columns:130px 1fr 48px}}@media (max-width:720px){.hero,.section,.footer{width:min(100% - 20px,1440px)}.dynamic-island{top:10px;max-width:calc(100% - 20px);font-size:.75rem}.topline{padding-top:3rem}.hero{padding-top:48px}.hero h1{font-size:clamp(3.1rem,18vw,5rem)}.section-title h2,.closing-card h2{font-size:clamp(2.2rem,13vw,4rem)}.metrics,.value-grid,.risk-totals,.footer-columns,.mini-metrics{grid-template-columns:1fr}.signature-card{padding:1.25rem}.checkmark{width:180px;border-width:12px}.track{grid-auto-columns:minmax(86vw,1fr)}.risk-row{grid-template-columns:1fr;gap:.25rem}.nav-actions{gap:.35rem}.cta{display:none}.hero-links a{width:100%;text-align:center}.flow-diagram{border-radius:26px}.flow-arrow{display:none}.flow-node{min-width:46%;white-space:normal}.heatmap{height:420px}.heat-node{font-size:.7rem;max-width:120px}.social-dot{width:52px;height:52px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* ========================================================================== */ /* V11 EXECUTIVE LUXE REFINEMENT — compact v9 editorial proportions */ /* ========================================================================== */ :root{ --shell:1320px; --nav-h:72px; --serif:"Iowan Old Style","Baskerville","Baskerville Old Face","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif; --ink:#111827; --mint:#0f8a67; --cyan-deep:#0d8397; --pearl:#fbfcfb; } html[data-theme=dark]{--ink:#f8fafc;--pearl:#08100f} body{font-family:var(--sans);font-size:16px;line-height:1.55} .hero,.section,.footer{width:min(var(--shell),calc(100% - 40px))} .hero{min-height:auto;padding:96px 0 68px} .executive-nav{position:relative;z-index:110;display:grid;grid-template-columns:minmax(250px,1fr) auto minmax(220px,1fr);gap:1rem;align-items:center;padding:.75rem 0 2.8rem} .brand-premium span{display:grid;line-height:1.15}.brand-premium span b{font-size:.96rem}.brand-premium span small{margin-top:.3rem;color:var(--accent-deep);font-weight:800;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase}.brand-premium strong{width:38px;height:38px;border-radius:13px;background:#0f172a;color:white;box-shadow:none;position:relative}.brand-premium strong:after{content:"";position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--surface2)} .nav-center{display:flex;align-items:center;gap:.1rem;padding:.32rem;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--surface2) 82%,transparent);box-shadow:0 10px 28px rgba(15,23,42,.07)} .nav-chip{padding:.62rem .88rem;border-radius:999px;text-decoration:none;color:var(--muted);font-size:.78rem;font-weight:700;transition:.22s var(--ease)} .nav-chip:hover{color:var(--text);background:var(--surface)}.nav-chip.active{background:#0f172a;color:#fff;box-shadow:0 8px 20px rgba(15,23,42,.16)} .hero-v9{grid-template-columns:minmax(0,1.45fr) minmax(340px,.78fr);gap:3.1rem;align-items:center} .focus-pill{display:inline-flex;align-items:center;gap:.65rem;min-width:250px;padding:.5rem .85rem;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,var(--surface2)),color-mix(in srgb,var(--cyan) 5%,var(--surface2)));color:var(--muted);box-shadow:inset 0 1px rgba(255,255,255,.6)} .focus-pill i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}.focus-pill span{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:900}.focus-pill b{font-size:.75rem;color:var(--faint);font-weight:700} .hero .eyebrow{margin-top:1.8rem;color:#53637a;font-size:.75rem}.hero h1{font-family:var(--serif);font-size:clamp(4rem,6.6vw,7rem);line-height:.92;letter-spacing:-.055em;max-width:850px;margin:.5rem 0 1.6rem;font-weight:600}.premium-text{background:linear-gradient(105deg,#0f172a 0%,#087f5b 35%,#0d8397 78%);-webkit-background-clip:text;background-clip:text;color:transparent}html[data-theme=dark] .premium-text{background:linear-gradient(105deg,#f8fafc 0%,#6ee7b7 42%,#67e8f9 80%);-webkit-background-clip:text;background-clip:text;color:transparent} .hero .lead{font-size:clamp(1.02rem,1.35vw,1.25rem);line-height:1.7;max-width:860px}.badge-cloud{margin-top:1.15rem}.glow-badge{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;font-weight:800;padding:.48rem .72rem;animation:none;box-shadow:0 8px 18px rgba(15,23,42,.04)}.glow-badge:hover{box-shadow:0 0 18px color-mix(in srgb,var(--accent) 26%,transparent);transform:translateY(-1px)} .hero-links{margin-top:1.65rem}.primary,.secondary,.mail{font-size:.82rem;font-weight:800;padding:.82rem 1.18rem}.primary{background:#0f8a67;color:#fff}.primary:hover{background:#0b7357}.secondary{background:rgba(255,255,255,.72)}html[data-theme=dark] .secondary{background:rgba(255,255,255,.05)} .availability-rail{margin-top:1.8rem;padding-top:1.15rem;border-top:1px solid var(--border);display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:1rem;font-size:.74rem;color:var(--muted)}.availability-rail b{color:#087f5b;text-transform:uppercase;letter-spacing:.08em}.availability-rail a{text-decoration:none;color:var(--muted)} .portfolio-snapshot{border:1px solid var(--border);border-radius:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 93%,transparent),color-mix(in srgb,var(--surface) 94%,transparent));box-shadow:0 26px 70px rgba(15,23,42,.13);padding:1.55rem;min-height:520px}.snapshot-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid var(--border)}.snapshot-head>span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:900;color:var(--muted)}.snapshot-head b{display:flex;align-items:center;gap:.4rem;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--surface2));color:#0b7b5a;border-radius:999px;padding:.38rem .66rem;font-size:.65rem;text-transform:uppercase;letter-spacing:.05em}.snapshot-head b i{width:7px;height:7px;background:var(--accent);border-radius:50%}.snapshot-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:1.2rem}.snapshot-metrics article{border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface2) 76%,transparent);padding:1rem;min-height:122px}.snapshot-metrics strong{font-family:var(--serif);display:block;font-size:2.1rem;line-height:1;color:var(--text)}.snapshot-metrics span{display:block;margin-top:.6rem;font-size:.76rem;color:var(--muted)}.snapshot-metrics p{margin:.2rem 0 0;color:var(--muted);font-size:.75rem}.snapshot-metrics .complete-badge{display:none}.snapshot-model{margin-top:1rem;border:1px solid var(--border);border-radius:16px;padding:1rem;background:color-mix(in srgb,var(--surface2) 72%,transparent)}.snapshot-model small{display:block;font-size:.63rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:900}.snapshot-model p{margin:.55rem 0 0;font-size:.82rem;color:var(--muted)} .operating-shell{margin-top:2.3rem;padding:1rem 1.15rem;border:1px solid var(--border);border-radius:22px;background:color-mix(in srgb,var(--surface2) 68%,transparent);box-shadow:0 16px 40px rgba(15,23,42,.05)}.operating-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.2rem .3rem .65rem}.operating-head span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:900;color:var(--muted)}.operating-head small{color:var(--faint)}.operating-shell .flow-diagram{margin:.2rem 0 .8rem;border:0;background:transparent;padding:.35rem}.operating-shell .flow-detail{border:0;background:transparent;padding:.3rem;color:var(--muted);font-size:.82rem}.flow-node{font-size:.75rem;padding:.68rem .82rem;box-shadow:none}.flow-node.active{background:#0f8a67;color:white}.flow-arrow{opacity:.65} .dynamic-island{opacity:0;pointer-events:none;transform:translate(-50%,-18px) scale(.96);transition:opacity .25s,transform .25s var(--ease)}.dynamic-island.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)} .section{padding:clamp(5.2rem,7.8vw,8.2rem) 0}.section-title{max-width:920px;margin-bottom:2.3rem}.section-title h2{font-family:var(--serif);font-size:clamp(2.9rem,5.2vw,5.1rem);line-height:.98;letter-spacing:-.045em}.section-title p{font-size:1rem;line-height:1.7;max-width:800px}.value-grid{gap:.85rem}.value-card,.project-card,.skill-card,.framework-card,.panel{border-color:color-mix(in srgb,var(--border) 76%,transparent);box-shadow:0 15px 42px rgba(15,23,42,.07)}.value-card{padding:1.2rem}.value-card h3{font-family:var(--serif);font-size:1.35rem;line-height:1.1}.value-card p{font-size:.83rem;line-height:1.55}.viz-grid{gap:1rem}.panel{padding:1.2rem}.flagship-grid{border-radius:24px;overflow:hidden} .track{grid-auto-columns:minmax(330px,390px);gap:.85rem;padding-bottom:.8rem}.track.compact{grid-auto-columns:minmax(300px,340px)}.project-card,.framework-card,.skill-card{min-height:250px}.track-hint{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase} .contact-shell{border-radius:34px;border:1px solid var(--border);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 5%,var(--surface2)),var(--surface2) 58%,color-mix(in srgb,var(--cyan) 4%,var(--surface2)));box-shadow:0 26px 80px rgba(15,23,42,.12);padding:2.4rem}.contact-intro{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:1.3rem 1.2rem 2rem;border-bottom:1px solid var(--border)}.contact-intro span,.contact-copy>span{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:#087f5b;font-weight:900}.contact-intro p{margin:0;color:var(--muted);line-height:1.65}.contact-main{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;padding:2.5rem 1.2rem 1.8rem}.contact-copy h2{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:.55rem 0 1rem}.contact-copy p{color:var(--muted);max-width:670px}.copy-email{cursor:pointer}.mandate-card{padding:1.6rem;border:1px solid var(--border);border-radius:24px;background:color-mix(in srgb,var(--surface2) 78%,transparent);box-shadow:0 18px 45px rgba(15,23,42,.06)}.mandate-card small{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:900}.mandate-card h3{font-family:var(--serif);font-size:1.7rem;line-height:1.07;margin:.6rem 0 1rem}.mandate-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.8rem;color:var(--muted);font-size:.83rem}.mandate-card li{padding-left:1.2rem;position:relative}.mandate-card li:before{content:"✓";position:absolute;left:0;color:#0f8a67;font-weight:900}.evidence-shortcuts{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;padding:1.3rem 1.2rem;border-top:1px solid var(--border)}.evidence-shortcuts a{text-decoration:none;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface2) 70%,transparent);padding:1rem;min-height:100px;transition:.22s var(--ease)}.evidence-shortcuts a:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,23,42,.08)}.evidence-shortcuts small{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:#087f5b;font-weight:900}.evidence-shortcuts span{display:block;margin-top:.55rem;color:var(--muted);font-size:.78rem}.contact-statement{margin:1.2rem;border-top:1px solid var(--border);padding-top:1.5rem}.contact-statement span{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}.contact-statement h2{font-family:var(--serif);font-size:clamp(2rem,3vw,3rem);margin:.4rem 0}.contact-statement p{color:var(--muted)} .footer{padding:4rem 0 2rem}.social-showcase{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;border:1px solid var(--border);border-radius:28px;background:linear-gradient(145deg,var(--surface2),color-mix(in srgb,var(--accent) 3%,var(--surface2)));box-shadow:0 22px 65px rgba(15,23,42,.10);padding:1.8rem 2rem;margin-bottom:2.8rem}.social-showcase span{font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:#087f5b;font-weight:900}.social-showcase h2{font-family:var(--serif);font-size:2rem;line-height:1.05;margin:.45rem 0}.social-showcase p{margin:0;color:var(--muted);max-width:620px}.social-icons{display:flex;gap:.8rem;flex-wrap:wrap}.social-icons a{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#eee9e6;border:1px solid rgba(15,23,42,.04);box-shadow:none;color:#262129;text-decoration:none;transition:.22s var(--ease)}html[data-theme=dark] .social-icons a{background:rgba(255,255,255,.08);color:#f8fafc}.social-icons a:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 12px 28px rgba(15,23,42,.12)}.social-icons svg{width:22px;height:22px;fill:currentColor}.footer-grid{display:grid;grid-template-columns:1.15fr .8fr .95fr .9fr;gap:2.2rem;align-items:start}.footer-col h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.footer-col a{display:block;margin:.48rem 0;color:var(--muted);font-size:.82rem}.footer-email{color:#087f5b!important;font-weight:800}.evidence-chip{display:inline-block;margin-top:.8rem;border:1px solid var(--border);border-radius:8px;padding:.45rem .6rem;font-size:.63rem;text-transform:uppercase;letter-spacing:.07em;font-weight:900;color:var(--muted)}.footer-bottom{display:flex;justify-content:space-between;gap:1rem;margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--border);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)} /* Additional executive visual grammar */ .visual-lab{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}.visual-card{border:1px solid var(--border);border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 82%,transparent),var(--surface));padding:1.2rem;box-shadow:0 16px 40px rgba(15,23,42,.06)}.visual-card h3{font-family:var(--serif);font-size:1.35rem;margin:.3rem 0 .9rem}.visual-card>small{font-size:.6rem;text-transform:uppercase;letter-spacing:.09em;color:#087f5b;font-weight:900}.coverage-grid{display:grid;grid-template-columns:110px repeat(4,1fr);gap:5px;font-size:.64rem}.coverage-grid span{padding:.5rem .35rem;border-radius:8px;background:var(--surface2);border:1px solid var(--border);text-align:center}.coverage-grid span.on{background:color-mix(in srgb,var(--accent) 14%,var(--surface2));color:#087f5b;font-weight:800}.cadence{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;position:relative;margin-top:1.5rem}.cadence:before{content:"";position:absolute;top:12px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,#10b981,#06b6d4,#c79539)}.cadence div{position:relative;text-align:center}.cadence i{display:block;margin:auto;width:24px;height:24px;border:5px solid var(--surface2);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--border);position:relative;z-index:2}.cadence b{display:block;margin-top:.6rem;font-size:.68rem}.cadence small{color:var(--faint);font-size:.58rem}.crosswalk{display:grid;grid-template-columns:1.15fr repeat(4,.8fr);gap:4px;font-size:.6rem}.crosswalk span{padding:.52rem .35rem;border:1px solid var(--border);border-radius:7px;text-align:center;background:var(--surface2)}.crosswalk .head{font-weight:900;color:var(--muted)}.crosswalk .dot{background:color-mix(in srgb,var(--accent) 12%,var(--surface2));color:#087f5b;font-weight:900} @media (max-width:1180px){.executive-nav{grid-template-columns:1fr auto}.nav-center{display:none}.hero-v9{grid-template-columns:1fr}.portfolio-snapshot{max-width:760px}.availability-rail{grid-template-columns:1fr 1fr}.availability-rail a{grid-column:1/-1}.evidence-shortcuts{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1.2fr 1fr 1fr}.footer-grid>.footer-col:last-child{grid-column:2/4}.visual-lab{grid-template-columns:1fr 1fr}} @media (max-width:760px){.hero,.section,.footer{width:min(100% - 22px,var(--shell))}.hero{padding-top:76px}.executive-nav{padding-bottom:2rem}.brand-premium span small{display:none}.theme-toggle{width:44px;height:44px;padding:0}.hero h1{font-size:clamp(3.15rem,15vw,5.2rem);line-height:.9}.hero h1 br{display:none}.focus-pill{min-width:0;width:100%;justify-content:flex-start}.portfolio-snapshot{min-height:auto}.snapshot-metrics{grid-template-columns:1fr 1fr}.availability-rail{grid-template-columns:1fr}.contact-intro,.contact-main{grid-template-columns:1fr}.contact-shell{padding:1rem}.evidence-shortcuts{grid-template-columns:1fr 1fr;padding-inline:.6rem}.social-showcase{grid-template-columns:1fr;padding:1.4rem}.social-icons{justify-content:flex-start}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>.footer-col:last-child{grid-column:auto}.footer-bottom{flex-direction:column}.visual-lab{grid-template-columns:1fr}.dynamic-island{max-width:calc(100% - 24px)}.operating-head{align-items:flex-start;flex-direction:column}.flow-node{min-width:45%}} @media (max-width:520px){.snapshot-metrics,.evidence-shortcuts,.footer-grid{grid-template-columns:1fr}.social-icons{gap:.55rem}.social-icons a{width:48px;height:48px}.contact-statement{margin:.8rem}.hero .lead{font-size:1rem}.hero-links{display:grid}.hero-links a,.hero-links button{width:100%;text-align:center}.footer-grid>.footer-col:last-child{grid-column:auto}} /* Motion without framework dependencies: transform/opacity only, no layout shifts. */ .revealable{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.revealable.is-visible{opacity:1;transform:none}.project-card.revealable,.framework-card.revealable,.skill-card.revealable{transition-delay:var(--reveal-delay,0ms)} @media(prefers-reduced-motion:reduce){.revealable{opacity:1!important;transform:none!important}.dynamic-island{transition:none}.focus-pill b{transition:none}} /* Persistent v9-style executive navigation on desktop/tablet. */ .executive-nav{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100vw;padding:.72rem max(20px,calc((100vw - var(--shell))/2));background:color-mix(in srgb,var(--surface2) 92%,transparent);border-bottom:1px solid var(--border);box-shadow:0 8px 28px rgba(15,23,42,.08);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px)} .hero{padding-top:126px}.dynamic-island{display:none} @media(max-width:760px){.executive-nav{padding:.6rem 12px;grid-template-columns:1fr auto}.brand-premium strong{width:42px;height:42px}.brand-premium span b{font-size:.88rem}.nav-actions .cta{display:none}.hero{padding-top:102px}.dynamic-island{display:flex;top:70px}.dynamic-island.is-visible{opacity:1;pointer-events:auto}.dynamic-island:not(.is-visible){opacity:0;pointer-events:none}} .hero h1{font-size:clamp(3.8rem,5.7vw,6.2rem);max-width:920px} @media(max-width:760px){.hero h1{font-size:clamp(3rem,14vw,4.8rem)}} /* ================================================================ SOURCE LAYER: assets/premium-v12.css Consolidated into site-v16.css to reduce production requests while preserving cascade order and all original maintenance comments. ================================================================ */ /* * AAO Portfolio — Premium Interaction Layer v12 * ------------------------------------------------------------ * Purpose: * - Preserve the proven zero-dependency v11 build and content. * - Add a more premium visual hierarchy, richer spatial depth and safer interaction states. * - Keep all effects CSS/browser-native so Cloudflare Pages and Vercel need no framework adapter. * * Change guide: * - Brand colors live in :root under --lux-*. * - Global corner softness lives under --lux-r*. * - Cursor glow size/intensity is controlled in .cursor-aura. * - 3D hero card positions are controlled by .governance-card:nth-child(...). * - The AI matrix node positions remain inline in index.html so content owners can change data without touching CSS. */ :root { --lux-ink: #0a1110; --lux-ink-2: #0f1816; --lux-paper: #f5f7f3; --lux-paper-2: #eef2ed; --lux-green: #20e0a5; --lux-green-2: #68f7c9; --lux-mint: #b9ffe7; --lux-cyan: #80e9ff; --lux-gold: #d9b36b; --lux-r1: 18px; --lux-r2: 26px; --lux-r3: 36px; --display-font: "Avenir Next", "Segoe UI Variable Display", "SF Pro Display", "Helvetica Neue", Arial, sans-serif; --body-font: "Avenir Next", "Segoe UI Variable Text", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --editorial-font: "Iowan Old Style", "Baskerville", "Times New Roman", serif; --lux-shadow-light: 0 26px 80px rgba(20, 32, 28, .13), 0 2px 10px rgba(20, 32, 28, .05); --lux-shadow-dark: 0 34px 110px rgba(0, 0, 0, .5), inset 0 1px rgba(255,255,255,.035); } html[data-theme="light"] { --lux-panel: rgba(255,255,255,.74); --lux-panel-solid: #fbfcfa; --lux-line: rgba(13, 34, 28, .12); --lux-soft-line: rgba(13, 34, 28, .07); --lux-card: rgba(255,255,255,.86); --lux-card-2: rgba(247,250,246,.92); --lux-copy: #10201b; --lux-copy-soft: #496058; --lux-copy-faint: #71857e; --lux-glow: rgba(32,224,165,.24); --lux-glow-cyan: rgba(128,233,255,.17); } html[data-theme="dark"] { --lux-panel: rgba(8,14,13,.80); --lux-panel-solid: #090f0e; --lux-line: rgba(224,255,245,.13); --lux-soft-line: rgba(224,255,245,.075); --lux-card: rgba(12,21,19,.85); --lux-card-2: rgba(8,15,14,.96); --lux-copy: #f6fbf9; --lux-copy-soft: #bfd0c9; --lux-copy-faint: #81968e; --lux-glow: rgba(32,224,165,.30); --lux-glow-cyan: rgba(128,233,255,.14); } body { font-family: var(--body-font); letter-spacing: -.01em; background: radial-gradient(900px 640px at 9% 3%, color-mix(in srgb, var(--lux-green) 13%, transparent), transparent 63%), radial-gradient(800px 560px at 92% 9%, color-mix(in srgb, var(--lux-cyan) 8%, transparent), transparent 62%), linear-gradient(180deg, var(--bg), var(--bg2) 53%, var(--bg)); } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .52; background-image: linear-gradient(var(--lux-soft-line) 1px, transparent 1px), linear-gradient(90deg, var(--lux-soft-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 84%); } h1, h2, h3, .brand-premium span b, .flow-node, .primary, .secondary, .cta { font-family: var(--display-font); } /* ------------------------------------------------------------ Cursor aura Why it works: app.js continuously writes --mx/--my on fine pointers. This fixed, non-interactive layer turns those coordinates into a soft pool of light. The native cursor stays visible, so discoverability and text selection are preserved. ------------------------------------------------------------ */ .cursor-aura { display: block !important; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: radial-gradient(230px circle at var(--mx, 50vw) var(--my, 40vh), var(--lux-glow), transparent 58%), radial-gradient(70px circle at var(--mx, 50vw) var(--my, 40vh), var(--lux-glow-cyan), transparent 70%); opacity: .86; transition: opacity .2s ease; mix-blend-mode: normal; } html[data-theme="dark"] .cursor-aura { opacity: 1; filter: saturate(118%); } @media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-aura { display: none !important; } } /* ------------------------------------------------------------ Premium fixed navigation ------------------------------------------------------------ */ .executive-nav { width: min(calc(100vw - 28px), 1500px); top: 12px; padding: .58rem .68rem .58rem .75rem; border: 1px solid var(--lux-line); border-radius: 20px; background: color-mix(in srgb, var(--lux-panel-solid) 86%, transparent); box-shadow: 0 10px 38px rgba(13, 30, 25, .10); backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); isolation: isolate; overflow: hidden; } .executive-nav::before { content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 10%, color-mix(in srgb, var(--lux-green) 9%, transparent) 42%, transparent 72%); } .brand-premium strong { background: linear-gradient(145deg, var(--lux-ink), #183129); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.14), 0 8px 22px rgba(11, 35, 27, .18); } html[data-theme="dark"] .brand-premium strong { background: linear-gradient(145deg, #f5fff9, #c7e8dc); color: #06100d; } .nav-chip { position: relative; border-radius: 999px; padding: .62rem .82rem; transition: color .2s ease, background .2s ease, transform .2s ease; } .nav-chip:hover { transform: translateY(-1px); } .nav-chip.active { background: color-mix(in srgb, var(--lux-green) 11%, var(--lux-card)); color: color-mix(in srgb, var(--lux-green) 62%, var(--lux-copy)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lux-green) 23%, var(--lux-line)); } .theme-toggle, .cta, .primary, .secondary, .filter-row button, .segmented button { border-radius: 999px !important; font-weight: 750; letter-spacing: -.02em; } .cta, .primary { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--lux-green) 50%, #07120e) !important; background: radial-gradient(100% 120% at 10% 0%, rgba(255,255,255,.24), transparent 48%), linear-gradient(135deg, #0b1713 0%, #113d2e 55%, #0d7052 100%) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255,255,255,.18), 0 12px 32px rgba(7, 62, 44, .19); } .cta::after, .primary::after { content: ""; position: absolute; width: 56px; height: 160%; top: -30%; left: -80px; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); transition: left .55s var(--ease); } .cta:hover::after, .primary:hover::after { left: calc(100% + 20px); } .secondary, .theme-toggle { border: 1px solid var(--lux-line) !important; background: color-mix(in srgb, var(--lux-card) 92%, transparent) !important; box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 26px rgba(11, 29, 23, .07); } .secondary:hover, .theme-toggle:hover { border-color: color-mix(in srgb, var(--lux-green) 34%, var(--lux-line)) !important; transform: translateY(-2px); } /* ------------------------------------------------------------ Dynamic island — desktop and mobile It becomes visible after the hero begins to leave the viewport. The island is an optional fast-access surface, not a second primary nav. ------------------------------------------------------------ */ .dynamic-island { display: flex !important; position: fixed; z-index: 120; left: 50%; top: 84px; transform: translate(-50%, -16px) scale(.98); opacity: 0; pointer-events: none; width: auto; max-width: min(720px, calc(100vw - 30px)); min-height: 44px; padding: 5px; align-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.11); background: rgba(5, 10, 9, .94); color: #f4fbf8; box-shadow: 0 18px 46px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); transition: opacity .25s ease, transform .32s var(--ease), width .32s var(--ease); } .dynamic-island.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); } .dynamic-island.is-open { border-radius: 24px; } .island-core { display: flex; align-items: center; gap: .65rem; border: 0; color: inherit; background: transparent; cursor: pointer; padding: .55rem .72rem .55rem .58rem; min-width: 0; font: 700 .76rem/1 var(--body-font); } .island-core i { width: 10px; height: 10px; border-radius: 50%; background: var(--lux-green); box-shadow: 0 0 0 5px rgba(32,224,165,.11), 0 0 18px rgba(32,224,165,.8); flex: 0 0 auto; } .island-core span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 430px; } .island-chevron { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #bcd0c8; transition: transform .25s ease; } .dynamic-island.is-open .island-chevron { transform: rotate(180deg); } .island-panel { display: none; min-width: 410px; padding: .3rem .45rem .45rem; border-top: 1px solid rgba(255,255,255,.08); } .dynamic-island.is-open { display: block !important; } .dynamic-island.is-open .island-core { width: 100%; } .dynamic-island.is-open .island-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .island-panel a { text-decoration: none; text-align: center; color: #e7f2ee; padding: .75rem .65rem; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.045); font: 650 .73rem/1 var(--body-font); } .island-panel a:hover { background: rgba(32,224,165,.11); border-color: rgba(32,224,165,.2); } /* ------------------------------------------------------------ Hero — 3D governance deck inspired by premium product landing-page motion, but built from original governance content and CSS transforms. ------------------------------------------------------------ */ .hero { padding-top: 138px; } .hero-grid.hero-v9 { grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr); gap: clamp(2rem, 4vw, 5rem); min-height: min(790px, calc(100vh - 126px)); align-items: center; } .hero-copy { position: relative; z-index: 3; } .hero h1 { font-family: var(--display-font); font-size: clamp(4rem, 6.2vw, 7.2rem); line-height: .89; font-weight: 760; letter-spacing: -.075em; max-width: 980px; text-wrap: balance; } .premium-text { background: linear-gradient(105deg, var(--lux-copy) 3%, color-mix(in srgb, var(--lux-green) 65%, var(--lux-copy)) 68%, color-mix(in srgb, var(--lux-cyan) 54%, var(--lux-copy)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lead { max-width: 780px; font-size: clamp(1.04rem, 1.35vw, 1.24rem); line-height: 1.72; color: var(--lux-copy-soft); } .focus-pill { border: 1px solid color-mix(in srgb, var(--lux-green) 28%, var(--lux-line)); background: color-mix(in srgb, var(--lux-green) 7%, var(--lux-card)); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 10px 32px rgba(14, 55, 42, .07); } .focus-pill i { box-shadow: 0 0 18px color-mix(in srgb, var(--lux-green) 75%, transparent); } .badge-cloud { gap: .55rem; } .glow-badge { padding: .52rem .7rem; border-radius: 999px; border: 1px solid var(--lux-line); background: color-mix(in srgb, var(--lux-card) 86%, transparent); box-shadow: inset 0 1px rgba(255,255,255,.14); color: var(--lux-copy-soft); transition: transform .22s var(--ease), border-color .22s ease, box-shadow .22s ease; } .glow-badge:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lux-green) 35%, var(--lux-line)); box-shadow: 0 10px 28px rgba(13, 48, 37, .08), 0 0 24px rgba(32,224,165,.08); } .availability-rail { border: 1px solid var(--lux-line); border-radius: var(--lux-r1); background: linear-gradient(130deg, color-mix(in srgb, var(--lux-card) 90%, transparent), color-mix(in srgb, var(--lux-green) 4%, var(--lux-card))); box-shadow: 0 14px 36px rgba(12, 35, 28, .06); } .portfolio-snapshot { min-height: 650px; border-radius: var(--lux-r3); border: 1px solid var(--lux-line); overflow: hidden; background: radial-gradient(520px 430px at 50% 36%, color-mix(in srgb, var(--lux-green) 18%, transparent), transparent 60%), linear-gradient(155deg, color-mix(in srgb, var(--lux-card-2) 92%, transparent), color-mix(in srgb, var(--lux-green) 5%, var(--lux-panel-solid))); box-shadow: var(--lux-shadow-light); transform-style: preserve-3d; } html[data-theme="dark"] .portfolio-snapshot { box-shadow: var(--lux-shadow-dark); } .snapshot-head { position: relative; z-index: 9; } .snapshot-head b { color: color-mix(in srgb, var(--lux-green) 72%, var(--lux-copy)); } .governance-stage { --stage-rx: -7deg; --stage-ry: 11deg; position: relative; height: 330px; margin: .4rem 0 1rem; perspective: 1000px; transform-style: preserve-3d; } .governance-deck { position: absolute; inset: 18px 8px 8px; transform-style: preserve-3d; transform: rotateX(var(--stage-rx)) rotateY(var(--stage-ry)); transition: transform .45s var(--ease); } .governance-stage:hover .governance-deck { transition-duration: .12s; } .governance-card { --dx: 0px; --dy: 0px; --dz: 0px; --rot: 0deg; position: absolute; left: 50%; top: 48%; width: 220px; height: 142px; margin: -71px 0 0 -110px; padding: 1rem; border-radius: 22px; border: 1px solid rgba(255,255,255,.44); background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(223,240,233,.52)), rgba(255,255,255,.48); color: #0b1713; box-shadow: 0 22px 52px rgba(10,35,27,.13), inset 0 1px rgba(255,255,255,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform-style: preserve-3d; transform: translate3d(var(--dx), var(--dy), var(--dz)) rotateY(var(--rot)); transition: transform .5s var(--ease), opacity .4s ease, filter .4s ease; } .governance-card::after { content: ""; position: absolute; inset: auto 18px 18px; height: 2px; background: linear-gradient(90deg, var(--lux-green), transparent); border-radius: 999px; } .governance-card small { display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; opacity: .56; } .governance-card strong { display: block; margin-top: 1.2rem; font: 760 1.02rem/1.1 var(--display-font); letter-spacing: -.04em; } .governance-card span { display: block; margin-top: .38rem; font-size: .69rem; opacity: .63; } .governance-card.is-focus { background: radial-gradient(140px 100px at 70% 20%, rgba(255,255,255,.33), transparent 65%), linear-gradient(145deg, #85ffd0, #19d69e 58%, #0aa878); color: #06110d; border-color: rgba(197,255,234,.72); box-shadow: 0 28px 70px rgba(18,192,139,.34), inset 0 1px rgba(255,255,255,.56); } .governance-card:nth-child(1){--dx:-126px;--dy:24px;--dz:0px;--rot:-15deg} .governance-card:nth-child(2){--dx:-84px;--dy:16px;--dz:24px;--rot:-10deg} .governance-card:nth-child(3){--dx:-42px;--dy:8px;--dz:48px;--rot:-5deg} .governance-card:nth-child(4){--dx:0px;--dy:0px;--dz:72px;--rot:0deg} .governance-card:nth-child(5){--dx:42px;--dy:8px;--dz:48px;--rot:5deg} .governance-card:nth-child(6){--dx:84px;--dy:16px;--dz:24px;--rot:10deg} .governance-card:nth-child(7){--dx:126px;--dy:24px;--dz:0px;--rot:15deg} .stage-orbit { position: absolute; left: 50%; top: 48%; width: 410px; height: 170px; transform: translate(-50%, -50%) rotateX(72deg); border: 1px solid color-mix(in srgb, var(--lux-green) 28%, transparent); border-radius: 50%; box-shadow: 0 0 45px rgba(32,224,165,.07); } .stage-orbit::before { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; top: 50%; left: -6px; background: var(--lux-green); box-shadow: 0 0 22px rgba(32,224,165,.7); animation: stageOrbit 7s linear infinite; transform-origin: 211px 0; } @keyframes stageOrbit { to { transform: rotate(360deg); } } .snapshot-metrics { position: relative; z-index: 8; gap: 8px; } .snapshot-metrics article { background: color-mix(in srgb, var(--lux-card) 88%, transparent); border: 1px solid var(--lux-line); border-radius: 18px; box-shadow: inset 0 1px rgba(255,255,255,.17); } .snapshot-metrics strong { font-family: var(--display-font); letter-spacing: -.06em; } .snapshot-model { border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--lux-green) 8%, var(--lux-card)), var(--lux-card)); } /* ------------------------------------------------------------ Cursor-driven operating model The JS maps pointer X to the nearest of six stages; hover/click/focus remain available. ------------------------------------------------------------ */ .operating-shell { border-radius: var(--lux-r3); padding: 1.2rem; border: 1px solid var(--lux-line); background: radial-gradient(560px 210px at var(--flow-x, 12%) 50%, color-mix(in srgb, var(--lux-green) 9%, transparent), transparent 64%), color-mix(in srgb, var(--lux-card) 88%, transparent); box-shadow: var(--lux-shadow-light); overflow: hidden; } html[data-theme="dark"] .operating-shell { box-shadow: var(--lux-shadow-dark); } .operating-head { padding: .5rem .55rem 1rem; } .operating-head span { font-weight: 800; } .operating-head small::before { content: "Move across the model · "; color: color-mix(in srgb, var(--lux-green) 72%, var(--lux-copy)); font-weight: 800; } .flow-diagram { display: grid; grid-template-columns: repeat(11, auto); align-items: center; gap: .45rem; padding: .5rem; } .flow-node { min-width: 0; position: relative; border: 1px solid var(--lux-line); background: color-mix(in srgb, var(--lux-card-2) 90%, transparent); color: var(--lux-copy-soft); border-radius: 16px; padding: .92rem .88rem; cursor: default; transition: transform .26s var(--ease), border-color .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease; } .flow-node span { color: var(--lux-copy-faint); transition: color .2s ease; } .flow-node.active { color: var(--lux-copy); transform: translateY(-4px) scale(1.015); border-color: color-mix(in srgb, var(--lux-green) 45%, var(--lux-line)); background: color-mix(in srgb, var(--lux-green) 9%, var(--lux-card)); box-shadow: 0 14px 34px rgba(11,75,54,.10), 0 0 0 1px rgba(32,224,165,.07) inset; } .flow-node.active span { color: color-mix(in srgb, var(--lux-green) 74%, var(--lux-copy)); } .flow-arrow { color: color-mix(in srgb, var(--lux-green) 48%, var(--lux-copy-faint)); } .flow-detail { min-height: 64px; display: flex; align-items: center; margin: .65rem .5rem .25rem; padding: 1rem 1.15rem; border: 1px solid var(--lux-soft-line); border-radius: 16px; background: linear-gradient(110deg, color-mix(in srgb, var(--lux-green) 6%, var(--lux-card)), color-mix(in srgb, var(--lux-card) 86%, transparent)); font-weight: 650; color: var(--lux-copy-soft); transition: opacity .16s ease, transform .16s ease; } .flow-detail.is-swapping { opacity: .35; transform: translateY(3px); } /* ------------------------------------------------------------ Section rhythm and premium cards ------------------------------------------------------------ */ .section-title span { color: color-mix(in srgb, var(--lux-green) 66%, var(--lux-copy)); } .section-title h2 { font-family: var(--display-font); font-weight: 730; letter-spacing: -.06em; text-wrap: balance; } .value-grid { gap: 14px; } .value-card { border-radius: var(--lux-r2); border: 1px solid var(--lux-line); background: radial-gradient(220px 170px at 110% -10%, color-mix(in srgb, var(--lux-green) 8%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--lux-card) 92%, transparent), color-mix(in srgb, var(--lux-card-2) 88%, transparent)); box-shadow: 0 18px 48px rgba(14, 35, 29, .07); overflow: hidden; } .value-card::after { content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%; right: -80px; top: -80px; border: 1px solid color-mix(in srgb, var(--lux-green) 25%, transparent); } .panel, .visual-card, .project-card, .skill-card, .framework-card { border-color: var(--lux-line) !important; box-shadow: 0 18px 52px rgba(13, 32, 26, .07); } /* ------------------------------------------------------------ Architecture — preserves the content users liked, but makes it spatial and product-like. ------------------------------------------------------------ */ #architecture { position: relative; border-radius: 44px; padding: clamp(2rem, 4vw, 4.4rem); margin-top: 4rem; background: radial-gradient(760px 560px at 7% 8%, rgba(32,224,165,.13), transparent 62%), linear-gradient(150deg, #06100d, #050a09 52%, #081510); color: #f5fbf8; box-shadow: 0 40px 110px rgba(5, 20, 15, .24); overflow: hidden; } #architecture::after { content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(rgba(132,255,213,.13) .7px, transparent .7px); background-size: 15px 15px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 90%); } #architecture > * { position: relative; z-index: 2; } #architecture .section-title span { color: #56f1bd; } #architecture .section-title h2 { color: #fff; font-size: clamp(3rem, 5vw, 5.6rem); max-width: 980px; } #architecture .section-title p { color: #b7cbc3; max-width: 740px; } .flagship-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; margin-top: 2.2rem; border: 1px solid rgba(255,255,255,.12); border-radius: 32px; background: rgba(3, 8, 7, .72); overflow: hidden; box-shadow: inset 0 1px rgba(255,255,255,.03), 0 24px 70px rgba(0,0,0,.28); } .flag-tabs { display: grid; align-content: start; gap: 10px; padding: 1rem; border-right: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(13,27,23,.72), rgba(5,10,9,.2)); } .flag-tabs::before { content: "Integrated modules"; padding: .7rem .7rem .2rem; color: #698c80; font: 700 .66rem/1 var(--body-font); text-transform: uppercase; letter-spacing: .09em; } .flag-tabs button { position: relative; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; text-align: left; min-height: 82px; padding: .8rem 1rem; border: 1px solid transparent; border-radius: 18px; color: #7e9990; background: rgba(255,255,255,.025); transition: .25s var(--ease); } .flag-tabs button::after { content: "↗"; opacity: .42; } .flag-tabs button span { color: #6c877e; font-size: .64rem; } .flag-tabs button.active { color: #f3fff9; background: linear-gradient(135deg, rgba(32,224,165,.12), rgba(32,224,165,.06)); border-color: rgba(32,224,165,.36); box-shadow: 0 12px 34px rgba(0,0,0,.16), 0 0 35px rgba(32,224,165,.07) inset; } .flag-tabs button.active::after { color: #42ebb6; opacity: 1; } .flag-panels { min-width: 0; } .flag-panel { min-height: 620px; padding: clamp(2rem, 4vw, 4rem); color: #d4e4de; background: radial-gradient(460px 420px at 94% 4%, rgba(32,224,165,.07), transparent 68%), transparent; } .flag-panel > small { color: #41e9b3; text-transform: uppercase; letter-spacing: .08em; } .flag-panel h3 { color: #fff; font-size: clamp(2.35rem, 3.7vw, 4.3rem); letter-spacing: -.065em; line-height: .98; max-width: 760px; } .flag-panel > p { color: #b8c9c3; max-width: 820px; font-size: 1.02rem; line-height: 1.7; } .mini-metrics { border-radius: 18px; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.025); overflow: hidden; } .mini-metrics b + b { border-left-color: rgba(255,255,255,.10); } .mini-metrics span { color: #fff; } .mini-metrics small { color: #81998f; } .table-wrap { border: 1px solid rgba(255,255,255,.10); border-radius: 18px; overflow: hidden; background: rgba(4,9,8,.72); } #architecture table { color: #c9dbd4; } #architecture th { color: #779086; background: rgba(255,255,255,.025); } #architecture td { border-color: rgba(255,255,255,.08); } #architecture td:first-child { color: #f5fbf8; font-weight: 750; } /* ------------------------------------------------------------ AI matrix — repaired layout, no clipping, no overlapping at 100% edges. Nodes are cursor-reactive through premium-v12.js and still keyboard/touch accessible. ------------------------------------------------------------ */ #architecture .viz-grid { margin-top: 1rem; } .heatmap-panel { min-width: 0; border-radius: 28px; background: linear-gradient(150deg, rgba(8,17,14,.96), rgba(5,10,9,.94)) !important; border: 1px solid rgba(255,255,255,.11) !important; overflow: hidden; } #architecture .panel-head { color: #f4fbf8; } #architecture .panel-head small { color: #789087; } .heatmap { position: relative; min-height: 470px; margin: 0; padding: 34px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px), radial-gradient(430px 360px at var(--heat-x, 50%) var(--heat-y, 50%), rgba(32,224,165,.10), transparent 68%), linear-gradient(140deg, rgba(32,224,165,.05), rgba(217,179,107,.045)); background-size: 25% 25%, 25% 25%, auto, auto; isolation: isolate; } .heatmap::after { content: ""; position: absolute; left: 32px; right: 32px; bottom: 31px; height: 1px; background: linear-gradient(90deg, rgba(32,224,165,.35), rgba(255,255,255,.13)); } .heatmap::before { content: ""; position: absolute; top: 31px; bottom: 32px; left: 32px; width: 1px; background: linear-gradient(0deg, rgba(32,224,165,.35), rgba(255,255,255,.13)); } .heatmap .axis { color: #7f978e; z-index: 3; font-weight: 720; } .heat-node { position: absolute; left: clamp(70px, var(--x), calc(100% - 70px)); top: clamp(60px, calc(100% - var(--y)), calc(100% - 65px)); transform: translate(-50%, -50%); max-width: 180px; min-width: 116px; min-height: 44px; padding: .62rem .78rem; border: 1px solid rgba(139,255,216,.27); border-radius: 999px; background: rgba(242,255,250,.93); color: #07130f; box-shadow: 0 12px 34px rgba(0,0,0,.20), 0 0 0 5px rgba(32,224,165,.035); font: 720 .69rem/1.22 var(--body-font); letter-spacing: -.015em; text-wrap: balance; cursor: default; transition: transform .23s var(--ease), box-shadow .23s ease, border-color .23s ease, background .23s ease; z-index: 4; } .heat-node:hover, .heat-node.active, .heat-node:focus-visible { z-index: 6; transform: translate(-50%, -50%) scale(1.075); border-color: rgba(101,255,205,.8); background: linear-gradient(145deg, #f9fffc, #c9ffea); box-shadow: 0 18px 46px rgba(0,0,0,.25), 0 0 42px rgba(32,224,165,.24); outline: none; } .heat-node.active::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(91,255,201,.22); border-radius: inherit; animation: matrixPulse 1.8s ease-out infinite; } @keyframes matrixPulse { 50% { inset: -12px; opacity: .22; } 100% { inset: -18px; opacity: 0; } } .heat-detail { margin-top: 12px; min-height: 68px; display: flex; align-items: center; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; color: #bed1ca; background: linear-gradient(100deg, rgba(32,224,165,.08), rgba(255,255,255,.025)); transition: opacity .15s ease, transform .15s ease; } .heat-detail.is-swapping { opacity: .36; transform: translateY(3px); } .donut-panel { border-radius: 28px; background: linear-gradient(150deg, rgba(8,17,14,.96), rgba(5,10,9,.94)) !important; border: 1px solid rgba(255,255,255,.11) !important; } #architecture .legend { color: #b7cbc3; } /* ------------------------------------------------------------ Card-stack grid system — original content with layered depth. ------------------------------------------------------------ */ .project-track, .framework-track { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; overflow: visible !important; padding: 14px 10px 24px !important; scroll-snap-type: none !important; } .project-card, .framework-card { position: relative; overflow: visible; border-radius: 26px !important; background: radial-gradient(280px 180px at 108% -10%, color-mix(in srgb, var(--lux-green) 8%, transparent), transparent 66%), linear-gradient(160deg, color-mix(in srgb, var(--lux-card) 94%, transparent), color-mix(in srgb, var(--lux-card-2) 95%, transparent)) !important; min-height: 310px; isolation: isolate; } .project-card::before, .framework-card::before, .project-card::after, .framework-card::after { content:""; position:absolute; inset: 8px 12px -10px; z-index:-1; border:1px solid var(--lux-soft-line); border-radius:24px; background: color-mix(in srgb, var(--lux-card-2) 88%, transparent); transition: transform .3s var(--ease); } .project-card::after, .framework-card::after { inset: 15px 22px -17px; z-index:-2; opacity:.62; } .project-card:hover::before, .framework-card:hover::before { transform: translateY(5px) scale(.985); } .project-card:hover::after, .framework-card:hover::after { transform: translateY(9px) scale(.97); } .project-card:hover, .framework-card:hover { transform: translateY(-8px) rotateX(1deg) !important; box-shadow: 0 28px 74px rgba(10,35,27,.14), 0 0 42px rgba(32,224,165,.06); } .project-card h3, .framework-card h3 { font-size: clamp(1.45rem, 2vw, 2rem); letter-spacing: -.045em; } .project-card > small, .framework-card > small { color: color-mix(in srgb, var(--lux-green) 70%, var(--lux-copy)); } .track-hint { color: var(--lux-copy-faint); } .skill-grid { gap: 16px; } .skill-card { border-radius: 24px; background: linear-gradient(150deg, color-mix(in srgb, var(--lux-card) 94%, transparent), color-mix(in srgb, var(--lux-green) 4%, var(--lux-card-2))); } /* ------------------------------------------------------------ Contact — direct-conversation composition from the requested reference, without copying the reference asset itself. ------------------------------------------------------------ */ #contact-cta { margin-top: 4rem; } .contact-shell { border-radius: 42px; padding: 0; overflow: hidden; border: 1px solid var(--lux-line); background: var(--lux-card-2); box-shadow: var(--lux-shadow-light); } html[data-theme="dark"] .contact-shell { box-shadow: var(--lux-shadow-dark); } .contact-intro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; padding: clamp(2.2rem, 5vw, 5.2rem); border: 0; background: radial-gradient(720px 420px at 88% -15%, rgba(32,224,165,.12), transparent 62%), linear-gradient(145deg, #06100d, #050b09 55%, #07140f); color: #fff; } .contact-intro > div { min-width: 0; } .contact-intro span { color: #4ff0b9; } .contact-intro h2 { margin: 1rem 0 0; max-width: 740px; font-size: clamp(3.4rem, 6.4vw, 7.1rem); line-height: .88; letter-spacing: -.075em; font-weight: 760; color: #fff; } .contact-intro p { margin: 0; color: #9eb1aa; font-size: clamp(1.04rem, 1.5vw, 1.28rem); line-height: 1.78; max-width: 720px; } .contact-main { padding: clamp(2rem, 4vw, 3.8rem); gap: 1rem; background: linear-gradient(145deg, color-mix(in srgb, var(--lux-card) 94%, transparent), color-mix(in srgb, var(--lux-green) 3%, var(--lux-card-2))); } .contact-copy h2 { font-family: var(--display-font); font-weight: 730; letter-spacing: -.06em; } .mandate-card { border-radius: 26px; background: radial-gradient(260px 200px at 100% 0%, color-mix(in srgb, var(--lux-green) 10%, transparent), transparent 68%), color-mix(in srgb, var(--lux-card) 96%, transparent); } .evidence-shortcuts { padding: 1.1rem clamp(2rem, 4vw, 3.8rem) clamp(2rem, 4vw, 3.8rem); border: 0; gap: 10px; } .evidence-shortcuts a { border-radius: 18px; min-height: 116px; background: color-mix(in srgb, var(--lux-card) 92%, transparent); position: relative; overflow: hidden; } .evidence-shortcuts a::after { content: "↗"; position: absolute; right: 12px; top: 11px; opacity: .34; transition: transform .2s ease, opacity .2s ease; } .evidence-shortcuts a:hover::after { transform: translate(2px,-2px); opacity: .8; } .contact-statement { display: none; } /* ------------------------------------------------------------ Footer polish ------------------------------------------------------------ */ .social-showcase { border-radius: 32px; background: radial-gradient(400px 220px at 82% 0%, color-mix(in srgb, var(--lux-green) 8%, transparent), transparent 65%), color-mix(in srgb, var(--lux-card) 94%, transparent); } .social-icons a { border: 1px solid var(--lux-line); background: color-mix(in srgb, var(--lux-card) 94%, transparent); color: var(--lux-copy); } .social-icons a:hover { color: color-mix(in srgb, var(--lux-green) 72%, var(--lux-copy)); border-color: color-mix(in srgb, var(--lux-green) 34%, var(--lux-line)); box-shadow: 0 14px 36px rgba(12, 50, 38, .10), 0 0 24px rgba(32,224,165,.08); } /* ------------------------------------------------------------ Responsive safety ------------------------------------------------------------ */ @media (max-width: 1240px) { .hero-grid.hero-v9 { grid-template-columns: 1fr; min-height: auto; } .portfolio-snapshot { max-width: 920px; width: 100%; min-height: 610px; } .project-track, .framework-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flagship-grid { grid-template-columns: 250px minmax(0, 1fr); } } @media (max-width: 900px) { .hero h1 { font-size: clamp(3.7rem, 11vw, 6.6rem); } .flow-diagram { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .9rem; } .flow-node { min-width: 160px; scroll-snap-align: center; } .flow-arrow { flex: 0 0 auto; } .flagship-grid { grid-template-columns: 1fr; } .flag-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid rgba(255,255,255,.10); } .flag-tabs::before { grid-column: 1 / -1; } .flag-tabs button { grid-template-columns: 32px 1fr; min-height: 70px; } .flag-tabs button::after { display: none; } .flag-panel { min-height: auto; } #architecture { padding: 1.4rem; border-radius: 32px; } .viz-grid { grid-template-columns: 1fr !important; } .project-track, .framework-track { grid-template-columns: 1fr 1fr; } .contact-intro { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 760px) { .executive-nav { width: calc(100vw - 18px); top: 8px; border-radius: 17px; } .hero { padding-top: 116px; } .dynamic-island { top: 74px; max-width: calc(100vw - 24px); } .island-core span { max-width: 220px; } .island-panel { min-width: min(360px, calc(100vw - 44px)); } .hero h1 { font-size: clamp(3rem, 14vw, 5.1rem); } .portfolio-snapshot { min-height: 560px; border-radius: 28px; } .governance-stage { height: 280px; } .governance-card { width: 180px; height: 120px; margin: -60px 0 0 -90px; } .governance-card strong { margin-top: .8rem; font-size: .9rem; } .governance-card:nth-child(1){--dx:-94px;--dy:20px;--dz:0px;--rot:-14deg} .governance-card:nth-child(2){--dx:-63px;--dy:14px;--dz:18px;--rot:-9deg} .governance-card:nth-child(3){--dx:-31px;--dy:7px;--dz:36px;--rot:-5deg} .governance-card:nth-child(4){--dx:0px;--dy:0px;--dz:54px;--rot:0deg} .governance-card:nth-child(5){--dx:31px;--dy:7px;--dz:36px;--rot:5deg} .governance-card:nth-child(6){--dx:63px;--dy:14px;--dz:18px;--rot:9deg} .governance-card:nth-child(7){--dx:94px;--dy:20px;--dz:0px;--rot:14deg} .stage-orbit { width: 330px; height: 145px; } .snapshot-metrics { grid-template-columns: 1fr 1fr !important; } .operating-shell { padding: .8rem; border-radius: 26px; } #architecture .section-title h2 { font-size: clamp(2.6rem, 12vw, 4.8rem); } .flag-tabs { padding: .65rem; gap: 6px; } .flag-tabs button { padding: .65rem; font-size: .72rem; } .flag-panel { padding: 1.5rem 1rem; } .flag-panel h3 { font-size: clamp(2.1rem, 9vw, 3.2rem); } .mini-metrics { grid-template-columns: 1fr !important; } .mini-metrics b + b { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.10); } .table-wrap { overflow-x: auto; } #architecture table { min-width: 700px; } .heatmap { min-height: 520px; padding: 24px; } .heat-node { min-width: 98px; max-width: 135px; font-size: .61rem; padding: .55rem .6rem; } .project-track, .framework-track { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; padding: 12px 12px 28px !important; } .project-card, .framework-card { flex: 0 0 min(86vw, 360px); scroll-snap-align: center; } .contact-intro { padding: 2.3rem 1.4rem; } .contact-intro h2 { font-size: clamp(3.1rem, 14vw, 5.3rem); } .contact-main, .evidence-shortcuts { padding-left: 1.2rem; padding-right: 1.2rem; } } @media (max-width: 520px) { .island-panel { grid-template-columns: 1fr; } .snapshot-metrics { grid-template-columns: 1fr !important; } .portfolio-snapshot { min-height: 620px; } .governance-stage { margin-inline: -18px; } .flow-node { min-width: 145px; } .flag-tabs button span { display: none; } .flag-tabs button { grid-template-columns: 1fr; min-height: 60px; text-align: center; } .heatmap { min-height: 560px; } } @media (prefers-reduced-motion: reduce) { .stage-orbit::before, .heat-node.active::after { animation: none !important; } .governance-deck, .heat-node, .flow-node, .project-card, .framework-card { transition-duration: .01ms !important; } } /* Architecture contrast corrections: this section intentionally stays dark in both site themes. */ #architecture .mini-metrics b { background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important; color: #f7fcfa !important; } #architecture .mini-metrics b span { color: #f7fcfa !important; } #architecture .mini-metrics b small { color: #829b91 !important; } #architecture table td { color: #bccfc7 !important; } #architecture table td:first-child { color: #f5fbf8 !important; } #architecture table th { color: #7f988e !important; } /* Selected systems use a true card-stack grid on desktop, then become a swipe deck on mobile. */ #systems .track { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px !important; overflow: visible !important; padding: 14px 10px 24px !important; scroll-snap-type: none !important; } #systems .project-card { min-width: 0 !important; width: auto !important; scroll-snap-align: unset !important; } @media (max-width: 1240px) { #systems .track { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { #systems .track { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; padding: 12px 12px 28px !important; } #systems .project-card { flex: 0 0 min(86vw, 360px) !important; min-width: min(86vw, 360px) !important; scroll-snap-align: center !important; } } #systems .track { grid-auto-flow: row !important; grid-auto-columns: auto !important; } /* ================================================================ SOURCE LAYER: assets/premium-v13.css Consolidated into site-v16.css to reduce production requests while preserving cascade order and all original maintenance comments. ================================================================ */ /* * AAO Portfolio — Premium Usability Layer v13 * ------------------------------------------------------------ * Purpose: solve the v12 usability problems without adding a runtime dependency. * This file intentionally loads AFTER styles.css and premium-v12.css so the v13 * theme, navigation, architecture, card-grid and deck rules are authoritative. * * Safe edits: * - Theme colors: edit only the variables in the two html[data-theme] blocks. * - Dynamic Island size/position: edit the .dynamic-island block. * - Hero deck spacing: edit --deck-step in .governance-stage. * - Grid density: edit the minmax() values in the responsive track rules. */ :root { --v13-radius-sm: 14px; --v13-radius-md: 22px; --v13-radius-lg: 34px; --v13-green: #16c995; --v13-green-bright: #5cf0c1; --v13-cyan: #71ddf3; --v13-ease: cubic-bezier(.16,1,.3,1); } html[data-theme="light"] { color-scheme: light; --bg: #f6f8f5; --bg2: #eef3ef; --surface: rgba(255,255,255,.88); --surface2: #ffffff; --text: #0d1714; --muted: #43554f; --faint: #71807b; --border: rgba(13,23,20,.12); --accent: #11966f; --accent2: #25c997; --cyan: #1599b5; --gold: #b48738; --lux-panel: rgba(255,255,255,.90); --lux-panel-solid: #ffffff; --lux-line: rgba(13,23,20,.12); --lux-soft-line: rgba(13,23,20,.07); --lux-card: rgba(255,255,255,.96); --lux-card-2: #f8fbf8; --lux-copy: #0d1714; --lux-copy-soft: #43554f; --lux-copy-faint: #71807b; --v13-shell: #ffffff; --v13-shell-soft: #f5f8f5; --v13-ink: #0d1714; --v13-copy: #43554f; --v13-faint: #71807b; --v13-line: rgba(13,23,20,.12); --v13-line-soft: rgba(13,23,20,.07); --v13-glass: rgba(255,255,255,.88); --v13-shadow: 0 26px 78px rgba(24,39,33,.11), 0 4px 16px rgba(24,39,33,.05); --v13-glow: rgba(22,201,149,.17); --v13-grid: rgba(13,23,20,.055); } html[data-theme="dark"] { color-scheme: dark; --bg: #050908; --bg2: #07100d; --surface: rgba(8,14,12,.92); --surface2: #09110f; --text: #f3f8f6; --muted: #b6c7c1; --faint: #7f938b; --border: rgba(233,255,247,.13); --accent: #37d9a8; --accent2: #5cf0c1; --cyan: #71ddf3; --gold: #d5ab58; --lux-panel: rgba(7,13,11,.94); --lux-panel-solid: #070d0b; --lux-line: rgba(233,255,247,.13); --lux-soft-line: rgba(233,255,247,.075); --lux-card: rgba(10,18,15,.96); --lux-card-2: #09110f; --lux-copy: #f3f8f6; --lux-copy-soft: #b6c7c1; --lux-copy-faint: #7f938b; --v13-shell: #070d0b; --v13-shell-soft: #0a1310; --v13-ink: #f3f8f6; --v13-copy: #b6c7c1; --v13-faint: #7f938b; --v13-line: rgba(233,255,247,.13); --v13-line-soft: rgba(233,255,247,.075); --v13-glass: rgba(7,13,11,.91); --v13-shadow: 0 30px 92px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.025); --v13-glow: rgba(55,217,168,.19); --v13-grid: rgba(225,255,245,.055); } html, body { background: var(--bg) !important; color: var(--text); } body { background: radial-gradient(900px 620px at 8% 3%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%), radial-gradient(760px 560px at 92% 10%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 66%), linear-gradient(180deg, var(--bg), var(--bg2) 54%, var(--bg)) !important; } body::before { opacity: .34; background-image: linear-gradient(var(--v13-grid) 1px, transparent 1px), linear-gradient(90deg,var(--v13-grid) 1px,transparent 1px); background-size: 54px 54px; } /* Strict theme consistency: no inverted white/black islands inside the opposite theme. */ .executive-nav, .portfolio-snapshot, .operating-shell, .value-card,.project-card,.skill-card,.framework-card,.panel, .contact-shell,.social-showcase,.availability-rail,.evidence-shortcuts a { color: var(--v13-ink) !important; } html[data-theme="light"] .executive-nav, html[data-theme="light"] .portfolio-snapshot, html[data-theme="light"] .operating-shell, html[data-theme="light"] .value-card, html[data-theme="light"] .project-card, html[data-theme="light"] .skill-card, html[data-theme="light"] .framework-card, html[data-theme="light"] .panel, html[data-theme="light"] .contact-shell, html[data-theme="light"] .social-showcase { background-color: var(--v13-shell) !important; } html[data-theme="dark"] .executive-nav, html[data-theme="dark"] .portfolio-snapshot, html[data-theme="dark"] .operating-shell, html[data-theme="dark"] .value-card, html[data-theme="dark"] .project-card, html[data-theme="dark"] .skill-card, html[data-theme="dark"] .framework-card, html[data-theme="dark"] .panel, html[data-theme="dark"] .contact-shell, html[data-theme="dark"] .social-showcase { background-color: var(--v13-shell) !important; } /* Navigation and buttons */ .executive-nav { background: color-mix(in srgb,var(--v13-shell) 94%,transparent) !important; border-color: var(--v13-line) !important; box-shadow: 0 12px 42px color-mix(in srgb,var(--text) 10%,transparent) !important; } .executive-nav::before { opacity: .35; } html[data-theme="light"] .brand-premium strong { background: linear-gradient(145deg,#ecfff8,#c8f6e6) !important; color: #0b2019 !important; border: 1px solid rgba(17,150,111,.18); box-shadow: inset 0 1px #fff, 0 9px 24px rgba(14,93,69,.11); } html[data-theme="dark"] .brand-premium strong { background: linear-gradient(145deg,#0d1a16,#07100d) !important; color: #71eac0 !important; border: 1px solid rgba(92,240,193,.18); box-shadow: inset 0 1px rgba(255,255,255,.04),0 10px 28px rgba(0,0,0,.3); } .secondary,.theme-toggle { color: var(--v13-ink) !important; background: var(--v13-glass) !important; border-color: var(--v13-line) !important; } html[data-theme="light"] .cta, html[data-theme="light"] .primary { background: linear-gradient(135deg,#d9fff0,#81ebc4 55%,#5ddcb1) !important; border-color: rgba(17,150,111,.28) !important; color: #071611 !important; box-shadow: inset 0 1px rgba(255,255,255,.72),0 14px 34px rgba(16,128,94,.15) !important; } html[data-theme="dark"] .cta, html[data-theme="dark"] .primary { background: linear-gradient(135deg,#103a2d,#0c7252 56%,#159b70) !important; border-color: rgba(92,240,193,.28) !important; color: #f4fffa !important; box-shadow: inset 0 1px rgba(255,255,255,.08),0 16px 42px rgba(0,0,0,.34),0 0 30px rgba(55,217,168,.08) !important; } /* ------------------------------------------------------------------ Dynamic Island v13 — compact navigator, opens upward, never overlaps nav. ------------------------------------------------------------------ */ .dynamic-island { display: flex !important; position: fixed !important; z-index: 160 !important; left: 50% !important; top: auto !important; bottom: 20px !important; width: min(360px,calc(100vw - 28px)); max-width: none !important; min-height: 54px; padding: 5px !important; border: 1px solid var(--v13-line) !important; border-radius: 999px !important; background: color-mix(in srgb,var(--v13-glass) 96%,transparent) !important; color: var(--v13-ink) !important; box-shadow: 0 18px 56px color-mix(in srgb,#000 22%,transparent), inset 0 1px rgba(255,255,255,.12) !important; backdrop-filter: blur(24px) saturate(145%) !important; -webkit-backdrop-filter: blur(24px) saturate(145%) !important; opacity: 0; pointer-events: none; transform: translate(-50%,18px) scale(.975) !important; transition: opacity .2s ease, transform .34s var(--v13-ease), box-shadow .25s ease !important; overflow: visible !important; align-items: center !important; } .dynamic-island.is-visible:not(.is-suppressed) { opacity: 1 !important; pointer-events: auto !important; transform: translate(-50%,0) scale(1) !important; } .dynamic-island.is-open { border-radius: 24px !important; box-shadow: 0 26px 74px color-mix(in srgb,#000 28%,transparent), 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent) inset !important; } .island-core { width: 100% !important; min-width: 0 !important; min-height: 44px; display: grid !important; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center; gap: .7rem !important; border: 0 !important; border-radius: 999px; padding: .58rem .72rem !important; background: transparent !important; color: inherit !important; cursor: pointer; text-align: left; } .island-core > i { width: 9px !important; height: 9px !important; border-radius: 50%; background: var(--accent) !important; box-shadow: 0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent),0 0 20px color-mix(in srgb,var(--accent) 64%,transparent) !important; } .island-core > span { display: block; min-width: 0; max-width: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v13-ink) !important; font: 760 .79rem/1.1 var(--body-font) !important; letter-spacing: -.015em; } .island-chevron { width: 28px !important; height: 28px !important; display: grid !important; place-items: center; border: 1px solid var(--v13-line); border-radius: 50%; background: color-mix(in srgb,var(--v13-shell-soft) 90%,transparent) !important; color: var(--v13-faint) !important; font-size: 1rem; transition: transform .28s var(--v13-ease); } .dynamic-island.is-open .island-chevron { transform: rotate(180deg); } .island-panel { display: grid !important; position: absolute; left: 50%; bottom: calc(100% + 10px); width: min(640px,calc(100vw - 28px)); padding: 10px !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 8px !important; border: 1px solid var(--v13-line) !important; border-radius: 24px; background: color-mix(in srgb,var(--v13-glass) 98%,transparent) !important; box-shadow: var(--v13-shadow); backdrop-filter: blur(26px) saturate(145%); -webkit-backdrop-filter: blur(26px) saturate(145%); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%,10px) scale(.985); transform-origin: 50% 100%; transition: opacity .18s ease,transform .28s var(--v13-ease),visibility 0s linear .28s; } .dynamic-island.is-open .island-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,0) scale(1); transition-delay: 0s; } .island-panel a { min-height: 64px; display: flex; flex-direction: column; justify-content: space-between; gap: .55rem; padding: .72rem .76rem !important; border: 1px solid var(--v13-line-soft) !important; border-radius: 16px !important; background: color-mix(in srgb,var(--v13-shell-soft) 82%,transparent) !important; color: var(--v13-copy) !important; text-decoration: none; text-align: left !important; font: 680 .73rem/1.15 var(--body-font) !important; transition: transform .2s var(--v13-ease),border-color .2s ease,background .2s ease,color .2s ease; } .island-panel a small { color: var(--v13-faint); font-size: .58rem; letter-spacing: .08em; } .island-panel a strong { color: inherit; font-size: .76rem; } .island-panel a:hover, .island-panel a:focus-visible, .island-panel a[aria-current="true"] { color: var(--v13-ink) !important; border-color: color-mix(in srgb,var(--accent) 36%,var(--v13-line)) !important; background: color-mix(in srgb,var(--accent) 9%,var(--v13-shell)) !important; transform: translateY(-2px); outline: none; } /* ------------------------------------------------------------------ Hero governance deck v13 — selectable by cursor, click, arrows, dots, keyboard, and horizontal swipe. Selection stays visible instead of being a decorative stack. ------------------------------------------------------------------ */ .portfolio-snapshot { background: radial-gradient(500px 380px at 50% 35%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 64%), linear-gradient(155deg,var(--v13-shell),var(--v13-shell-soft)) !important; border-color: var(--v13-line) !important; box-shadow: var(--v13-shadow) !important; } .snapshot-head { border-color: var(--v13-line) !important; } .snapshot-head > span { color: var(--v13-copy) !important; } .snapshot-head b { background: color-mix(in srgb,var(--accent) 7%,var(--v13-shell)) !important; color: color-mix(in srgb,var(--accent) 74%,var(--v13-ink)) !important; border-color: color-mix(in srgb,var(--accent) 30%,var(--v13-line)) !important; } .governance-stage { --stage-rx: -4deg; --stage-ry: 7deg; --deck-step: 58px; height: 345px !important; margin: .3rem 0 .7rem !important; outline: none; touch-action: pan-y; } .governance-deck { inset: 22px 6px 46px !important; transform: rotateX(var(--stage-rx)) rotateY(var(--stage-ry)) !important; transition: transform .3s var(--v13-ease) !important; } .governance-card { --gx: 0px; --gy: 0px; --gz: 0px; --grot: 0deg; --gscale: 1; --gopacity: 1; appearance: none; display: block; position: absolute !important; left: 50% !important; top: 48% !important; width: min(234px,58vw) !important; height: 148px !important; margin: -74px 0 0 -117px !important; padding: 1rem !important; text-align: left; cursor: pointer !important; opacity: var(--gopacity) !important; transform: translate3d(var(--gx),var(--gy),var(--gz)) rotateY(var(--grot)) scale(var(--gscale)) !important; transition: transform .52s var(--v13-ease),opacity .34s ease,filter .34s ease,background .28s ease,border-color .28s ease !important; z-index: var(--g-z,1); color: var(--v13-ink) !important; background: color-mix(in srgb,var(--v13-shell) 90%,transparent) !important; border: 1px solid var(--v13-line) !important; box-shadow: 0 18px 46px color-mix(in srgb,#000 12%,transparent),inset 0 1px rgba(255,255,255,.12) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } html[data-theme="dark"] .governance-card { background: linear-gradient(145deg,rgba(14,27,22,.93),rgba(8,15,13,.93)) !important; box-shadow: 0 22px 56px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.035) !important; } .governance-card.is-focus { background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,var(--v13-shell)),color-mix(in srgb,var(--accent) 7%,var(--v13-shell-soft))) !important; color: var(--v13-ink) !important; border-color: color-mix(in srgb,var(--accent) 54%,var(--v13-line)) !important; box-shadow: 0 28px 66px color-mix(in srgb,var(--accent) 18%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent) inset !important; } .governance-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .governance-card small { color: var(--v13-faint); opacity: 1 !important; } .governance-card strong { color: var(--v13-ink); } .governance-card span { color: var(--v13-copy); opacity: 1 !important; } .governance-card::after { background: linear-gradient(90deg,var(--accent),transparent) !important; } .stage-orbit { border-color: color-mix(in srgb,var(--accent) 25%,transparent) !important; opacity: .75; } .stage-controls { position: absolute; z-index: 30; left: 50%; bottom: 2px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 7px; border: 1px solid var(--v13-line); border-radius: 999px; background: color-mix(in srgb,var(--v13-glass) 94%,transparent); box-shadow: 0 10px 28px color-mix(in srgb,#000 12%,transparent); backdrop-filter: blur(16px); } .stage-arrow { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--v13-line); border-radius: 50%; background: var(--v13-shell); color: var(--v13-ink); cursor: pointer; transition: transform .2s var(--v13-ease),border-color .2s ease; } .stage-arrow:hover,.stage-arrow:focus-visible { transform: scale(1.06); border-color: color-mix(in srgb,var(--accent) 45%,var(--v13-line)); outline: none; } .stage-dots { display: flex; align-items: center; gap: 5px; } .stage-dot { width: 18px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb,var(--v13-faint) 35%,transparent); cursor: pointer; transition: width .25s var(--v13-ease),background .2s ease; } .stage-dot.active { width: 34px; background: var(--accent); } .stage-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .stage-readout { position: absolute; z-index: 25; top: 18px; right: 10px; padding: .48rem .65rem; border: 1px solid var(--v13-line); border-radius: 999px; background: color-mix(in srgb,var(--v13-glass) 92%,transparent); color: var(--v13-copy); font-size: .65rem; font-weight: 760; letter-spacing: .03em; } .snapshot-metrics article,.snapshot-model { background: var(--v13-shell) !important; border-color: var(--v13-line) !important; color: var(--v13-ink) !important; } .snapshot-metrics span,.snapshot-metrics p,.snapshot-model p { color: var(--v13-copy) !important; } /* Operating model: pointer-driven on fine pointers, explicit controls everywhere else. */ .operating-shell { background: radial-gradient(540px 220px at var(--flow-x,12%) 50%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 65%),var(--v13-shell) !important; border-color: var(--v13-line) !important; box-shadow: var(--v13-shadow) !important; } .flow-node { color: var(--v13-copy) !important; background: var(--v13-shell-soft) !important; border-color: var(--v13-line) !important; cursor: pointer !important; } .flow-node.active { color: var(--v13-ink) !important; background: color-mix(in srgb,var(--accent) 10%,var(--v13-shell)) !important; border-color: color-mix(in srgb,var(--accent) 42%,var(--v13-line)) !important; } .flow-detail { background: color-mix(in srgb,var(--accent) 5%,var(--v13-shell-soft)) !important; color: var(--v13-copy) !important; border-color: var(--v13-line-soft) !important; } /* ------------------------------------------------------------------ Architecture: light stays light, dark stays dark. No forced dark section. ------------------------------------------------------------------ */ #architecture { color: var(--v13-ink) !important; background: radial-gradient(760px 560px at 7% 8%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 64%), linear-gradient(150deg,var(--v13-shell),var(--v13-shell-soft)) !important; border: 1px solid var(--v13-line) !important; box-shadow: var(--v13-shadow) !important; } #architecture::after { background-image: radial-gradient(var(--v13-grid) .75px,transparent .75px) !important; opacity: .8; } #architecture .section-title span { color: color-mix(in srgb,var(--accent) 72%,var(--v13-ink)) !important; } #architecture .section-title h2 { color: var(--v13-ink) !important; } #architecture .section-title p { color: var(--v13-copy) !important; } .flagship-grid { border-color: var(--v13-line) !important; background: var(--v13-shell) !important; box-shadow: 0 20px 58px color-mix(in srgb,#000 12%,transparent) !important; } .flag-tabs { border-right-color: var(--v13-line) !important; background: var(--v13-shell-soft) !important; } .flag-tabs::before { color: var(--v13-faint) !important; } .flag-tabs button { color: var(--v13-copy) !important; background: transparent !important; border-color: transparent !important; } .flag-tabs button span { color: var(--v13-faint) !important; } .flag-tabs button.active { color: var(--v13-ink) !important; background: color-mix(in srgb,var(--accent) 9%,var(--v13-shell)) !important; border-color: color-mix(in srgb,var(--accent) 36%,var(--v13-line)) !important; box-shadow: 0 12px 34px color-mix(in srgb,#000 10%,transparent),0 0 28px color-mix(in srgb,var(--accent) 6%,transparent) inset !important; } .flag-panel { color: var(--v13-copy) !important; background: radial-gradient(480px 420px at 96% 4%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%),transparent !important; } .flag-panel > small { color: color-mix(in srgb,var(--accent) 72%,var(--v13-ink)) !important; } .flag-panel h3 { color: var(--v13-ink) !important; } .flag-panel > p { color: var(--v13-copy) !important; } .mini-metrics { border-color: var(--v13-line) !important; background: var(--v13-shell-soft) !important; } .mini-metrics b,.mini-metrics b + b { border-color: var(--v13-line) !important; background: transparent !important; } #architecture .mini-metrics b span,.mini-metrics span { color: var(--v13-ink) !important; } #architecture .mini-metrics b small,.mini-metrics small { color: var(--v13-faint) !important; } .table-wrap { width: 100%; max-height: 460px; overflow: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid var(--v13-line) !important; border-radius: 18px; background: var(--v13-shell) !important; outline: none; } .table-wrap:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); } #architecture table { min-width: 760px; color: var(--v13-copy) !important; } #architecture thead { position: sticky; top: 0; z-index: 3; } #architecture th { color: var(--v13-faint) !important; background: color-mix(in srgb,var(--v13-shell-soft) 96%,transparent) !important; border-color: var(--v13-line) !important; } #architecture td { color: var(--v13-copy) !important; border-color: var(--v13-line-soft) !important; } #architecture td:first-child { color: var(--v13-ink) !important; } #architecture .heatmap-panel, #architecture .domain-panel { color: var(--v13-ink) !important; background: var(--v13-shell) !important; border: 1px solid var(--v13-line) !important; box-shadow: 0 18px 54px color-mix(in srgb,#000 10%,transparent) !important; } #architecture .panel-head { color: var(--v13-ink) !important; } #architecture .panel-head small { color: var(--v13-faint) !important; } .heatmap { border-color: var(--v13-line) !important; background: linear-gradient(var(--v13-grid) 1px,transparent 1px), linear-gradient(90deg,var(--v13-grid) 1px,transparent 1px), radial-gradient(430px 360px at var(--heat-x,50%) var(--heat-y,50%),color-mix(in srgb,var(--accent) 9%,transparent),transparent 68%), linear-gradient(140deg,color-mix(in srgb,var(--accent) 3%,var(--v13-shell)),var(--v13-shell)) !important; background-size: 25% 25%,25% 25%,auto,auto !important; } .heatmap::after,.heatmap::before { background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 42%,transparent),var(--v13-line)) !important; } .heatmap::before { background: linear-gradient(0deg,color-mix(in srgb,var(--accent) 42%,transparent),var(--v13-line)) !important; } .heatmap .axis { color: var(--v13-faint) !important; } .heat-node { color: var(--v13-ink) !important; background: var(--v13-shell) !important; border-color: color-mix(in srgb,var(--accent) 27%,var(--v13-line)) !important; box-shadow: 0 11px 30px color-mix(in srgb,#000 13%,transparent),0 0 0 5px color-mix(in srgb,var(--accent) 3%,transparent) !important; } .heat-node:hover,.heat-node.active,.heat-node:focus-visible { background: color-mix(in srgb,var(--accent) 10%,var(--v13-shell)) !important; border-color: color-mix(in srgb,var(--accent) 68%,var(--v13-line)) !important; box-shadow: 0 18px 44px color-mix(in srgb,#000 16%,transparent),0 0 38px color-mix(in srgb,var(--accent) 16%,transparent) !important; } .heat-detail { color: var(--v13-copy) !important; background: color-mix(in srgb,var(--accent) 5%,var(--v13-shell-soft)) !important; border-color: var(--v13-line) !important; } /* Domain mix: semantic bars replace the mixed-theme donut. */ .domain-panel { border-radius: 28px; } .domain-mix { display: grid; gap: 1.05rem; margin-top: 1.5rem; } .domain-row { display: grid; grid-template-columns: minmax(150px,1fr) minmax(120px,1.5fr) 42px; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--v13-line-soft); } .domain-row:last-child { border-bottom: 0; } .domain-row strong { color: var(--v13-ink); font-size: .86rem; } .domain-row small { display:block; margin-top:.2rem; color:var(--v13-faint); font-size:.68rem; } .domain-track { height: 10px; border-radius: 999px; background: color-mix(in srgb,var(--v13-faint) 12%,transparent); overflow: hidden; } .domain-track i { display:block; width:var(--mix); height:100%; border-radius:inherit; background: linear-gradient(90deg,var(--mix-start,var(--accent)),var(--mix-end,var(--accent2))); box-shadow:0 0 18px color-mix(in srgb,var(--accent) 16%,transparent); } .domain-row > b { color: var(--v13-ink); text-align:right; font-size:1.12rem; } .domain-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:1rem; } .domain-summary article { padding:1rem; border:1px solid var(--v13-line); border-radius:16px; background:var(--v13-shell-soft); } .domain-summary b { display:block; font-size:1.55rem; color:var(--v13-ink); } .domain-summary span { color:var(--v13-faint); font-size:.72rem; } /* ------------------------------------------------------------------ Replace scroll/swipe-only decks with responsive grids. ------------------------------------------------------------------ */ #systems .track, #capabilities .track, #frameworks .track { display: grid !important; grid-auto-flow: row !important; grid-auto-columns: unset !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 16px !important; overflow: visible !important; padding: 12px 8px 22px !important; scroll-snap-type: none !important; } #capabilities .track { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } .project-card,.skill-card,.framework-card { min-width: 0 !important; min-height: 250px; background: linear-gradient(155deg,var(--v13-shell),var(--v13-shell-soft)) !important; border-color: var(--v13-line) !important; box-shadow: 0 16px 44px color-mix(in srgb,#000 8%,transparent) !important; } .project-card::before,.project-card::after,.framework-card::before,.framework-card::after { background: var(--v13-shell-soft) !important; border-color: var(--v13-line-soft) !important; } .track-hint { display: none !important; } /* Footer: Back to Top is centered and visually separate from contact details. */ .footer-backtop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2rem; margin: 2.7rem 0 .8rem; } .footer-backtop::before,.footer-backtop::after { content:""; height:1px; background:linear-gradient(90deg,transparent,var(--v13-line)); } .footer-backtop::after { background:linear-gradient(90deg,var(--v13-line),transparent); } .footer-backtop .to-top { margin: 0 !important; min-width: 150px; background: var(--v13-shell) !important; color: var(--v13-ink) !important; border-color: var(--v13-line) !important; box-shadow: 0 12px 34px color-mix(in srgb,#000 8%,transparent) !important; } .footer-backtop .to-top:hover { border-color:color-mix(in srgb,var(--accent) 38%,var(--v13-line)) !important; } .footer-bottom { margin-top: 1.25rem !important; } /* Focus visibility and touch targets. */ button:focus-visible,a:focus-visible { outline: 2px solid color-mix(in srgb,var(--accent) 80%,var(--v13-ink)); outline-offset: 3px; } .filter-row button,.flag-tabs button,.theme-toggle,.to-top { min-height: 42px; } @media (max-width: 1180px) { #capabilities .track { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } } @media (max-width: 940px) { #systems .track,#frameworks .track,#capabilities .track { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .flagship-grid { grid-template-columns: 1fr !important; } .flag-tabs { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); border-right: 0 !important; border-bottom: 1px solid var(--v13-line); } .flag-tabs::before { grid-column: 1/-1; } .flag-tabs button { min-height: 64px; grid-template-columns: 28px 1fr auto; } } @media (max-width: 720px) { .dynamic-island { bottom: 12px !important; width: min(360px,calc(100vw - 20px)); } .island-panel { width: calc(100vw - 20px); grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .governance-stage { height: 318px !important; } .stage-readout { top: 10px; right: 2px; } .stage-dots { gap: 4px; } .stage-dot { width: 12px; } .stage-dot.active { width: 26px; } #architecture { padding: 1.25rem !important; border-radius: 28px !important; } .flag-tabs { grid-template-columns: 1fr !important; } .flag-tabs::before { grid-column:auto; } .flag-tabs button { min-height: 58px; } .flag-panel { min-height: 0 !important; padding: 1.15rem !important; } .table-wrap { max-height: 400px; } #architecture table { min-width: 680px; } .heatmap { min-height: 540px !important; padding: 24px !important; } .domain-row { grid-template-columns: 1fr 42px; gap:.65rem; } .domain-track { grid-column: 1/-1; grid-row: 2; } .domain-summary { grid-template-columns:1fr; } #systems .track,#frameworks .track,#capabilities .track { grid-template-columns: 1fr !important; padding-inline: 0 !important; } .project-card,.framework-card,.skill-card { min-height: 0 !important; } .footer-backtop { gap: .75rem; } } @media (max-width: 460px) { .island-panel a { min-height: 58px; } .stage-controls { gap: 5px; } .stage-arrow { width: 32px; height: 32px; } .stage-dot:nth-child(even) { display:none; } .governance-card { width: min(220px,62vw) !important; margin-left: -110px !important; } } @media (hover:none) { .project-card:hover,.framework-card:hover { transform:none !important; } } @media (prefers-reduced-motion: reduce) { .dynamic-island,.island-panel,.governance-card,.governance-deck,.stage-dot { transition: none !important; } .stage-orbit::before,.heat-node.active::after { animation: none !important; } } /* v13 specificity guard: v12 ended with hard-coded dark table corrections. These selectors intentionally match/exceed that specificity so Light Theme cannot inherit dark-section text colors. */ #architecture table td { color: var(--v13-copy) !important; } #architecture table td:first-child { color: var(--v13-ink) !important; font-weight: 750; } #architecture table th { color: var(--v13-faint) !important; background: color-mix(in srgb,var(--v13-shell-soft) 96%,transparent) !important; } /* ------------------------------------------------------------------ v13.1 strict theme guardrails The previous layer contained a few deliberate cross-theme surfaces. These literal theme rules are intentionally last so light stays light and dark stays dark even when older high-specificity selectors are present. ------------------------------------------------------------------ */ html[data-theme="light"] .theme-toggle { background: #ffffff !important; color: #0d1714 !important; border-color: rgba(13,23,20,.14) !important; box-shadow: 0 10px 28px rgba(16,40,32,.08) !important; } html[data-theme="dark"] .theme-toggle { background: #0b1412 !important; color: #edf8f4 !important; border-color: rgba(196,236,221,.14) !important; box-shadow: 0 10px 28px rgba(0,0,0,.30) !important; } html[data-theme="light"] #architecture .heat-node { appearance: none; -webkit-appearance: none; background: #fbfdfb !important; color: #0d1714 !important; border-color: rgba(18,174,124,.22) !important; box-shadow: 0 11px 30px rgba(17,59,44,.08), 0 0 0 5px rgba(18,174,124,.025) !important; } html[data-theme="light"] #architecture .heat-node:hover, html[data-theme="light"] #architecture .heat-node.active, html[data-theme="light"] #architecture .heat-node:focus-visible { background: #e7fff5 !important; color: #08130f !important; border-color: rgba(18,174,124,.58) !important; box-shadow: 0 18px 44px rgba(17,59,44,.12), 0 0 36px rgba(18,174,124,.13) !important; } html[data-theme="dark"] #architecture .heat-node { appearance: none; -webkit-appearance: none; background: #0b1512 !important; color: #eaf7f2 !important; border-color: rgba(92,240,193,.22) !important; box-shadow: 0 11px 30px rgba(0,0,0,.32), 0 0 0 5px rgba(92,240,193,.025) !important; } html[data-theme="dark"] #architecture .heat-node:hover, html[data-theme="dark"] #architecture .heat-node.active, html[data-theme="dark"] #architecture .heat-node:focus-visible { background: #113126 !important; color: #f4fffa !important; border-color: rgba(92,240,193,.64) !important; box-shadow: 0 18px 44px rgba(0,0,0,.40), 0 0 38px rgba(92,240,193,.15) !important; } html[data-theme="light"] #architecture .heat-detail, html[data-theme="light"] #architecture .domain-panel, html[data-theme="light"] #architecture .heat-panel, html[data-theme="light"] #architecture .panel, html[data-theme="light"] #architecture .metric, html[data-theme="light"] #architecture .table-wrap { background-color: #ffffff !important; color: #0d1714 !important; } html[data-theme="dark"] #architecture .heat-detail, html[data-theme="dark"] #architecture .domain-panel, html[data-theme="dark"] #architecture .heat-panel, html[data-theme="dark"] #architecture .panel, html[data-theme="dark"] #architecture .metric, html[data-theme="dark"] #architecture .table-wrap { background-color: #08100e !important; color: #eaf7f2 !important; } /* Surface theme changes are immediate. Motion remains on geometry/shadows only, preventing a half-light/half-dark state during theme switching. */ html[data-theme] .theme-toggle, html[data-theme] #architecture .heat-node, html[data-theme] #architecture .heat-detail, html[data-theme] #architecture .domain-panel, html[data-theme] #architecture .heat-panel, html[data-theme] #architecture .panel, html[data-theme] #architecture .metric, html[data-theme] #architecture .table-wrap { transition-property: transform, border-color, box-shadow, opacity !important; } /* ================================================================ SOURCE LAYER: assets/premium-v14.css Consolidated into site-v16.css to reduce production requests while preserving cascade order and all original maintenance comments. ================================================================ */ /* * AAO Portfolio — Adaptive Interaction Layer v14 * ------------------------------------------------------------ * Goals: * - strict light-on-light / dark-on-dark theme surfaces; * - finite, manually controlled horizontal decks (no infinite loop, no autoplay); * - compact bottom Dynamic Island that grows only when opened; * - touch-first operating model whose centered stage updates its description; * - readable, numbered AI risk matrix on wide screens and a no-overflow card view on phones; * - device-aware overflow hints for data tables; * - resilient wrapping so text never sits against or outside a card boundary. */ :root { --v14-safe-inline: clamp(14px, 2.2vw, 28px); --v14-card-gap: clamp(12px, 1.4vw, 18px); --v14-radius: clamp(20px, 2vw, 30px); --v14-ease: cubic-bezier(.16,1,.3,1); } /* ---------- Global adaptive guardrails ---------- */ html { scroll-padding-top: 96px; } body { overflow-x: clip !important; } img,svg,video,canvas { max-width: 100%; } p,h1,h2,h3,h4,a,span,small,b,strong,em,li,td,th { overflow-wrap: anywhere; } .section,.hero,.footer { min-width: 0; } .section-title,.hero-copy,.portfolio-snapshot,.panel,.value-card,.project-card,.skill-card,.framework-card,.contact-shell,.social-showcase { min-width: 0; } /* Persistent primary navigation. It remains compact on small screens because the center links are already hidden by the base responsive rules. */ .executive-nav { position: fixed !important; top: max(10px, env(safe-area-inset-top)) !important; left: 50% !important; width: min(1420px, calc(100vw - 24px)) !important; transform: translateX(-50%) !important; z-index: 150 !important; padding: .62rem .72rem !important; border-radius: 999px !important; } .hero { padding-top: clamp(106px, 10vw, 132px) !important; } .nav-chip { scroll-margin-top: 110px; } /* ---------- Availability rail: prevent text touching borders ---------- */ .availability-rail { margin-top: 1.65rem !important; padding: .95rem 1.1rem !important; border: 1px solid var(--v13-line) !important; border-radius: 20px !important; display: grid !important; grid-template-columns: minmax(210px,.8fr) minmax(260px,1.35fr) minmax(220px,auto) !important; align-items: center !important; gap: .8rem 1.25rem !important; min-height: 68px; overflow: hidden; } .availability-rail > * { min-width: 0; margin: 0; line-height: 1.45; } .availability-rail b { padding-inline-start: .1rem; } .availability-rail a { text-align: right; overflow-wrap: anywhere; } /* ---------- Strict theme surfaces, including Direct Conversation ---------- */ html[data-theme="light"] .contact-shell, html[data-theme="light"] .contact-intro, html[data-theme="light"] .contact-main, html[data-theme="light"] .mandate-card, html[data-theme="light"] .evidence-shortcuts a, html[data-theme="light"] .social-showcase, html[data-theme="light"] .availability-rail, html[data-theme="light"] .footer-backtop .to-top { background: #ffffff !important; color: #0d1714 !important; border-color: rgba(13,23,20,.12) !important; } html[data-theme="light"] .contact-intro { background: radial-gradient(680px 320px at 88% -10%, rgba(25,191,143,.10), transparent 64%), linear-gradient(145deg,#ffffff,#f4f8f5) !important; } html[data-theme="light"] .contact-intro h2, html[data-theme="light"] .contact-copy h2, html[data-theme="light"] .mandate-card h3, html[data-theme="light"] .social-showcase h2 { color:#0d1714 !important; } html[data-theme="light"] .contact-intro p, html[data-theme="light"] .contact-copy p, html[data-theme="light"] .mandate-card li, html[data-theme="light"] .evidence-shortcuts span, html[data-theme="light"] .social-showcase p { color:#43554f !important; } html[data-theme="light"] .contact-intro span, html[data-theme="light"] .contact-copy > span { color:#0d8e69 !important; } html[data-theme="light"] .social-icons a { background:#f4f7f5 !important; color:#16201d !important; border-color:rgba(13,23,20,.10) !important; } html[data-theme="dark"] .contact-shell, html[data-theme="dark"] .contact-intro, html[data-theme="dark"] .contact-main, html[data-theme="dark"] .mandate-card, html[data-theme="dark"] .evidence-shortcuts a, html[data-theme="dark"] .social-showcase, html[data-theme="dark"] .availability-rail, html[data-theme="dark"] .footer-backtop .to-top { background: #070d0b !important; color: #f3f8f6 !important; border-color: rgba(233,255,247,.13) !important; } html[data-theme="dark"] .contact-intro { background: radial-gradient(680px 320px at 88% -10%, rgba(55,217,168,.13), transparent 64%), linear-gradient(145deg,#07100d,#040806 60%,#09130f) !important; } html[data-theme="dark"] .contact-intro h2, html[data-theme="dark"] .contact-copy h2, html[data-theme="dark"] .mandate-card h3, html[data-theme="dark"] .social-showcase h2 { color:#f3f8f6 !important; } html[data-theme="dark"] .contact-intro p, html[data-theme="dark"] .contact-copy p, html[data-theme="dark"] .mandate-card li, html[data-theme="dark"] .evidence-shortcuts span, html[data-theme="dark"] .social-showcase p { color:#b6c7c1 !important; } html[data-theme="dark"] .contact-intro span, html[data-theme="dark"] .contact-copy > span { color:#5cf0c1 !important; } html[data-theme="dark"] .social-icons a { background:#0d1714 !important; color:#edf8f4 !important; border-color:rgba(233,255,247,.12) !important; } .contact-intro,.contact-main,.evidence-shortcuts { padding-inline: clamp(1.25rem,4vw,3.8rem) !important; } .contact-intro { padding-block: clamp(2.3rem,5vw,5rem) !important; } .contact-intro > *, .contact-main > *, .evidence-shortcuts > * { min-width:0; } .contact-intro h2 { padding-bottom: .08em; } /* ---------- Compact Dynamic Island ---------- */ .dynamic-island { width: auto !important; max-width: calc(100vw - 24px) !important; min-height: 48px !important; padding: 4px !important; bottom: max(14px, env(safe-area-inset-bottom)) !important; border-radius: 999px !important; } .island-core { width: auto !important; min-width: 148px !important; max-width: min(260px, calc(100vw - 32px)) !important; min-height: 40px !important; grid-template-columns: 10px minmax(0,auto) 26px !important; gap: .55rem !important; padding: .46rem .5rem .46rem .68rem !important; } .island-core > span { max-width: 168px !important; font-size: .75rem !important; } .island-chevron { width: 26px !important; height: 26px !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1 !important; } .dynamic-island.is-open { border-radius: 999px !important; } .dynamic-island.is-open .island-chevron { transform: rotate(45deg) !important; } .island-panel { width: min(330px, calc(100vw - 24px)) !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; padding: 8px !important; border-radius: 20px !important; } .island-panel a { min-height: 54px !important; padding: .62rem .68rem !important; border-radius: 14px !important; } /* ---------- Hero governance deck: visible destination controls ---------- */ .stage-controls { max-width: calc(100% - 16px); } .stage-dots { min-width: 0; overflow-x: auto; scrollbar-width: none; } .stage-dots::-webkit-scrollbar { display:none; } .stage-dot, .stage-dot.active { width: 30px !important; min-width: 30px !important; height: 26px !important; display: grid !important; place-items:center; color: var(--v13-faint); background: var(--v13-shell-soft) !important; border:1px solid var(--v13-line) !important; font-size:.58rem; font-weight:850; letter-spacing:.02em; } .stage-dot.active { color: var(--v13-ink); background: color-mix(in srgb,var(--accent) 15%,var(--v13-shell)) !important; border-color: color-mix(in srgb,var(--accent) 48%,var(--v13-line)) !important; } /* ---------- Interactive operating model ---------- */ .operating-shell { overflow: hidden; } .flow-diagram { scroll-behavior: smooth; scroll-snap-type: x mandatory !important; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; } .flow-node { scroll-snap-align: center; scroll-snap-stop: always; } .flow-node.active { box-shadow: 0 8px 24px color-mix(in srgb,var(--accent) 18%,transparent) !important; } .flow-detail { min-height: 46px; display:flex; align-items:center; } /* ---------- Finite horizontal decks: systems, capabilities, frameworks ---------- */ #systems .track, #capabilities .track, #frameworks .track { display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: clamp(286px, 30vw, 390px) !important; gap: var(--v14-card-gap) !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 8px 4px 18px !important; scroll-snap-type: x mandatory !important; overscroll-behavior-inline: contain; scroll-behavior: smooth; scrollbar-gutter: stable; scrollbar-width: thin; touch-action: pan-x pan-y; } #capabilities .track { grid-auto-columns: clamp(276px, 28vw, 360px) !important; } #systems .track > *, #capabilities .track > *, #frameworks .track > * { scroll-snap-align: start !important; scroll-snap-stop: normal; min-width: 0 !important; width: auto !important; } .project-card,.skill-card,.framework-card { min-height: 270px !important; padding: clamp(1.25rem,2vw,1.6rem) !important; } .project-card > *, .skill-card > *, .framework-card > * { max-width:100%; } .deck-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.1rem 0 .55rem; padding:.4rem .15rem; } .deck-meta { min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem .7rem; } .deck-meta b { color:var(--v13-ink); font-size:.8rem; } .deck-meta span { color:var(--v13-faint); font-size:.7rem; } .deck-controls { display:flex; gap:.45rem; flex:0 0 auto; } .deck-controls button { width:42px; height:42px; border-radius:50%; border:1px solid var(--v13-line); background:var(--v13-shell); color:var(--v13-ink); cursor:pointer; box-shadow:0 8px 24px color-mix(in srgb,#000 8%,transparent); } .deck-controls button:disabled { opacity:.32; cursor:default; box-shadow:none; } .deck-controls button:not(:disabled):hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,var(--v13-line)); } .track-hint { display:none !important; margin:.48rem 0 1rem !important; color:var(--v13-faint) !important; font-size:.68rem !important; letter-spacing:.07em !important; text-transform:uppercase; font-weight:800; } .track-hint.is-needed { display:block !important; } /* ---------- Device-aware architecture table scrolling ---------- */ .table-wrap { overscroll-behavior: contain; } .table-overflow-note { margin:.55rem .2rem 0; color:var(--v13-faint); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .table-overflow-note[hidden] { display:none !important; } /* ---------- AI risk matrix: explicit numerical scales ---------- */ .heatmap-panel { min-width:0; } .heatmap { min-height: 440px !important; height: clamp(440px, 42vw, 560px) !important; overflow: hidden !important; padding: 42px 54px 48px 58px !important; } .heat-node { max-width: 190px !important; min-width: 126px; display:flex !important; flex-direction:column; align-items:center; gap:.18rem; padding:.55rem .7rem !important; line-height:1.15; text-align:center; } .heat-node > span { color:inherit; font-size:.73rem; font-weight:850; } .heat-node > small { color:var(--v13-faint); font-size:.56rem; font-weight:700; white-space:nowrap; } .heat-node.active > small { color: color-mix(in srgb,var(--v13-ink) 68%,var(--v13-copy)); } .heat-scale { position:absolute; z-index:1; pointer-events:none; color:var(--v13-faint); font-size:.58rem; font-weight:750; } .heat-scale-x { left:58px; right:54px; bottom:15px; display:flex; justify-content:space-between; } .heat-scale-y { left:18px; top:42px; bottom:48px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; } .heatmap .axis.x { right:18px !important; bottom:28px !important; } .heatmap .axis.y { left:42px !important; top:14px !important; } .matrix-legend { display:flex; flex-wrap:wrap; gap:.55rem 1rem; margin-top:.8rem; color:var(--v13-faint); font-size:.66rem; } .matrix-legend span { display:inline-flex; gap:.3rem; align-items:center; } .matrix-legend b { color:var(--v13-copy); } /* Portfolio domain mix gets a high-signal stacked allocation visual. */ .domain-stack { height: 42px; display:flex; overflow:hidden; border:1px solid var(--v13-line); border-radius:14px; background:var(--v13-shell-soft); box-shadow: inset 0 1px rgba(255,255,255,.05); } .domain-stack span { display:flex; align-items:center; justify-content:center; min-width:0; color:#06110d; font-size:.68rem; font-weight:900; } .domain-stack .grc { flex:4; background:linear-gradient(90deg,#16c995,#5cf0c1); } .domain-stack .ai { flex:3; background:linear-gradient(90deg,#2ab7d2,#71ddf3); } .domain-stack .tprm { flex:3; background:linear-gradient(90deg,#c7943a,#e3bc6e); } html[data-theme="dark"] .domain-stack span { color:#07100d; } /* Readability for executive visuals. */ .visual-legend { margin:.7rem 0 0; color:var(--v13-faint); font-size:.66rem; line-height:1.45; } .radar { overflow:visible; } .radar-label { fill:var(--v13-faint); font:600 5.2px/1 var(--body-font); } .radar-scale { fill:var(--v13-faint); font:700 4.6px/1 var(--body-font); opacity:.75; } /* ---------- Responsive states ---------- */ @media (max-width: 1180px) { .availability-rail { grid-template-columns: minmax(190px,.8fr) 1fr !important; } .availability-rail a { grid-column:1/-1; text-align:left; } #systems .track,#capabilities .track,#frameworks .track { grid-auto-columns: clamp(300px, 44vw, 380px) !important; } } @media (max-width: 760px) { html { scroll-padding-top: 82px; } .executive-nav { top:max(7px,env(safe-area-inset-top)) !important; width:calc(100vw - 14px) !important; padding:.5rem .55rem !important; border-radius:22px !important; } .hero { padding-top: 94px !important; } .brand-premium strong { width:38px !important; height:38px !important; border-radius:13px !important; } .brand-premium span b { font-size:.8rem; } .nav-actions .cta { display:none; } .availability-rail { grid-template-columns:1fr !important; gap:.55rem !important; padding:1rem !important; } .availability-rail a { grid-column:auto; text-align:left; } .contact-shell { border-radius:28px !important; } .contact-intro { grid-template-columns:1fr !important; gap:1.25rem !important; padding:2rem 1.2rem !important; } .contact-intro h2 { font-size:clamp(2.65rem,12vw,4.3rem) !important; line-height:.94 !important; } .contact-main { grid-template-columns:1fr !important; padding:1.35rem 1.2rem !important; } .evidence-shortcuts { grid-template-columns:1fr !important; padding: .7rem 1.2rem 1.4rem !important; } .dynamic-island { bottom:max(10px,env(safe-area-inset-bottom)) !important; } .island-core { min-width:136px !important; max-width:220px !important; } .island-core > span { max-width:132px !important; } .island-panel { grid-template-columns:1fr !important; width:min(258px,calc(100vw - 20px)) !important; max-height:min(62vh,430px); overflow:auto; } /* Touch operating model: each stage snaps to the center; JS updates description from the centered node. */ .operating-shell { padding-inline:.7rem !important; } .operating-head { padding-inline:.25rem !important; } .flow-diagram { margin-inline:-.2rem !important; padding: .8rem calc(50% - 76px) !important; gap:.45rem !important; border-radius:20px !important; } .flow-node { flex:0 0 152px; min-width:152px !important; justify-content:center; text-align:center; } .flow-arrow { flex:0 0 18px; text-align:center; } .flow-detail { margin:.25rem .2rem 0; padding:.75rem .85rem !important; min-height:68px; line-height:1.5; } #systems .track,#capabilities .track,#frameworks .track { grid-auto-columns: min(84vw, 340px) !important; padding-inline:1px !important; scroll-padding-inline: 1px; } .project-card,.skill-card,.framework-card { min-height:250px !important; } .deck-toolbar { margin-top:.1rem; } .deck-controls button { width:40px; height:40px; } /* Phone matrix becomes a vertical visual scorecard rather than a cramped/scrolled plot. */ .heatmap { height:auto !important; min-height:0 !important; padding:12px !important; display:grid; gap:9px; background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 4%,var(--v13-shell)),var(--v13-shell)) !important; } .heatmap::before,.heatmap::after,.heatmap > .axis,.heat-scale { display:none !important; } .heat-node { position:relative !important; left:auto !important; top:auto !important; transform:none !important; max-width:none !important; width:100%; min-width:0; display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center; text-align:left; gap:.35rem .8rem; padding:.8rem .9rem !important; border-radius:16px !important; } .heat-node > span { font-size:.76rem; } .heat-node > small { white-space:normal; text-align:right; font-size:.6rem; } .matrix-legend { display:grid; grid-template-columns:1fr 1fr; } .domain-row { grid-template-columns:minmax(0,1fr) auto !important; } .domain-row .domain-track { grid-column:1/-1 !important; } .radar-label { font-size:5.4px; } } @media (max-width: 430px) { .hero,.section,.footer { width:calc(100% - 16px) !important; } .executive-nav .brand-premium span { display:none; } .executive-nav { grid-template-columns:1fr auto !important; } .island-core { min-width:126px !important; } .island-core > span { max-width:116px !important; } .stage-readout { max-width:calc(100% - 12px); right:6px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stage-controls { width:calc(100% - 12px); justify-content:space-between; } .stage-dots { flex:1; } .stage-dot,.stage-dot.active { width:28px !important; min-width:28px !important; } #systems .track,#capabilities .track,#frameworks .track { grid-auto-columns: calc(100vw - 42px) !important; } .deck-meta span { flex-basis:100%; } .matrix-legend { grid-template-columns:1fr; } } /* Fine pointers may use premium hover motion. Coarse pointers never depend on hover. */ @media (hover:none), (pointer:coarse) { .project-card:hover,.skill-card:hover,.framework-card:hover,.value-card:hover { transform:none !important; } .track { cursor:grab; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto !important; } .flow-diagram,#systems .track,#capabilities .track,#frameworks .track { scroll-behavior:auto !important; } .deck-controls button,.heat-node,.dynamic-island,.island-panel { transition:none !important; } } /* Framework cards are no longer one giant external link; only the explicit source CTA navigates away. */ .framework-source { display:inline-flex; align-items:center; margin-top:1rem; padding:.48rem .66rem; border:1px solid var(--v13-line); border-radius:999px; color:var(--v13-copy); background:var(--v13-shell-soft); text-decoration:none; font-size:.68rem; font-weight:800; } .framework-source:hover,.framework-source:focus-visible { color:var(--v13-ink); border-color:color-mix(in srgb,var(--accent) 42%,var(--v13-line)); } /* v14.1 availability rail: two-column composition is safer inside the hero-copy column than forcing three minimum-width columns. The email gets its own second-row slot. */ .availability-rail { grid-template-columns: minmax(170px,.78fr) minmax(0,1.22fr) !important; } .availability-rail > span { grid-column:2; } .availability-rail > a { grid-column:2; text-align:left !important; } @media (max-width:760px) { .availability-rail { grid-template-columns:1fr !important; } .availability-rail > span,.availability-rail > a { grid-column:auto; } } /* v14.2 final hardening ------------------------------------------------------- These last overrides neutralize legacy hints/layout widths from v12/v13 so v14 owns the adaptive behavior consistently. */ .table-wrap::after { content: none !important; display: none !important; } .operating-head small::before { content: none !important; display:none !important; } /* Keep the closed island genuinely pill-sized. The menu may grow only when opened and remains intentionally modest rather than spanning the viewport. */ .dynamic-island .island-panel { width: min(330px, calc(100vw - 24px)) !important; max-width: 330px !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; } @media (max-width: 760px) { .dynamic-island .island-panel { width: min(258px, calc(100vw - 20px)) !important; max-width: 258px !important; grid-template-columns: 1fr !important; } } /* Nodes with identical scores are deliberately nudged *within the same score cluster* so labels never cover one another. The printed values remain the authoritative risk/oversight scores. */ .heat-node { isolation:isolate; } .heat-node small { max-width: 100%; } .dynamic-island .island-panel { min-width: 0 !important; } /* v14.3 typography + table polish ------------------------------------------- */ html[data-theme="dark"] .executive-nav .brand-premium span b { color:#f3f8f6 !important; } html[data-theme="dark"] .executive-nav .brand-premium span small { color:#9cb0a9 !important; } html[data-theme="light"] .executive-nav .brand-premium span b { color:#101a17 !important; } html[data-theme="light"] .executive-nav .brand-premium span small { color:#3d4e48 !important; } /* Never split short data labels letter-by-letter. The table still reflows at spaces, and becomes horizontally scrollable only when its container truly cannot fit the readable minimum width. */ .table-wrap table { min-width:720px !important; table-layout:fixed; } .table-wrap th,.table-wrap td { overflow-wrap:normal !important; word-break:normal !important; } .table-wrap th:nth-child(1),.table-wrap td:nth-child(1) { width:13%; white-space:nowrap; } .table-wrap th:nth-child(2),.table-wrap td:nth-child(2) { width:43%; } .table-wrap th:nth-child(3),.table-wrap td:nth-child(3) { width:32%; } .table-wrap th:nth-child(4),.table-wrap td:nth-child(4) { width:12%; white-space:nowrap; } /* ================================================================ SOURCE LAYER: assets/premium-v15.css Consolidated into site-v16.css to reduce production requests while preserving cascade order and all original maintenance comments. ================================================================ */ /* * AAO Portfolio — v15 Stability + Precision Layer * ------------------------------------------------ * Priorities: * 1) never let horizontally changing UI move the document viewport; * 2) keep hover/touch/keyboard behavior equivalent without autoplay; * 3) reserve space for dynamic text so content changes do not cause layout jumps; * 4) animate only compositor-friendly transform/opacity where possible; * 5) preserve strict light/dark theme inheritance and responsive finite decks. */ .governance-stage, .stage-controls, .stage-dots, .governance-proof, .focus-pill, .dynamic-island, .island-panel { overflow-anchor: none; } .focus-pill [data-focus-word] { display: inline-block; min-inline-size: 16ch; font-variant-numeric: tabular-nums; } .governance-proof { width: min(100%, 620px); margin: .9rem auto 0; min-height: 214px; padding: 1rem; border: 1px solid var(--v13-line, var(--border)); border-radius: 22px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface2) 94%,transparent),color-mix(in srgb,var(--accent) 5%,var(--surface))); box-shadow: inset 0 1px color-mix(in srgb,#fff 50%,transparent), 0 18px 48px color-mix(in srgb,#000 7%,transparent); } html[data-theme="dark"] .governance-proof { background: radial-gradient(380px 180px at 0% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 72%),linear-gradient(145deg,#0b1311,#08100e); box-shadow: inset 0 1px rgba(255,255,255,.05),0 18px 48px rgba(0,0,0,.28); } .governance-proof-head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.72rem; } .governance-proof-head small { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .governance-proof-head b { flex:0 0 auto; padding:.34rem .58rem; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border)); border-radius:999px; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); color:var(--text); font-size:.67rem; } .governance-proof-grid { display:grid; gap:.52rem; } .governance-proof-grid article { display:grid; grid-template-columns:minmax(86px,.34fr) minmax(0,1fr); gap:.7rem; align-items:start; min-width:0; padding:.58rem .64rem; border:1px solid color-mix(in srgb,var(--border) 80%,transparent); border-radius:14px; background:color-mix(in srgb,var(--surface) 86%,transparent); } html[data-theme="dark"] .governance-proof-grid article { background:#0d1714; } .governance-proof-grid span { color:var(--accent); font-size:.61rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; } .governance-proof-grid strong { min-width:0; color:var(--text); font-size:.72rem; line-height:1.42; font-weight:720; overflow-wrap:anywhere; } .governance-proof > p { margin:.68rem 0 0; color:var(--muted); font-size:.62rem; line-height:1.45; } .stage-dot:hover, .stage-dot:focus-visible { border-color: color-mix(in srgb,var(--accent) 55%,var(--border)) !important; box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 8%,transparent),0 8px 24px color-mix(in srgb,var(--accent) 12%,transparent); transform: translateY(-1px); } .stage-dot.active { transform: translateY(-1px) scale(1.04); } .governance-card, .stage-dot, .governance-proof-grid article { transition: transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease,border-color .2s ease,box-shadow .2s ease; } .governance-card.is-focus { will-change: transform,opacity; } .risk-compression-panel { grid-column:1 / -1; } .compression-hero { display:flex; align-items:baseline; gap:.7rem; margin:1rem 0 .8rem; } .compression-hero strong { font-size:clamp(2.5rem,5vw,5.4rem); line-height:.9; letter-spacing:-.07em; color:var(--text); font-variant-numeric:tabular-nums; } .compression-hero span { color:var(--muted); font-weight:750; } .compression-bars { display:grid; gap:.72rem; } .compression-bars > div { display:grid; grid-template-columns:minmax(80px,120px) minmax(0,1fr) 52px; gap:.8rem; align-items:center; } .compression-bars span { color:var(--muted); font-size:.75rem; font-weight:760; } .compression-bars i { position:relative; height:12px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--text) 7%,transparent); } .compression-bars i b { display:block; width:var(--bar); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 58%,var(--accent))); } .compression-bars .reduction i b { background:linear-gradient(90deg,var(--accent),var(--cyan)); } .compression-bars > div > strong { text-align:right; font-variant-numeric:tabular-nums; } .compression-meta { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; } .compression-meta span { padding:.48rem .68rem; border:1px solid var(--border); border-radius:999px; background:var(--surface2); color:var(--muted); font-size:.72rem; } .compression-meta b { color:var(--text); } .matrix-summary { display:grid; gap:.55rem; margin-top:.9rem; padding:.8rem; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb,var(--surface2) 88%,transparent); } .matrix-summary > div { display:grid; grid-template-columns:minmax(94px,130px) minmax(0,1fr) minmax(88px,auto); gap:.65rem; align-items:center; } .matrix-summary span,.matrix-summary strong { font-size:.68rem; } .matrix-summary span { color:var(--muted); } .matrix-summary strong { color:var(--text); text-align:right; font-variant-numeric:tabular-nums; } .matrix-summary i { height:8px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,var(--text) 7%,transparent); } .matrix-summary i b { display:block; width:var(--bar); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--cyan)); } .matrix-summary p { margin:.2rem 0 0; color:var(--muted); font-size:.66rem; line-height:1.45; } .flow-diagram, .stage-dots, [data-deck-track], .table-wrap { -webkit-overflow-scrolling: touch; scroll-behavior:smooth; } .governance-proof *, .matrix-summary *, .compression-bars *, .dynamic-island * { min-width:0; } @media (max-width: 760px) { .governance-proof { min-height:232px; padding:.78rem; border-radius:18px; } .governance-proof-grid article { grid-template-columns:78px minmax(0,1fr); gap:.55rem; } .governance-proof-grid strong { font-size:.68rem; } .governance-proof-head { align-items:flex-start; } .compression-bars > div { grid-template-columns:74px minmax(0,1fr) 46px; gap:.55rem; } .matrix-summary > div { grid-template-columns:92px minmax(0,1fr); } .matrix-summary > div > strong { grid-column:2; text-align:left; margin-top:-.3rem; } .cursor-aura { display:none !important; } .dynamic-island,.island-panel { backdrop-filter:blur(14px) saturate(125%) !important; -webkit-backdrop-filter:blur(14px) saturate(125%) !important; } .governance-card,.project-card,.skill-card,.framework-card,.panel,.visual-card { box-shadow:0 10px 28px color-mix(in srgb,#000 8%,transparent) !important; } } @media (max-width: 390px) { .governance-proof-head { display:grid; } .governance-proof-head b { justify-self:start; } .governance-proof-grid article { grid-template-columns:1fr; gap:.2rem; } .governance-proof { min-height:306px; } .compression-hero { display:grid; gap:.25rem; } } @media (pointer:coarse) { .tilt { transform:none !important; } .governance-card.is-focus { will-change:auto; } } @media (prefers-reduced-motion: reduce) { .governance-card,.stage-dot,.governance-proof-grid article, .compression-bars i b,.matrix-summary i b { transition:none !important; } .flow-diagram,.stage-dots,[data-deck-track],.table-wrap { scroll-behavior:auto !important; } } /* ================================================================ SOURCE LAYER: assets/premium-v16.css Consolidated into site-v16.css to reduce production requests while preserving cascade order and all original maintenance comments. ================================================================ */ /* * AAO Portfolio v16 — adaptive luxury + performance correction layer * ================================================================== * This file loads LAST. It is intentionally written as a compact override layer * rather than rewriting the whole visual system. The comments explain which * variables to edit for future changes and which rules are structural. * * PRIMARY EDIT POINTS * 1) Display typeface: --display-v16 below. It uses premium-looking system serif * faces only, so there is no Google Fonts/CDN failure mode. * 2) Accent strength: --v16-glow-light / --v16-glow-dark. * 3) Governance stack spacing: .governance-card translations in the three state * rules (default / .is-far / .is-near / .is-focus). * 4) Mobile breakpoints: 940px (architecture rail), 760px (touch-first layout), * 460px (very narrow phones). * * PERFORMANCE RULES * - No continuously running decorative animation in the hero. * - Moving cards animate transform + opacity only. * - Backdrop blur is kept on the compact navigation only; the large governance * cards use solid/gradient surfaces to avoid large-area GPU blur cost. */ :root { --display-v16: "Iowan Old Style", "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif; --ui-v16: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --v16-ease: cubic-bezier(.22,.78,.18,1); --v16-glow-light: rgba(17,150,111,.13); --v16-glow-dark: rgba(55,217,168,.18); } body { font-family: var(--ui-v16) !important; } .hero h1, .section-title h2, .closing-card h2, .contact-intro h2, .contact-copy h2, .contact-statement h2, .mandate-card h3, .social-showcase h2 { font-family: var(--display-v16) !important; font-weight: 600 !important; letter-spacing: -.045em !important; text-wrap: balance; } .hero h1 { line-height: .91 !important; letter-spacing: -.055em !important; font-size: clamp(3.9rem, 6.15vw, 7.1rem) !important; } .section-title h2 { line-height: .96 !important; } /* Avoid expensive forever-running decorative effects. The site still animates when state actually changes, but does not burn frames while idle. */ .glow-badge, .section::before, .flow-arrow { animation: none !important; } .cursor-aura { width: 340px !important; height: 340px !important; filter: blur(12px) !important; opacity: .78; } /* -------------------------------------------------------------------------- HERO GOVERNANCE: clean, readable, no overlap with evidence trace -------------------------------------------------------------------------- */ .portfolio-snapshot { padding: clamp(1.2rem, 2.4vw, 1.75rem) !important; overflow: hidden !important; } .governance-stage { position: relative !important; height: 268px !important; margin: .85rem 0 .35rem !important; border: 1px solid var(--v13-line); border-radius: 26px; background: radial-gradient(360px 170px at 50% 42%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 72%), color-mix(in srgb,var(--v13-shell-soft) 92%,transparent); contain: layout paint; overflow: hidden; touch-action: pan-y; overscroll-behavior: contain; } html[data-theme="light"] .governance-stage { background: radial-gradient(360px 170px at 50% 42%, rgba(17,150,111,.12), transparent 72%), #f8fbf9; } html[data-theme="dark"] .governance-stage { background: radial-gradient(380px 180px at 50% 42%, rgba(55,217,168,.11), transparent 72%), #07100d; } .governance-interaction-hint { position: absolute; z-index: 40; left: 14px; top: 10px; margin: 0; color: var(--v13-faint); font-size: .60rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; pointer-events: none; } .stage-readout { top: 8px !important; right: 10px !important; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .stage-orbit { position: absolute !important; z-index: 1; left: 14% !important; right: 14% !important; top: 52% !important; width: auto !important; height: 1px !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 62%,transparent),transparent); opacity: .58 !important; } .stage-orbit::before, .stage-orbit::after { display: none !important; } .governance-deck { position: absolute !important; z-index: 5; inset: 42px 6px 58px !important; transform: none !important; perspective: none !important; transition: none !important; overflow: hidden; } .governance-card { position: absolute !important; left: 50% !important; top: 50% !important; width: min(258px, 64vw) !important; height: 150px !important; margin: -75px 0 0 -129px !important; padding: 1.05rem 1.1rem !important; opacity: 0 !important; pointer-events: none; transform: translate3d(calc(var(--g-distance, 0) * 62px), 8px, 0) scale(.84) !important; transition: transform .29s var(--v16-ease), opacity .20s ease, border-color .20s ease, box-shadow .20s ease !important; background: linear-gradient(150deg,var(--v13-shell),var(--v13-shell-soft)) !important; border: 1px solid var(--v13-line) !important; border-radius: 24px !important; box-shadow: 0 16px 38px color-mix(in srgb,#000 9%,transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: hidden; } html[data-theme="dark"] .governance-card { background: linear-gradient(150deg,#0a1512,#07100d) !important; box-shadow: 0 18px 42px rgba(0,0,0,.24) !important; } .governance-card.is-far { opacity: .18 !important; transform: translate3d(calc(var(--g-distance) * 58px), 6px, 0) scale(.87) !important; pointer-events: auto; z-index: 3; } .governance-card.is-near { opacity: .48 !important; transform: translate3d(calc(var(--g-distance) * 76px), 3px, 0) scale(.93) !important; pointer-events: auto; z-index: 5; } .governance-card.is-focus { opacity: 1 !important; pointer-events: auto; z-index: 12; transform: translate3d(0,0,0) scale(1) !important; border-color: color-mix(in srgb,var(--accent) 64%,var(--v13-line)) !important; background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,var(--v13-shell)),var(--v13-shell)) !important; box-shadow: 0 22px 54px color-mix(in srgb,var(--accent) 17%,transparent), 0 0 0 1px color-mix(in srgb,var(--accent) 7%,transparent) inset !important; will-change: transform, opacity; } html[data-theme="dark"] .governance-card.is-focus { background: linear-gradient(145deg,#0c221b,#07110e) !important; } .governance-card small { display:block; margin-bottom: .7rem; font-size: .62rem !important; letter-spacing: .08em; text-transform: uppercase; } .governance-card strong { display:block; font-size: 1.15rem !important; line-height: 1.08; letter-spacing: -.02em; } .governance-card span { display:block; margin-top:.45rem; font-size:.76rem; line-height:1.35; } .governance-card::after { height:2px !important; left:1.05rem !important; right:1.05rem !important; bottom:1rem !important; } .stage-controls { bottom: 8px !important; max-width: calc(100% - 18px) !important; padding: 4px 6px !important; box-shadow: 0 9px 24px color-mix(in srgb,#000 8%,transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .stage-arrow:disabled { opacity:.30; cursor:default; transform:none !important; } .stage-dots { max-width: min(290px, 62vw); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline: 40%; scrollbar-width:none; touch-action: pan-x; } .stage-dots::-webkit-scrollbar { display:none; } .stage-dot { scroll-snap-align:center; flex:0 0 auto; } /* The evidence trace now sits below the moving deck, never behind it. */ .governance-proof-v16 { width:100% !important; min-height:0 !important; margin:.75rem 0 1rem !important; padding:.85rem !important; border-radius:20px !important; box-shadow:none !important; background:color-mix(in srgb,var(--v13-shell-soft) 92%,transparent) !important; overflow-anchor:none; } html[data-theme="light"] .governance-proof-v16 { background:#f7faf8 !important; } html[data-theme="dark"] .governance-proof-v16 { background:#08110e !important; } .governance-proof-v16 .governance-proof-head { margin-bottom:.55rem; } .governance-proof-v16 .governance-proof-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; } .governance-proof-v16 .governance-proof-grid article { display:grid !important; grid-template-columns:1fr !important; gap:.3rem !important; min-height:105px; padding:.7rem !important; } .governance-proof-v16 .governance-proof-grid strong { font-size:.68rem !important; line-height:1.42; } .governance-proof-v16 > p { font-size:.59rem !important; } /* -------------------------------------------------------------------------- AUTO-SWITCH RAILS + ARCHITECTURE LATTICE -------------------------------------------------------------------------- */ .auto-switch-note { margin: 0 0 .65rem; color: var(--v13-faint); font-size:.66rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; } .flagship-grid > .architecture-auto-note { grid-column:1 / -1; margin: 0; padding:.9rem 1rem 0; } .flagship-grid > .flag-tabs { grid-column:1; } .flagship-grid > .flag-panels { grid-column:2; } .flag-tabs button, .filter-row button { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--v16-ease), box-shadow .18s ease !important; } .flag-tabs button:hover, .filter-row button:hover { transform: translateY(-1px) !important; } .flag-tabs button.active, .filter-row button.active { background: color-mix(in srgb,var(--accent) 15%,var(--v13-shell)) !important; color: var(--v13-ink) !important; border-color: color-mix(in srgb,var(--accent) 48%,var(--v13-line)) !important; box-shadow: 0 9px 24px color-mix(in srgb,var(--accent) 9%,transparent) !important; } .module-lattice { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin:1rem 0; } .module-lattice::before { content:""; position:absolute; z-index:0; left:11%; right:11%; top:50%; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 48%,var(--v13-line)),transparent); } .module-lattice article { position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; gap:.2rem .55rem; align-items:start; min-height:106px; padding:.8rem; border:1px solid var(--v13-line); border-radius:18px; background:color-mix(in srgb,var(--v13-shell) 94%,transparent); box-shadow:0 10px 26px color-mix(in srgb,#000 6%,transparent); } .module-lattice article > span { grid-row:1 / span 2; display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:color-mix(in srgb,var(--accent) 13%,var(--v13-shell-soft)); color:var(--accent); font-size:.62rem; font-weight:900; font-variant-numeric:tabular-nums; } .module-lattice small { color:var(--v13-faint); font-size:.59rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; } .module-lattice strong { color:var(--v13-ink); font-size:.72rem; line-height:1.35; } /* Filter rails remain ordinary wrapped controls on roomy screens. When the viewport becomes narrow they become finite horizontal rails, not infinite loops. */ .filter-row[data-auto-rail] { overscroll-behavior-inline:contain; } /* Hidden filter cards must stay out of layout even when older CSS gives cards a display value. This is why the runtime uses the native hidden attribute. */ #systems [hidden], #capabilities [hidden], .risk-row[hidden] { display:none !important; } /* -------------------------------------------------------------------------- CARD SURFACES — inspiration from premium product/profile cards without images -------------------------------------------------------------------------- */ .project-card, .skill-card, .framework-card { border-radius: 26px !important; background: linear-gradient(155deg,color-mix(in srgb,var(--accent) 3%,var(--v13-shell)),var(--v13-shell)) !important; box-shadow:0 16px 40px color-mix(in srgb,#000 7%,transparent) !important; } .project-card::before, .skill-card::before, .framework-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--cyan) 68%,var(--accent)),transparent 78%); opacity:.75; } .project-card h3, .skill-card h3, .framework-card h3 { letter-spacing:-.025em; } /* Strict theme guarantees added last so old layers cannot reintroduce mixed surfaces. These are deliberately explicit. */ html[data-theme="light"] .portfolio-snapshot, html[data-theme="light"] .governance-stage, html[data-theme="light"] .governance-proof-v16, html[data-theme="light"] .flagship-grid, html[data-theme="light"] .flag-tabs, html[data-theme="light"] .flag-panel, html[data-theme="light"] .module-lattice article, html[data-theme="light"] .project-card, html[data-theme="light"] .skill-card, html[data-theme="light"] .framework-card { color:#0d1714 !important; border-color:rgba(13,23,20,.12) !important; } html[data-theme="dark"] .portfolio-snapshot, html[data-theme="dark"] .governance-stage, html[data-theme="dark"] .governance-proof-v16, html[data-theme="dark"] .flagship-grid, html[data-theme="dark"] .flag-tabs, html[data-theme="dark"] .flag-panel, html[data-theme="dark"] .module-lattice article, html[data-theme="dark"] .project-card, html[data-theme="dark"] .skill-card, html[data-theme="dark"] .framework-card { color:#f3f8f6 !important; border-color:rgba(233,255,247,.13) !important; } html[data-theme="light"] .flagship-grid, html[data-theme="light"] .flag-tabs, html[data-theme="light"] .flag-panel, html[data-theme="light"] .module-lattice article { background:#fff !important; } html[data-theme="dark"] .flagship-grid, html[data-theme="dark"] .flag-tabs, html[data-theme="dark"] .flag-panel, html[data-theme="dark"] .module-lattice article { background:#070d0b !important; } /* -------------------------------------------------------------------------- RESPONSIVE / INPUT ADAPTATION -------------------------------------------------------------------------- */ @media (max-width: 1180px) { .hero-grid { grid-template-columns:minmax(0,1fr) minmax(360px,440px) !important; } } @media (max-width: 940px) { .hero-grid { grid-template-columns:1fr !important; } .portfolio-snapshot { max-width:760px; margin-inline:auto; } .flagship-grid { grid-template-columns:1fr !important; overflow:visible !important; } .flagship-grid > .architecture-auto-note, .flagship-grid > .flag-tabs, .flagship-grid > .flag-panels { grid-column:1 !important; } .flag-tabs { position:relative !important; top:auto !important; display:flex !important; flex-wrap:nowrap !important; gap:.55rem !important; overflow-x:auto !important; overflow-y:hidden !important; padding-block:.7rem !important; padding-inline:max(.7rem, calc(50% - 108px)) !important; scroll-snap-type:x mandatory; scroll-padding-inline:36%; scrollbar-width:none; touch-action:pan-x; border-right:0 !important; border-bottom:1px solid var(--v13-line) !important; } .flag-tabs::-webkit-scrollbar { display:none; } .flag-tabs::before { display:none !important; } .flag-tabs button { flex:0 0 clamp(160px,42vw,220px); min-height:58px !important; scroll-snap-align:center; } .flag-panel { padding:clamp(1rem,3vw,1.4rem) !important; } } @media (max-width: 760px) { .hero h1 { font-size:clamp(3.15rem,14.2vw,5.1rem) !important; line-height:.91 !important; } .section-title h2 { font-size:clamp(2.55rem,11.8vw,4.2rem) !important; } .governance-stage { height:246px !important; border-radius:22px; } .governance-interaction-hint { display:none; } .stage-readout { top:8px !important; left:10px !important; right:auto !important; max-width:calc(100% - 20px); } .governance-deck { inset:42px 2px 56px !important; } .governance-card { width:min(232px,68vw) !important; height:142px !important; margin:-71px 0 0 clamp(-116px,-34vw,-100px) !important; padding:.9rem !important; } .governance-card.is-near { transform:translate3d(calc(var(--g-distance) * 57px),3px,0) scale(.92) !important; opacity:.42 !important; } .governance-card.is-far { transform:translate3d(calc(var(--g-distance) * 45px),5px,0) scale(.86) !important; opacity:.10 !important; } .stage-controls { width:calc(100% - 16px) !important; justify-content:space-between; } .stage-dots { max-width:calc(100% - 82px); } .governance-proof-v16 .governance-proof-grid { grid-template-columns:1fr !important; } .governance-proof-v16 .governance-proof-grid article { min-height:0; } .module-lattice { grid-template-columns:1fr; gap:.5rem; } .module-lattice::before { left:22px; right:auto; top:10%; bottom:10%; width:1px; height:auto; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 48%,var(--v13-line)),transparent); } .module-lattice article { min-height:88px; padding:.7rem; } .filter-row[data-auto-rail] { display:flex !important; flex-wrap:nowrap !important; gap:.55rem !important; overflow-x:auto !important; overflow-y:hidden !important; margin-inline:-2px; padding-block:4px 10px; padding-inline:max(2px, calc(50% - 92px)); scroll-snap-type:x mandatory; scroll-padding-inline:34%; scrollbar-width:none; touch-action:pan-x; } .filter-row[data-auto-rail]::-webkit-scrollbar { display:none; } .filter-row[data-auto-rail] button { flex:0 0 auto; min-width:max-content; scroll-snap-align:center; } .auto-switch-note { font-size:.60rem; } .cursor-aura { display:none !important; } } @media (max-width: 460px) { .governance-stage { height:232px !important; } .governance-card { width:min(214px,70vw) !important; height:136px !important; margin:-68px 0 0 clamp(-107px,-35vw,-94px) !important; } .governance-card strong { font-size:1.03rem !important; } .governance-card span { font-size:.70rem; } .stage-dot, .stage-dot.active { display:grid !important; width:31px !important; min-width:31px !important; } .stage-dot:nth-child(even) { display:grid !important; } .snapshot-metrics { grid-template-columns:1fr 1fr !important; } } @media (hover: none) { .governance-card:hover, .project-card:hover, .skill-card:hover, .framework-card:hover { transform:none; } } @media (prefers-reduced-motion: reduce) { .governance-card, .flag-tabs button, .filter-row button, .project-card, .skill-card, .framework-card { transition:none !important; } .stage-dots, .flag-tabs, .filter-row[data-auto-rail], [data-deck-track], .flow-diagram { scroll-behavior:auto !important; } } /* v16.1 narrow-phone governance control fit ------------------------------------------ Keep all seven numbered destinations visible alongside both arrows on phones. This avoids a partially clipped 07 control while preserving the swipe gesture on the larger card deck itself. */ @media (max-width: 460px) { .stage-controls { width: calc(100% - 12px) !important; max-width: none !important; gap: 4px !important; padding: 4px !important; justify-content: center !important; } .stage-arrow { width: 30px !important; min-width: 30px !important; height: 30px !important; flex: 0 0 30px !important; } .stage-dots { max-width: none !important; overflow: visible !important; gap: 3px !important; scroll-snap-type: none !important; } .stage-dot, .stage-dot.active { width: 27px !important; min-width: 27px !important; height: 26px !important; font-size: .54rem !important; } }