/* fonts.css is linked directly from each page's rather than @import-ed here — a chained import is the one subresource that some browsers refuse to follow when the page is opened straight from disk (file://). */ /* ============================================================= b1tbreaker.com — design system Dark-first, single accent, editorial typography. ============================================================= */ /* ── Tokens ────────────────────────────────────────────────── */ :root { color-scheme: dark; --bg: #08080a; --bg-elev: #0d0d10; --surface: #121216; --surface-2: #17171c; --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16); --text: #ededf0; --text-2: #9d9da6; --text-3: #6a6a74; --accent: #ff5a1f; --accent-2: #ff8a4c; --accent-soft: rgba(255, 90, 31, 0.13); --accent-line: rgba(255, 90, 31, 0.32); --on-accent: #0a0500; --crit: #ff4d4d; --high: #ff8b3d; --med: #f5c542; --low: #4ec9a5; --grain-opacity: 0.16; --glow-opacity: 0.5; /* Fluid rhythm */ --gutter: clamp(1.25rem, 4.2vw, 4rem); --maxw: 1320px; --section: clamp(5rem, 11vw, 10rem); --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur: 0.6s; --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; } :root[data-theme='light'] { color-scheme: light; --bg: #f4f2ee; --bg-elev: #fbfaf8; --surface: #ffffff; --surface-2: #f0eee9; --line: rgba(16, 16, 20, 0.11); --line-strong: rgba(16, 16, 20, 0.22); --text: #131316; --text-2: #55555e; --text-3: #8b8b95; --accent: #d63e08; --accent-2: #b93404; --accent-soft: rgba(214, 62, 8, 0.09); --accent-line: rgba(214, 62, 8, 0.28); --on-accent: #fff8f4; --crit: #d12626; --high: #c4600d; --med: #9a7a06; --low: #157f5f; --grain-opacity: 0.10; --glow-opacity: 0.22; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.6; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color 0.5s var(--ease), color 0.5s var(--ease); } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ── Ambience: grid, glow, grain ───────────────────────────── */ .ambience { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Faint column guides — a quiet nod to blueprint / hex-dump rulers */ .ambience::before { content: ''; position: absolute; inset: -1px 0; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / 6) 100%; opacity: 0.4; mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); } /* Cursor-tracked spotlight */ .glow { position: absolute; width: 60vmax; height: 60vmax; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%); opacity: var(--glow-opacity); transform: translate3d(-50%, -50%, 0); will-change: transform; transition: opacity 0.6s var(--ease); } .grain { position: fixed; inset: -120%; z-index: 9998; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain-shift 0.7s steps(3) infinite; } @keyframes grain-shift { 0% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(-2%, 1.5%, 0); } 66% { transform: translate3d(1.5%, -1%, 0); } 100% { transform: translate3d(0, 0, 0); } } /* ── Custom cursor (pointer devices only) ──────────────────── */ .cursor, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform; } .cursor { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); } .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--line-strong); transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), border-color 0.35s var(--ease), background-color 0.35s var(--ease), opacity 0.3s linear; } body.cursor-ready .cursor, body.cursor-ready .cursor-ring { opacity: 1; } body.cursor-hover .cursor-ring { width: 66px; height: 66px; margin: -33px 0 0 -33px; border-color: var(--accent-line); background: var(--accent-soft); } body.cursor-hover .cursor { opacity: 0; } @media (hover: none), (pointer: coarse) { .cursor, .cursor-ring { display: none; } } /* ── Scroll progress ───────────────────────────────────────── */ .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 9997; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); will-change: transform; } /* ── Preloader ─────────────────────────────────────────────── */ .loader { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: grid; place-items: center; transition: opacity 0.7s var(--ease), visibility 0.7s; } .loader.done { opacity: 0; visibility: hidden; } .loader-inner { width: min(88vw, 420px); display: flex; flex-direction: column; gap: 0.9rem; } .loader-word { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); display: flex; justify-content: space-between; } .loader-count { color: var(--accent); } .loader-bar { height: 1px; background: var(--line); overflow: hidden; } .loader-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.25s linear; } /* ── Layout ────────────────────────────────────────────────── */ .shell { position: relative; z-index: 1; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } .section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); } .rule { height: 1px; background: var(--line); border: 0; } /* Section eyebrow: 01 / LABEL */ .eyebrow { display: flex; align-items: center; gap: 0.85rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); margin-bottom: clamp(1.75rem, 3.5vw, 3rem); } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px var(--accent-soft); } .eyebrow-num { color: var(--accent); } .eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* ── Type ──────────────────────────────────────────────────── */ .display { font-size: clamp(2.75rem, 12vw, 10.5rem); font-weight: 500; line-height: 0.9; letter-spacing: -0.045em; text-wrap: balance; } /* A page-head heading that is one long unbreakable word ("Disclosed") cannot wrap, so at the full display size it overflows its grid column and runs under the lead paragraph beside it. This size keeps it inside the column at every width. Multi-word headings wrap on their own and keep .display. */ .display--solo { font-size: clamp(2.75rem, 9.6vw, 7.75rem); } .h2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; } .h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; } .lead { font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.62; color: var(--text-2); text-wrap: pretty; } .muted { color: var(--text-2); } .dim { color: var(--text-3); } .italic-accent { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--accent); } .mono-label { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); } /* ── Navigation ────────────────────────────────────────────── */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 900; padding: clamp(0.9rem, 1.8vw, 1.4rem) 0; transition: transform 0.5s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease); border-bottom: 1px solid transparent; } .nav.scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom-color: var(--line); } .nav.hidden { transform: translateY(-105%); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; } /* Same artwork as favicon.svg, drawn inline so the nav mark and the browser tab icon are the identical mark. */ .brand-mark { width: 26px; height: 26px; flex: none; display: block; transition: transform 0.5s var(--ease); } .brand-mark svg { display: block; width: 100%; height: 100%; } .brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); } .brand-dim { color: var(--text-3); } .nav-links { display: flex; align-items: center; gap: 0.15rem; } .nav-link { position: relative; display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 0.875rem; font-weight: 450; color: var(--text-2); transition: color 0.3s var(--ease), background-color 0.3s var(--ease); } .nav-link .idx { font-family: var(--mono); font-size: 0.6rem; color: var(--text-3); transition: color 0.3s var(--ease); } .nav-link:hover { color: var(--text); } .nav-link:hover .idx { color: var(--accent); } .nav-link.active { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); } .nav-link.active .idx { color: var(--accent); } .nav-side { display: flex; align-items: center; gap: 0.4rem; } /* Social links sit in the nav, separated from the site controls by a hairline. Hidden once the nav collapses — the drawer carries the same three links. */ .nav-socials { display: flex; align-items: center; gap: 0.1rem; padding-right: 0.45rem; border-right: 1px solid var(--line); } .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; color: var(--text-3); border: 1px solid transparent; transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease); } .icon-btn:hover { color: var(--accent); border-color: var(--line); background: var(--surface); } .theme-toggle .moon { display: none; } :root[data-theme='light'] .theme-toggle .sun { display: none; } :root[data-theme='light'] .theme-toggle .moon { display: block; } .nav-burger { display: none; } /* Mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 899; background: var(--bg); padding: 6rem var(--gutter) 2.5rem; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s; } .drawer.open { opacity: 1; visibility: visible; transform: none; } .drawer-links { display: flex; flex-direction: column; gap: 0.35rem; } .drawer-link { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: clamp(1.7rem, 9vw, 2.6rem); font-weight: 500; letter-spacing: -0.035em; } .drawer-link .idx { font-family: var(--mono); font-size: 0.7rem; color: var(--text-3); letter-spacing: 0.1em; } .drawer-link.active { color: var(--accent); } /* ── Hero ──────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(7rem, 14vh, 10rem) clamp(2.5rem, 5vh, 4rem); } .hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: clamp(1.5rem, 4vh, 3rem); } .status-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.85rem 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--low); position: relative; } .status-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--low); opacity: 0; animation: ping 2.4s var(--ease) infinite; } @keyframes ping { 0% { transform: scale(0.6); opacity: 0.9; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } } /* Sized so the 15-character name fits one line at every width — the decode animation swaps characters in place, so any wrap would reflow the page. */ .hero-name { font-family: var(--mono); font-size: clamp(1.7rem, 8.8vw, 7.25rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.055em; margin-bottom: clamp(1rem, 2.5vh, 1.75rem); min-height: 0.95em; word-break: break-word; } .glitch-char { display: inline-block; color: var(--text); transition: color 0.3s var(--ease); } .glitch-char.decoded { color: var(--accent); animation: pop-in 0.45s var(--ease) both; } /* Once the decode finishes the name cools back to text colour. */ .hero-name.settled .glitch-char { color: var(--text); transition: color 0.9s var(--ease); } @keyframes pop-in { 0% { transform: translateY(0.12em); opacity: 0.35; } 100% { transform: none; opacity: 1; } } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; } .hero-role { font-size: clamp(1.35rem, 3.4vw, 2.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 1.25rem; } .hero-desc { max-width: 46ch; color: var(--text-2); font-size: clamp(0.98rem, 1.2vw, 1.075rem); line-height: 1.7; margin-bottom: 2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; } .hero-terminal { width: 100%; } .scroll-cue { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: clamp(2.5rem, 6vh, 4.5rem); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); transition: color 0.3s var(--ease); } .scroll-cue:hover { color: var(--accent); } .scroll-cue svg { animation: bob 2.2s var(--ease-io) infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ── Buttons ───────────────────────────────────────────────── */ .btn { --btn-bg: var(--accent); --btn-fg: var(--on-accent); position: relative; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.5rem; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 0.9rem; font-weight: 500; letter-spacing: -0.005em; overflow: hidden; isolation: isolate; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--text); transform: translateY(101%); transition: transform 0.5s var(--ease); } .btn:hover { color: var(--bg); box-shadow: 0 10px 34px -12px var(--accent); } .btn:hover::before { transform: translateY(0); } .btn svg { transition: transform 0.4s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); } .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--bg); } .btn--ghost::before { background: var(--accent); } /* Text link with underline sweep */ .link { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent); font-weight: 450; } .link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.45s var(--ease); } .link:hover::after { transform: scaleX(1); transform-origin: 0 50%; } /* ── Marquee ───────────────────────────────────────────────── */ .marquee { position: relative; overflow: hidden; padding-block: clamp(1.1rem, 2vw, 1.8rem); border-block: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 45%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; flex: none; } .marquee-item { display: inline-flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding-inline: clamp(0.75rem, 1.5vw, 1.5rem); font-size: clamp(0.95rem, 1.8vw, 1.5rem); font-weight: 450; letter-spacing: -0.02em; color: var(--text-2); white-space: nowrap; } .marquee-item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } @keyframes slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ── Statement ─────────────────────────────────────────────── */ .statement-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } /* ── Terminal ──────────────────────────────────────────────── */ .terminal { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev); overflow: hidden; box-shadow: 0 24px 70px -40px rgba(0, 0, 0, 0.9); } .terminal-bar { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.95rem; background: var(--surface); border-bottom: 1px solid var(--line); } .terminal-dots { display: flex; gap: 0.4rem; } .terminal-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); } .terminal-dots i:nth-child(1) { background: #ff5f57; } .terminal-dots i:nth-child(2) { background: #febc2e; } .terminal-dots i:nth-child(3) { background: #28c840; } .terminal-name { font-family: var(--mono); font-size: 0.68rem; color: var(--text-3); letter-spacing: 0.06em; } .terminal-body { padding: 1.1rem 1.25rem 1.35rem; font-family: var(--mono); font-size: clamp(0.72rem, 0.95vw, 0.8rem); line-height: 1.85; } .t-cmd { color: var(--accent); } .t-cmd.pending { opacity: 0; } .t-out { color: var(--text); padding-left: 1.1rem; min-height: 1.85em; opacity: 0; } .t-out::before { content: '→ '; color: var(--accent); opacity: 0.7; } .caret { display: inline-block; width: 7px; height: 0.95em; background: var(--accent); vertical-align: text-bottom; margin-left: 2px; animation: blink 1.05s steps(1) infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* ── Capability list (skills) ──────────────────────────────── */ .caps { border-top: 1px solid var(--line); } .cap { border-bottom: 1px solid var(--line); position: relative; } .cap-head { width: 100%; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); padding: clamp(1.1rem, 2.2vw, 1.7rem) 0; text-align: left; transition: color 0.35s var(--ease); } .cap-idx { font-family: var(--mono); font-size: 0.7rem; color: var(--text-3); letter-spacing: 0.1em; transition: color 0.35s var(--ease); } .cap-name { font-size: clamp(1.15rem, 2.7vw, 2rem); font-weight: 450; letter-spacing: -0.032em; line-height: 1.15; transition: transform 0.5s var(--ease), color 0.35s var(--ease); } .cap-plus { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); transition: transform 0.5s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), background-color 0.35s var(--ease); } .cap-plus svg { transition: transform 0.5s var(--ease); } .cap:hover .cap-name { transform: translateX(8px); } .cap:hover .cap-idx { color: var(--accent); } .cap:hover .cap-plus { border-color: var(--accent-line); color: var(--accent); } .cap.open .cap-name { color: var(--accent); } .cap.open .cap-plus { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .cap.open .cap-plus svg { transform: rotate(135deg); } .cap-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); } .cap.open .cap-panel { grid-template-rows: 1fr; } .cap-panel > div { overflow: hidden; } .cap-body { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: clamp(0.75rem, 2vw, 1.75rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); } .cap-text { max-width: 68ch; color: var(--text-2); line-height: 1.72; font-size: 0.98rem; } .cap-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; } .tag { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.07em; padding: 0.28rem 0.6rem; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--text-3); background: color-mix(in srgb, var(--surface) 60%, transparent); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .tag:hover { color: var(--accent); border-color: var(--accent-line); } .tag--accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } /* ── Row list (research / writing index) ───────────────────── */ .rows { border-top: 1px solid var(--line); } .row { display: block; position: relative; border-bottom: 1px solid var(--line); padding: clamp(1.35rem, 2.6vw, 2.1rem) 0; overflow: hidden; } .row::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent-soft), transparent 70%); transform: translateX(-101%); transition: transform 0.6s var(--ease); pointer-events: none; } .row:hover::before { transform: none; } .row-inner { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: start; gap: clamp(0.75rem, 2vw, 1.75rem); transition: transform 0.55s var(--ease); } .row:hover .row-inner { transform: translateX(10px); } .row-idx { font-family: var(--mono); font-size: 0.7rem; color: var(--text-3); letter-spacing: 0.1em; padding-top: 0.45rem; transition: color 0.35s var(--ease); } .row:hover .row-idx { color: var(--accent); } .row-title { font-size: clamp(1.1rem, 2.2vw, 1.65rem); font-weight: 450; letter-spacing: -0.03em; line-height: 1.22; transition: color 0.35s var(--ease); } .row:hover .row-title { color: var(--accent); } .row-sub { margin-top: 0.55rem; color: var(--text-2); font-size: 0.94rem; line-height: 1.62; max-width: 62ch; } .row-metaline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.85rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .row-metaline span { display: inline-flex; align-items: center; gap: 0.45rem; } .row-arrow { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); transition: transform 0.5s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), background-color 0.35s var(--ease); } .row:hover .row-arrow { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: rotate(-45deg); } /* ── Page header ───────────────────────────────────────────── */ .page-head { padding-top: clamp(8rem, 18vh, 12rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); } .page-head .display { margin-bottom: clamp(1rem, 2vw, 1.5rem); } .page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; } /* ── Cards ─────────────────────────────────────────────────── */ .card { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 55%, transparent); padding: clamp(1.4rem, 2.5vw, 2rem); overflow: hidden; transition: border-color 0.45s var(--ease), background-color 0.45s var(--ease), transform 0.45s var(--ease); } .card::after { content: ''; position: absolute; inset: 0 auto auto 0; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: scaleX(0); transition: transform 0.6s var(--ease); } .card:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 85%, transparent); } .card:hover::after { transform: scaleX(1); } /* ── CVE cards ─────────────────────────────────────────────── */ .cve-list { display: grid; gap: clamp(1rem, 2vw, 1.5rem); } .cve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(1.5rem, 3.5vw, 3rem); } .cve-id { font-family: var(--mono); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; letter-spacing: -0.02em; color: var(--accent); } .cve-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .sev { font-family: var(--mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: var(--r-sm); border: 1px solid currentColor; } .sev[data-sev='critical'] { color: var(--crit); } .sev[data-sev='high'] { color: var(--high); } .sev[data-sev='medium'] { color: var(--med); } .sev[data-sev='low'] { color: var(--low); } .cve-title { font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 450; letter-spacing: -0.03em; line-height: 1.25; margin-bottom: 0.85rem; } .cve-desc { color: var(--text-2); line-height: 1.72; font-size: 0.96rem; max-width: 68ch; } .cve-side { display: flex; flex-direction: column; gap: 1.25rem; padding-left: clamp(0rem, 2vw, 1.75rem); border-left: 1px solid var(--line); } .score-ring { display: flex; align-items: center; gap: 1rem; } .score-ring svg { flex: none; transform: rotate(-90deg); } .score-track { stroke: var(--line); } .score-val { stroke: var(--sev-color, var(--accent)); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); } .score-figure { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--text); } .score-cap { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-top: 0.3rem; } .meta-list { display: grid; gap: 0; } .meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.75rem; } .meta-row:first-child { border-top: 1px solid var(--line); } .meta-row dt { color: var(--text-3); font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; } .meta-row dd { color: var(--text); text-align: right; } .chip-links { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid var(--line); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-2); transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease); } .chip:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-1px); } .chip svg { opacity: 0.7; } /* ── Certifications ────────────────────────────────────────── */ .cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(0.75rem, 1.5vw, 1rem); } .cert { display: flex; align-items: center; gap: 1rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 50%, transparent); transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), transform 0.4s var(--ease), opacity 0.4s var(--ease); } .cert:hover { border-color: var(--accent-line); background: color-mix(in srgb, var(--surface) 90%, transparent); transform: translateY(-3px); } .cert-logo { width: 52px; height: 52px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #ffffff0d; border: 1px solid var(--line); overflow: hidden; } :root[data-theme='light'] .cert-logo { background: #0000000a; } .cert-logo img { width: 36px; height: 36px; object-fit: contain; } .cert-code { font-family: var(--mono); font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; } .cert-name { color: var(--text-2); font-size: 0.82rem; line-height: 1.45; margin-top: 0.15rem; } /* ── Timeline ──────────────────────────────────────────────── */ .timeline { border-top: 1px solid var(--line); } .tl-item { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); padding: clamp(1.25rem, 2.5vw, 2rem) 0; border-bottom: 1px solid var(--line); } .tl-when { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding-top: 0.35rem; } .tl-what { font-size: clamp(1.02rem, 1.6vw, 1.2rem); font-weight: 450; letter-spacing: -0.02em; } .tl-where { color: var(--text-2); font-size: 0.92rem; margin-top: 0.35rem; line-height: 1.6; } /* ── Prose (blog articles) ─────────────────────────────────── */ .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .toc { position: sticky; top: 7rem; display: flex; flex-direction: column; gap: 0.15rem; padding-left: 1.15rem; border-left: 1px solid var(--line); } .toc-title { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.7rem; } .toc a { font-size: 0.82rem; line-height: 1.4; color: var(--text-3); padding: 0.3rem 0; transition: color 0.3s var(--ease), transform 0.3s var(--ease); } .toc a:hover { color: var(--text); transform: translateX(3px); } .toc a.active { color: var(--accent); } .prose { font-size: 1.0125rem; line-height: 1.78; color: var(--text-2); max-width: 74ch; } .prose > * + * { margin-top: 1.15rem; } .prose h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 500; letter-spacing: -0.033em; line-height: 1.16; color: var(--text); margin-top: clamp(2.75rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line); scroll-margin-top: 6.5rem; } .prose h3 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); font-weight: 500; letter-spacing: -0.02em; color: var(--text); margin-top: 2.25rem; scroll-margin-top: 6.5rem; } .prose ul, .prose ol { display: grid; gap: 0.6rem; padding-left: 0; } .prose li { position: relative; padding-left: 1.6rem; } .prose ul > li::before { content: ''; position: absolute; left: 0.15rem; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .prose ol { counter-reset: li; } .prose ol > li::before { counter-increment: li; content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 0.72rem; color: var(--accent); line-height: 1.95; } .prose strong { color: var(--text); font-weight: 550; } .prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--accent-line); transition: text-decoration-color 0.3s var(--ease); } .prose a:hover { text-decoration-color: currentColor; } .prose code { font-family: var(--mono); font-size: 0.855em; padding: 0.14em 0.4em; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); word-break: break-word; } .prose pre { position: relative; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.35rem 1.4rem; overflow-x: auto; font-family: var(--mono); font-size: 0.815rem; line-height: 1.72; color: var(--text); margin-block: 1.5rem; } .prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; white-space: pre; } .copy-btn { position: absolute; top: 0.6rem; right: 0.6rem; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text-3); opacity: 0; transition: opacity 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .prose pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; } .copy-btn:hover { color: var(--accent); border-color: var(--accent-line); } .copy-btn.copied { color: var(--low); border-color: var(--low); opacity: 1; } .prose figure { margin-block: 2rem; } .prose img { border-radius: var(--r-md); border: 1px solid var(--line); margin-inline: auto; } .prose img.shot { max-width: min(320px, 100%); border-radius: var(--r-lg); } .prose figcaption { margin-top: 0.75rem; text-align: center; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-3); } .callout { display: flex; gap: 0.9rem; padding: 1.1rem 1.25rem; border-radius: var(--r-md); border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text-2); font-size: 0.94rem; line-height: 1.65; margin-block: 1.75rem; } .callout svg { flex: none; color: var(--accent); margin-top: 0.2rem; } /* ── Article header & post nav ─────────────────────────────── */ .article-head { padding-top: clamp(7rem, 16vh, 10rem); padding-bottom: clamp(2rem, 4vw, 3.25rem); } .article-title { font-size: clamp(1.85rem, 4.4vw, 3.35rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; margin: 1.35rem 0 1.15rem; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-3); } .article-meta .sep { opacity: 0.45; } .article-meta .cat { color: var(--accent); } /* ── Back link ─────────────────────────────────────────────── */ .back { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); transition: color 0.3s var(--ease), gap 0.3s var(--ease); } .back:hover { color: var(--accent); gap: 0.85rem; } /* ── Footer ────────────────────────────────────────────────── */ .footer { position: relative; border-top: 1px solid var(--line); padding-top: clamp(3.5rem, 8vw, 6.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .footer-cta { display: block; font-size: clamp(2.5rem, 12vw, 9rem); font-weight: 500; line-height: 0.92; letter-spacing: -0.05em; color: var(--text); transition: color 0.4s var(--ease); margin-bottom: clamp(2rem, 5vw, 3.5rem); } .footer-cta:hover { color: var(--accent); } .footer-cta span { display: inline-block; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-3); } /* Single-item footer line. Scoped to a modifier so the pages still carrying two items keep spreading them apart. */ .footer-bottom--center { justify-content: center; text-align: center; } .footer-bottom a:hover { color: var(--accent); } .socials { display: flex; gap: 0.4rem; } .social { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--text-3); transition: all 0.35s var(--ease); } .social:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); transform: translateY(-2px); } /* ── 404 ───────────────────────────────────────────────────── */ .err { min-height: 100svh; display: grid; place-items: center; padding-block: 8rem 4rem; } .err-inner { width: 100%; max-width: 640px; } .err-code { font-family: var(--mono); font-size: clamp(5rem, 24vw, 15rem); font-weight: 500; line-height: 0.85; letter-spacing: -0.06em; color: var(--accent); margin-bottom: 1.5rem; } /* ── Reveal animations ─────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); transition-delay: var(--d, 0ms); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal='mask'] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); } [data-reveal='mask'].in { clip-path: inset(0 0 -10% 0); } /* Per-word headline reveal. Inline-block so words still wrap as normal text; the padding/negative-margin pair gives descenders room that overflow:hidden would otherwise crop. */ .line-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.16em; margin-bottom: -0.16em; } .line-mask > span { display: inline-block; transform: translateY(110%); transition: transform 0.95s var(--ease); transition-delay: var(--d, 0ms); } .line-mask.in > span { transform: none; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } .cve { grid-template-columns: minmax(0, 1fr); } .cve-side { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.5rem; } } @media (max-width: 860px) { .nav-links { display: none; } .nav-socials { display: none; } .nav-burger { display: grid; } .hero-grid, .statement-grid, .page-head-grid { grid-template-columns: minmax(0, 1fr); } .hero-grid { align-items: start; } .ambience::before { background-size: calc(100% / 3) 100%; } .tl-item { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } } @media (max-width: 560px) { .cap-head, .row-inner { grid-template-columns: 2.25rem minmax(0, 1fr) auto; } .cap-body { grid-template-columns: minmax(0, 1fr); } .cap-body > .cap-idx-spacer { display: none; } .footer-bottom { flex-direction: column; align-items: flex-start; } .footer-bottom--center { align-items: center; } .prose pre { font-size: 0.75rem; } .copy-btn { opacity: 1; } } /* ── Print & motion prefs ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .line-mask > span { transform: none !important; } .grain { animation: none; } .cursor, .cursor-ring { display: none; } }