/* ============================================================ KILLIAN STONE — Digital Transformation & Marketing Leadership Design system: "Ledger" — matte black ground, gold signal accent, editorial serif meets systems mono. Note: fonts are loaded via tags in each page's (not @import here) — @import forces the browser to discover and fetch the font CSS only after this stylesheet has already downloaded, turning one request into a slow serial chain. ============================================================ */ :root{ --ink: #0A0A0A; --ink-2: #101010; --panel: #161616; --panel-2: #1D1D1D; --line: #2E2E2E; --line-soft: #202020; --text: #F6F5F1; --muted: #A6A29A; --muted-2: #6B675F; --blue: #D4AF37; --blue-soft: rgba(212,175,55,.14); --amber: #EDE6D6; --amber-soft: rgba(237,230,214,.10); --serif: 'Fraunces', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; --container: 1320px; --radius: 14px; --radius-sm: 8px; --ease: cubic-bezier(.16,.84,.44,1); } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } body{ margin:0; background: var(--ink); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* subtle grain / vignette ground texture */ body::before{ content:""; position: fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(1100px 620px at 82% -10%, rgba(212,175,55,.12), transparent 60%), radial-gradient(900px 520px at -10% 30%, rgba(237,230,214,.05), transparent 55%); } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family: inherit; } h1,h2,h3,h4{ font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0 0 .4em; letter-spacing: -0.01em; } p{ margin: 0 0 1em; color: var(--muted); } .container{ max-width: var(--container); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; } .eyebrow{ font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .eyebrow::before{ content:""; width: 22px; height: 1px; background: var(--blue); display:inline-block; } /* ---------- Buttons ---------- */ .btn{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: 14.5px; cursor: pointer; border: 1px solid transparent; transition: transform .35s var(--ease), background .3s, border-color .3s, box-shadow .3s; white-space: nowrap; } .btn:hover{ transform: translateY(-2px); } .btn-primary{ background: var(--blue); color: #06101F; } .btn-primary:hover{ box-shadow: 0 10px 30px -8px rgba(212,175,55,.45); } .btn-ghost{ background: transparent; border-color: var(--line); color: var(--text); } .btn-ghost:hover{ border-color: var(--blue); background: var(--blue-soft); } .btn-sm{ padding: 10px 18px; font-size: 13px; } .btn svg{ width:16px; height:16px; transition: transform .3s var(--ease); } .btn:hover svg{ transform: translate(3px,-3px); } /* ---------- Nav ---------- */ .nav{ position: fixed; top:0; left:0; right:0; z-index: 100; padding: 22px 0; transition: padding .35s var(--ease), background .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; } .nav.is-scrolled{ padding: 14px 0; background: rgba(10,14,20,.78); backdrop-filter: blur(14px); border-color: var(--line-soft); } .nav .container{ display:flex; align-items:center; justify-content:space-between; } .brand{ display:flex; align-items:center; gap:12px; font-family: var(--serif); font-weight:600; font-size: 18px; letter-spacing: .01em; } .brand-mark{ width: 36px; height:36px; border-radius: 10px; background: var(--ink); border: 1.5px solid var(--blue); display:flex; align-items:center; justify-content:center; color: var(--blue); font-family: var(--mono); font-weight:700; font-size:13px; } .nav-links{ display:flex; align-items:center; gap: 6px; } .nav-links a{ padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--muted); border-radius: 999px; transition: color .25s, background .25s; } .nav-links a:hover, .nav-links a.active{ color: var(--text); background: var(--panel-2); } .nav-cta{ display:flex; align-items:center; gap:14px; } .nav-toggle{ display:none; width:40px; height:40px; border-radius: 10px; border:1px solid var(--line); background: var(--panel); align-items:center; justify-content:center; cursor:pointer; } .nav-toggle span{ position:relative; width:16px; height:1px; background:var(--text); display:block; } .nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:16px; height:1px; background:var(--text); transition: transform .3s; } .nav-toggle span::before{ top:-5px; } .nav-toggle span::after{ top:5px; } .nav-backdrop{ display:none; } @media (max-width: 860px){ .nav-backdrop{ display:block; position:fixed; inset:0; z-index:105; background: rgba(6,6,6,.6); opacity:0; pointer-events:none; transition: opacity .4s var(--ease); } .nav-backdrop.open{ opacity:1; pointer-events:auto; } .nav-links{ position:fixed; top:0; right:0; height:100vh; width:min(340px,86vw); background: linear-gradient(165deg, var(--ink-2), var(--panel)); border-left:1px solid var(--line); flex-direction:column; align-items:flex-start; justify-content:center; padding: 60px 36px; gap:4px; transform: translateX(100%); transition: transform .45s var(--ease); box-shadow: -40px 0 70px -24px rgba(0,0,0,.65); z-index: 106; } .nav-links.open{ transform: translateX(0); } .nav-links a{ width:100%; padding: 16px 2px; font-family: var(--serif); font-size: 24px; font-weight:600; color: var(--text); border-bottom: 1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; background: none; border-radius:0; } .nav-links a:last-child{ border-bottom:none; } .nav-links a:hover, .nav-links a.active{ color: var(--blue); background:none; } .nav-links a.active{ text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .nav-toggle{ display:flex; z-index: 110; } .nav-cta .btn-primary{ display:none; } } /* ---------- Hero ---------- */ .hero{ position: relative; padding: 190px 0 120px; overflow: hidden; } .site-constellation{ position: fixed; inset: 0; display: block; z-index: -1; pointer-events: none; } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .hero-grid{ display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 60px; align-items:center; } .hero h1{ font-size: clamp(42px, 6vw, 74px); color: var(--text); } .hero h1 em{ font-style: normal; background: linear-gradient(100deg, var(--blue), var(--amber) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub{ font-size: 18px; max-width: 480px; margin-bottom: 34px; } .hero-greeting{ font-size: clamp(40px,6vw,72px); color: var(--text); } .hero-name{ display:block; color: var(--blue); } .hero-actions .btn svg{ width:16px; height:16px; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 56px; } .hero-signal{ position:relative; width:100%; aspect-ratio: 4/3; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--panel), var(--ink-2)); overflow:hidden; display:flex; align-items:center; justify-content:center; } .hero-signal svg{ width:92%; height:auto; } .hero-signal .grain{ position:absolute; inset:0; background: radial-gradient(600px 300px at 70% 20%, rgba(212,175,55,.18), transparent 60%); } .hero-signal-tag{ position:absolute; bottom:18px; left:18px; font-family: var(--mono); font-size:11.5px; color: var(--muted-2); display:flex; align-items:center; gap:8px; } .hero-signal-tag .dot{ width:7px;height:7px;border-radius:50%; background: var(--amber); box-shadow:0 0 0 4px var(--amber-soft); } /* Stats */ .stats{ display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; } .stat{ padding: 0; text-align:left; } .stat-num{ font-family: var(--mono); font-weight:600; font-size: clamp(18px,2vw,26px); letter-spacing: -0.01em; color: var(--text); display:flex; align-items:baseline; gap:2px; white-space: nowrap; } .stat-num .accent{ color: var(--blue); } .stat-label{ font-size: 12.5px; color: var(--muted-2); margin-top:6px; } @media (max-width: 860px){ .hero{ padding: 130px 0 60px; } .hero-grid{ grid-template-columns: 1fr; } .hero-copy{ order: 2; } .hero-portrait{ order: 1; margin-bottom: 4px; aspect-ratio: 1/1; max-height: 260px; } .hero-portrait-ring{ width: min(220px, 62%); margin-top: 0; } .stats{ grid-template-columns: repeat(2,1fr); } } /* ---------- Section scaffolding ---------- */ section{ position:relative; padding: 120px 0; } .section-tight{ padding: 90px 0; } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 40px; margin-bottom: 56px; flex-wrap:wrap; } .section-head h2{ font-size: clamp(30px,3.6vw,44px); max-width: 620px; } .section-head p{ max-width: 420px; margin:0; } .reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{ opacity:1; transform:none; } .reveal-delay-1{ transition-delay: .08s; } .reveal-delay-2{ transition-delay: .16s; } .reveal-delay-3{ transition-delay: .24s; } .reveal-delay-4{ transition-delay: .32s; } /* ---------- Case study cards ---------- */ .case-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; } .case-card{ position:relative; border:1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow:hidden; transition: transform .45s var(--ease), border-color .35s, box-shadow .45s; } .case-card:hover{ transform: translateY(-6px); border-color: rgba(212,175,55,.4); box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); } .case-cover{ position:relative; aspect-ratio: 16/10; overflow:hidden; border-bottom: 1px solid var(--line); } .case-cover svg{ width:100%; height:100%; display:block; transition: transform .6s var(--ease); } .case-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s var(--ease); } .case-card:hover .case-cover svg, .case-card:hover .case-cover img{ transform: scale(1.05); } .case-body{ padding: 26px 26px 28px; } .case-tag{ font-family: var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--amber); margin-bottom:10px; display:block; } .case-body h3{ font-size: 23px; margin-bottom: 8px; } .case-body p{ font-size: 14.5px; margin-bottom: 18px; } .case-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 18px; } .chip{ font-family: var(--mono); font-size:11px; padding:5px 10px; border-radius:999px; border:1px solid var(--line); color: var(--muted); } .case-link{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color: var(--blue); } .case-link svg{ width:14px;height:14px; transition: transform .3s var(--ease); } .case-card:hover .case-link svg{ transform: translate(3px,-3px); } @media (max-width: 860px){ .case-grid{ grid-template-columns: 1fr; } } /* ---------- Gallery ---------- */ .gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .gallery-tile{ aspect-ratio: 1/1; border-radius: var(--radius-sm); border: 1px dashed var(--line); background: repeating-linear-gradient(135deg, var(--panel), var(--panel) 10px, var(--panel-2) 10px, var(--panel-2) 20px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding: 14px; position:relative; overflow:hidden; transition: transform .4s var(--ease), border-color .3s; } .gallery-tile:hover{ transform: translateY(-4px); border-color: rgba(212,175,55,.5); } .gallery-tile svg{ width:26px; height:26px; color: var(--muted-2); flex-shrink:0; } .gallery-tile span{ font-family: var(--mono); font-size:11px; color: var(--muted); letter-spacing:.03em; line-height:1.4; } @media (max-width: 860px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } } /* ---------- Timeline (experience) ---------- */ .timeline{ border-left: 1px solid var(--line); margin-left: 8px; } .tl-item{ position:relative; padding: 0 0 52px 34px; } .tl-item:last-child{ padding-bottom:0; } .tl-item::before{ content:""; position:absolute; left:-6px; top:4px; width:11px; height:11px; border-radius:50%; background: var(--ink); border: 2px solid var(--blue); } .tl-role{ font-size: 20px; margin-bottom:2px; } .tl-org{ font-family: var(--mono); font-size:13px; color: var(--amber); margin-bottom: 4px; display:block; } .tl-date{ font-size: 12.5px; color: var(--muted-2); margin-bottom:14px; display:block; } .tl-item p{ max-width: 640px; font-size: 14.5px; } /* ---------- Education strip ---------- */ .edu-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; } .edu-card{ border:1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 26px 28px; transition: transform .35s var(--ease), border-color .3s; } .edu-card:hover{ transform: translateY(-4px); border-color: rgba(212,175,55,.4); } .edu-date{ font-family: var(--mono); font-size:12px; color: var(--muted-2); margin-bottom:10px; display:block; } .edu-card h3{ font-size:19px; margin-bottom:4px; } .edu-card p{ font-size:13.5px; margin:0; } .edu-grade{ display:inline-block; margin-top:12px; font-family: var(--mono); font-size:12.5px; color: var(--amber); border:1px solid var(--amber-soft); background: var(--amber-soft); padding:4px 10px; border-radius:6px; } /* ---------- Journey ---------- */ .journey{ position:relative; } .journey-row{ display:grid; grid-template-columns: 140px 1fr; gap: 40px; padding: 44px 0; border-top: 1px solid var(--line-soft); } .journey-row:first-child{ border-top:none; } .journey-year{ font-family: var(--serif); font-size: 38px; font-weight:600; color: var(--text); position: sticky; top: 120px; align-self:start; } .journey-year span{ display:block; font-family: var(--mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-2); font-weight:400; margin-top:6px; } .journey-content h3{ font-size: 21px; margin-bottom: 10px; } .journey-content p{ font-size: 14.5px; max-width: 680px; } .journey-thumbs{ display:flex; gap: 14px; margin-top: 20px; flex-wrap:wrap; } .journey-thumb{ width: 118px; height: 118px; border-radius: 10px; border:1px solid var(--line); overflow:hidden; position:relative; flex-shrink:0; transition: transform .35s var(--ease), border-color .3s; } .journey-thumb:hover{ transform: translateY(-4px) scale(1.03); border-color: rgba(212,175,55,.5); } .journey-thumb svg{ width:100%; height:100%; display:block; } .journey-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .journey-thumb-label{ position:absolute; left:0; right:0; bottom:0; padding: 6px 8px; font-family: var(--mono); font-size: 9px; letter-spacing:.02em; color: var(--text); background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); } @media (max-width: 700px){ .journey-row{ grid-template-columns: 1fr; gap: 12px; } .journey-year{ position:static; font-size: 28px; } } /* ---------- Video grid ---------- */ .video-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .video-tile{ border:1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow:hidden; transition: transform .35s var(--ease), border-color .3s; } .video-tile:hover{ transform: translateY(-4px); border-color: rgba(212,175,55,.4); } .video-frame{ position:relative; width:100%; aspect-ratio: 16/9; background:#000; } .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .video-label{ padding: 14px 16px; font-family: var(--mono); font-size:12px; color: var(--muted); letter-spacing:.04em; display:flex; justify-content:space-between; align-items:center; } .video-label span.plat{ color: var(--blue); } @media (max-width: 960px){ .video-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px){ .video-grid{ grid-template-columns: 1fr; } } /* ---------- Hero portrait ---------- */ .hero-portrait{ position:relative; width:100%; aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; } .hero-portrait-ring{ position:relative; width: min(340px, 80%); aspect-ratio: 1/1; margin-top: -28px; cursor: pointer; transition: transform .4s var(--ease); } .hero-portrait-ring:hover{ transform: scale(1.035); } .hero-portrait-ring:focus-visible{ outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 50%; } .hero-portrait-ring svg.spin{ position:absolute; inset:0; width:100%; height:100%; } .hero-portrait-ring::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow: 0 12px 34px 3px rgba(212,175,55,.5); pointer-events:none; z-index:-1; } .ring-rotator{ /* No transform-origin here on purpose: rotation is driven by the SVG transform attribute (rotate(angle 170 170) in main.js), which already bakes in its own center point. Adding a CSS transform-origin on top of that conflicts with it and throws the whole ring off-center as it spins, instead of just rotating the dash pattern in place. */ } .hero-portrait-frame{ position:absolute; inset:10%; border-radius:50%; overflow:hidden; border: 2px solid var(--line); background: linear-gradient(155deg, var(--panel), var(--ink-2)); display:flex; align-items:center; justify-content:center; } .gallery-tile img, .journey-thumb img, .case-cover img, .hero-portrait-frame img, .hero-signal img.overlay{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:5; } .hero-portrait-frame span{ font-family: var(--serif); font-size: 84px; font-weight:600; color: var(--blue); } .hero-portrait-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; } .hero-portrait-caption{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); font-family: var(--mono); font-size:11px; color: var(--muted-2); background: var(--ink); padding: 6px 14px; border-radius:999px; border:1px solid var(--line); white-space:nowrap; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .hero-portrait-ring:hover .hero-portrait-caption, .hero-portrait-ring:focus-visible .hero-portrait-caption{ opacity: 1; } /* ---------- Footer ---------- */ .cta-band{ border: 1px solid var(--line); background: linear-gradient(155deg, var(--panel), var(--ink-2)); border-radius: 22px; padding: 70px 60px; text-align:center; position:relative; overflow:hidden; } .cta-band h2{ font-size: clamp(28px,4vw,46px); max-width: 640px; margin: 0 auto 16px; } .cta-band p{ max-width: 460px; margin: 0 auto 34px; } .cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } footer{ padding: 60px 0 40px; border-top: 1px solid var(--line-soft); margin-top: 40px; } .footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap: 30px; } .footer-brand{ max-width: 320px; } .footer-brand p{ font-size: 13.5px; margin-top: 14px; } .footer-cols{ display:flex; gap: 70px; flex-wrap:wrap; } .footer-col h4{ font-family: var(--mono); font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-2); margin-bottom: 16px; font-weight:500; } .footer-col a{ display:block; font-size:14px; color: var(--muted); padding: 6px 0; transition: color .25s; } .footer-col a:hover{ color: var(--blue); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top: 60px; padding-top: 24px; border-top:1px solid var(--line-soft); font-size:12.5px; color: var(--muted-2); flex-wrap:wrap; gap:12px; } .social-row{ display:flex; gap:10px; } .social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition: border-color .3s, transform .3s; } .social-row a:hover{ border-color: var(--blue); transform: translateY(-2px); } .social-row svg{ width:15px; height:15px; } /* ---------- Page header (inner pages) ---------- */ .page-header{ padding: 170px 0 70px; } .page-header .eyebrow{ margin-bottom: 22px; } .page-header h1{ font-size: clamp(36px,5vw,58px); max-width: 760px; } .page-header p{ max-width: 560px; font-size: 17px; margin-top: 18px; } /* ---------- Utility ---------- */ .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start; } @media (max-width: 860px){ .two-col{ grid-template-columns:1fr; gap:36px; } } .pill-row{ display:flex; flex-wrap:wrap; gap:10px; } .pill{ font-family: var(--mono); font-size:12.5px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); color: var(--muted); background: var(--panel); } .skills-constellation-wrap{ position: relative; width: 100%; aspect-ratio: 16 / 11; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--panel), var(--ink-2)); overflow: hidden; } .skills-constellation-wrap canvas{ position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; } .skills-constellation-wrap canvas:active{ cursor: grabbing; } .skills-constellation-hint{ position: absolute; bottom: 14px; right: 18px; font-family: var(--mono); font-size: 11px; color: var(--muted-2); letter-spacing: .04em; pointer-events: none; transition: opacity .4s var(--ease); } @media (max-width: 640px){ .skills-constellation-wrap{ aspect-ratio: 4 / 5; } } .marquee-wrap{ overflow:hidden; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding: 26px 0; } .marquee{ display:flex; gap: 60px; width:max-content; animation: marquee 26s linear infinite; } @keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} } .marquee span{ font-family: var(--mono); font-size: 13px; color: var(--muted-2); white-space:nowrap; letter-spacing:.04em; } /* Contact form */ .form-field{ margin-bottom: 20px; } .form-field label{ display:block; font-family: var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color: var(--muted-2); margin-bottom: 8px; } .form-field input, .form-field textarea{ width:100%; background: var(--panel); border:1px solid var(--line); color: var(--text); padding: 14px 16px; border-radius: var(--radius-sm); font-family: var(--sans); font-size: 14.5px; transition: border-color .25s, background .25s; } .form-field input:focus, .form-field textarea:focus{ outline:none; border-color: var(--blue); background: var(--panel-2); } .form-field textarea{ resize: vertical; min-height: 140px; } .form-note{ font-size:12.5px; color: var(--muted-2); margin-top: 14px; } .contact-card{ border:1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 30px; display:flex; gap:18px; align-items:flex-start; transition: transform .35s var(--ease), border-color .3s; } .contact-card:hover{ transform: translateY(-4px); border-color: rgba(212,175,55,.4); } .contact-icon{ width:44px; height:44px; border-radius:12px; background: var(--blue-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .contact-icon svg{ width:20px; height:20px; color: var(--blue); } .contact-card h4{ font-size:16px; margin-bottom:4px; } .contact-card p{ font-size:13.5px; margin:0; } /* focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; } ::selection{ background: var(--blue); color:#06101F; } /* ---------- Image lightbox ---------- */ .gallery-tile img, .journey-thumb img, .hero-signal img.overlay, .lightbox-img{ cursor: zoom-in; } .img-lightbox{ position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(6,6,6,.92); padding: 40px; opacity: 0; transition: opacity .3s var(--ease); } .img-lightbox.open{ display: flex; opacity: 1; } .img-lightbox-inner{ max-width: min(920px, 92vw); max-height: 88vh; text-align: center; } .img-lightbox-inner img{ max-width: 100%; max-height: 78vh; border-radius: 10px; border: 1px solid var(--line); object-fit: contain; margin: 0 auto; display:block; } .img-lightbox-caption{ margin-top: 16px; font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: .03em; } .img-lightbox-close{ position: absolute; top: 24px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .3s, transform .2s; } .img-lightbox-close:hover{ border-color: var(--blue); transform: scale(1.06); } .img-lightbox-prev, .img-lightbox-next{ position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .3s, transform .2s; z-index: 210; } .img-lightbox-prev svg, .img-lightbox-next svg{ width: 22px; height: 22px; } .img-lightbox-prev:hover, .img-lightbox-next:hover{ border-color: var(--blue); } .img-lightbox-prev{ left: 24px; } .img-lightbox-next{ right: 24px; } .img-lightbox-prev:hover{ transform: translateY(-50%) scale(1.06); } .img-lightbox-next:hover{ transform: translateY(-50%) scale(1.06); } @media (max-width: 700px){ .img-lightbox-prev, .img-lightbox-next{ width: 42px; height: 42px; } .img-lightbox-prev{ left: 10px; } .img-lightbox-next{ right: 10px; } } /* ---------- Page load transition ---------- */ .page-transition{ position: fixed; inset: 0; z-index: 300; display: flex; pointer-events: none; overflow: hidden; } .page-transition-bar{ flex: 1 1 0%; background: var(--blue); transform: translateY(100%); /* hidden below the screen by default */ } .page-transition-backdrop{ position: fixed; inset: 0; z-index: 299; /* one below .page-transition's z-index: 300 */ background: var(--ink); opacity: 1; } .page-transition-backdrop.fade-out{ opacity: 0; transition: opacity .25s ease-out; } /* One continuous timeline per bar: 1) rise from below to fully cover — staggered right to left 2) hold once ALL bars have finished rising (full gold screen) 3) descend back below — staggered right to left, same speed as the rise */ .page-transition.reveal-bars .page-transition-bar{ animation-duration: 1.18s; animation-timing-function: cubic-bezier(.65,0,.35,1); animation-fill-mode: forwards; animation-iteration-count: 1; } .page-transition.reveal-bars .page-transition-bar:nth-child(5){ animation-name: barCycle5; } .page-transition.reveal-bars .page-transition-bar:nth-child(4){ animation-name: barCycle4; } .page-transition.reveal-bars .page-transition-bar:nth-child(3){ animation-name: barCycle3; } .page-transition.reveal-bars .page-transition-bar:nth-child(2){ animation-name: barCycle2; } .page-transition.reveal-bars .page-transition-bar:nth-child(1){ animation-name: barCycle1; } @keyframes barCycle5{ 0%{ transform: translateY(100%); } 29.66%{ transform: translateY(0%); } 50.00%{ transform: translateY(0%); } 79.66%{ transform: translateY(100%); } 100%{ transform: translateY(100%); } } @keyframes barCycle4{ 0%{ transform: translateY(100%); } 5.08%{ transform: translateY(100%); } 34.75%{ transform: translateY(0%); } 55.08%{ transform: translateY(0%); } 84.75%{ transform: translateY(100%); } 100%{ transform: translateY(100%); } } @keyframes barCycle3{ 0%{ transform: translateY(100%); } 10.17%{ transform: translateY(100%); } 39.83%{ transform: translateY(0%); } 60.17%{ transform: translateY(0%); } 89.83%{ transform: translateY(100%); } 100%{ transform: translateY(100%); } } @keyframes barCycle2{ 0%{ transform: translateY(100%); } 15.25%{ transform: translateY(100%); } 44.92%{ transform: translateY(0%); } 65.25%{ transform: translateY(0%); } 94.92%{ transform: translateY(100%); } 100%{ transform: translateY(100%); } } @keyframes barCycle1{ 0%{ transform: translateY(100%); } 20.34%{ transform: translateY(100%); } 50.00%{ transform: translateY(0%); } 70.34%{ transform: translateY(0%); } 100%{ transform: translateY(100%); } } @media (prefers-reduced-motion: reduce){ .page-transition{ display: none; } } /* ============================================================ About page — Experience section globe (Limerick / Vancouver) ============================================================ */ .experience-layout { display: flex; gap: 60px; align-items: flex-start; } .experience-main { flex: 1 1 0; min-width: 0; } .experience-globe { position: relative; flex: 0 0 380px; width: 380px; max-width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 26px; } .experience-globe .globe-glow { position: absolute; inset: -40px; background: radial-gradient(closest-side, rgba(212,175,55,.16), transparent 75%); pointer-events: none; } .globe-canvas-wrap { position: relative; width: 100%; height: 100%; } .globe-canvas-wrap canvas { width: 100%; height: 100%; cursor: grab; } .globe-canvas-wrap canvas:active { cursor: grabbing; } .globe-label { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--text); white-space: nowrap; pointer-events: none; text-shadow: 0 0 6px var(--ink), 0 0 2px var(--ink); transition: opacity 0.15s linear; } @media (max-width: 860px) { .experience-layout { flex-direction: column; gap: 36px; } .experience-globe { order: -1; flex: 0 0 auto; width: 100%; max-width: 340px; margin: 0 auto; } } /* Tighten stacked vertical rhythm on the About page — mobile only. These sections otherwise inherit the desktop section padding (page-header 70px bottom + section-tight 90px top, and section-tight 90px bottom + section 120px top), which reads as a huge dead gap once everything is a single stacked column. */ @media (max-width: 860px) { .page-about .page-header { padding-bottom: 30px; } .page-about .about-intro { padding-top: 36px; padding-bottom: 36px; } .page-about .about-experience { padding-top: 36px; } }