/* ================================================================== InfoSecHarry — stylesheet Light theme by default; dark theme via [data-theme="dark"] on . ================================================================== */ :root { color-scheme: light; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --bg: #ffffff; --bg-soft: #fafaf9; --surface: #ffffff; --surface-hover: #fafaf9; --text: #14161a; --text-soft: #3d434b; --text-muted: #6b727c; --border: #e7e5e2; --border-strong: #d5d2ce; --accent: #f26a1b; --accent-ink: #b8480a; --accent-wash: #fdf3ec; --btn-bg: #b8480a; --btn-fg: #ffffff; --code-bg: #fbfaf9; --code-head: #f4f2f0; --header-bg: rgba(255, 255, 255, 0.82); --shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 8px 24px -16px rgba(20, 22, 26, 0.18); --wrap: 1080px; --wrap-narrow: 720px; --radius: 12px; } [data-theme="dark"] { color-scheme: dark; --bg: #0f1113; --bg-soft: #141719; --surface: #16191c; --surface-hover: #1b1f22; --text: #e9eaec; --text-soft: #c2c6cb; --text-muted: #969ca4; --border: #262a2f; --border-strong: #343940; --accent: #ff8a4c; --accent-ink: #ff9059; --accent-wash: #24180f; --btn-bg: #ff8a4c; --btn-fg: #17130f; --code-bg: #121517; --code-head: #1a1e21; --header-bg: rgba(15, 17, 19, 0.82); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.8); } /* ------------------------------------------------------------------ Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -0.021em; font-weight: 650; margin: 0; } p { margin: 0 0 1.05em; } a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; } img { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--accent); color: #fff; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: var(--wrap-narrow); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px 16px; font-size: 0.9rem; } .skip-link:focus { left: 16px; top: 12px; } .dot { margin: 0 0.5em; color: var(--border-strong); } .eyebrow { font-family: var(--font-mono); font-size: 0.775rem; letter-spacing: 0.055em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.9rem; } .text-link { color: var(--accent-ink); font-size: 0.925rem; font-weight: 550; text-decoration: none; white-space: nowrap; } .text-link:hover { text-decoration: underline; } /* ------------------------------------------------------------------ Header ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 16px; height: 62px; } .brand { font-size: 1.05rem; font-weight: 680; letter-spacing: -0.025em; color: var(--text); text-decoration: none; white-space: nowrap; } .brand span { color: var(--accent-ink); } .site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; } .nav-group { display: flex; align-items: center; gap: 22px; } .nav-group-social { gap: 16px; padding-left: 22px; border-left: 1px solid var(--border); } .nav-link { color: var(--text-soft); font-size: 0.9rem; font-weight: 500; text-decoration: none; padding: 4px 0; position: relative; white-space: nowrap; } .nav-link:hover { color: var(--text); } .nav-link[aria-current="page"] { color: var(--text); } .nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent); } .nav-group-social .nav-link { color: var(--text-muted); font-size: 0.865rem; } .header-actions { display: flex; align-items: center; gap: 4px; margin-left: 18px; } .theme-toggle, .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text-soft); cursor: pointer; } .theme-toggle:hover, .nav-toggle:hover { background: var(--surface-hover); border-color: var(--border); color: var(--text); } .theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: block; } .nav-toggle { display: none; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 17px; height: 1.6px; border-radius: 2px; background: currentColor; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; } .nav-toggle-bars::before { top: -5px; } .nav-toggle-bars::after { top: 5px; } /* ------------------------------------------------------------------ Hero ------------------------------------------------------------------ */ .hero { padding: 76px 0 62px; border-bottom: 1px solid var(--border); } .hero-inner { display: flex; align-items: flex-start; gap: 56px; } .hero-text { flex: 1 1 auto; min-width: 0; max-width: 620px; } .hero-title { font-size: clamp(2.05rem, 1.4rem + 2.6vw, 2.85rem); font-weight: 680; margin: 0 0 1.1rem; } .hero-text p { color: var(--text-soft); font-size: 1.03rem; max-width: 60ch; } .hero-media { flex: 0 0 auto; padding-top: 6px; } .avatar { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); box-shadow: var(--shadow); display: block; } .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.7rem 0 0; } .button { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 9px; border: 1px solid transparent; background: var(--btn-bg); color: var(--btn-fg); font-size: 0.92rem; font-weight: 560; text-decoration: none; transition: opacity 0.15s ease; } .button:hover { opacity: 0.88; } .button-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .button-ghost:hover { background: var(--surface-hover); opacity: 1; } /* ------------------------------------------------------------------ Sections ------------------------------------------------------------------ */ .section { padding: 58px 0; } .section-top { padding-top: 66px; } .section-about { border-top: 1px solid var(--border); background: var(--bg-soft); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .section-title { font-size: 1.32rem; font-weight: 640; } .section-more { margin: 26px 0 0; } .page-head { margin-bottom: 38px; } .page-title { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.35rem); margin-bottom: 0.7rem; } .page-lede { color: var(--text-muted); font-size: 1.02rem; max-width: 62ch; margin: 0; } /* ------------------------------------------------------------------ Post list ------------------------------------------------------------------ */ .post-list { list-style: none; margin: 0; padding: 0; display: grid; /* min() keeps a card from overflowing a viewport narrower than the minimum. */ /* auto-fill, not auto-fit: auto-fit collapses unused columns, which would stretch a lone post across the full page width. */ grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 44px 32px; /* Cards take their natural height instead of stretching to match the tallest in the row, which would leave a gap under shorter ones. */ align-items: start; } .post-card { position: relative; } .post-card-media { aspect-ratio: 1200 / 630; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); } /* Crops whatever it is given to the card's ratio rather than distorting it. */ .post-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .post-card-title { font-size: 1.16rem; font-weight: 620; margin: 0 0 0.45rem; } .post-card-link { color: var(--text); text-decoration: none; transition: color 0.15s ease; } /* Stretches the title's link across the whole card, so clicking anywhere on it works while the link is still announced as just the title. */ .post-card-link::after { content: ""; position: absolute; inset: 0; } .post-card:hover .post-card-link { color: var(--accent-ink); } .post-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.6rem; letter-spacing: 0.01em; } .post-card-desc { color: var(--text-soft); margin: 0 0 0.85rem; font-size: 0.965rem; } .post-card .post-meta { margin: 0; } /* Empty state ----------------------------------------------------- */ .empty-state { border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-soft); padding: 44px 32px; text-align: center; } .empty-title { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 0.55rem; } .empty-body { color: var(--text-muted); margin: 0 auto; max-width: 46ch; font-size: 0.965rem; } /* ------------------------------------------------------------------ Research ------------------------------------------------------------------ */ .research-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; /* 340px keeps this to two columns at the wider page width. */ grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); } .research-item { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 22px 22px 20px; transition: border-color 0.15s ease, background 0.15s ease; } .research-item:hover { border-color: var(--border-strong); background: var(--surface-hover); } .research-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 0.55rem; } .research-title { font-size: 1.03rem; font-weight: 620; margin: 0; } .badge { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .research-desc { color: var(--text-soft); font-size: 0.94rem; margin: 0; } /* margin-top:auto pushes the call to action to the bottom of the card, so they line up across a row; padding-top keeps it clear of the text. */ .research-cta { align-self: flex-start; margin-top: auto; padding-top: 18px; color: var(--accent-ink); font-size: 0.885rem; font-weight: 550; text-decoration: none; } .research-cta:hover { text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------------ Article ------------------------------------------------------------------ */ .back-link { margin: 0 0 1.6rem; } .article-head { padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--border); } .article-title { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.5rem); margin-bottom: 0.75rem; } .article-head .post-meta { margin: 0; } .article-cover { aspect-ratio: 1200 / 630; overflow: hidden; margin: 0 0 34px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); } .article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Table of contents ------------------------------------------------ */ .toc { margin: 0 0 36px; padding: 20px 24px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); } .toc-title { font-family: var(--font-mono); font-size: 0.73rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; } .toc-list { list-style: none; margin: 0; padding: 0; } .toc-item { margin: 0; } .toc-item a { display: block; padding: 5px 0; color: var(--text-soft); font-size: 0.94rem; line-height: 1.45; text-decoration: none; } .toc-item a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } /* Subheadings sit one step in from their parent section. */ .toc-level-3 a { padding-left: 18px; } /* Back to top ------------------------------------------------------ */ .to-top { margin: 34px 0 0; text-align: center; } /* Prose ----------------------------------------------------------- */ .prose { color: var(--text-soft); font-size: 1.045rem; line-height: 1.75; } .prose-narrow { max-width: var(--wrap-narrow); } .prose > *:first-child { margin-top: 0; } .prose h2 { font-size: 1.42rem; color: var(--text); margin: 2.4rem 0 0.85rem; } .prose h3 { font-size: 1.15rem; color: var(--text); margin: 2rem 0 0.7rem; } .prose h4 { font-size: 1.02rem; color: var(--text); margin: 1.7rem 0 0.6rem; } .prose a { color: var(--accent-ink); text-decoration: underline; } .prose strong { color: var(--text); font-weight: 620; } .prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35em; } .prose li { margin-bottom: 0.42em; } .prose li::marker { color: var(--text-muted); } .prose blockquote { margin: 1.7rem 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--accent); color: var(--text-muted); } .prose blockquote p:last-child { margin-bottom: 0; } .prose img { display: block; border-radius: var(--radius); border: 1px solid var(--border); margin: 1.8rem 0; } .prose table { width: 100%; border-collapse: collapse; margin: 1.7rem 0; font-size: 0.94rem; display: block; overflow-x: auto; } .prose th, .prose td { border: 1px solid var(--border); padding: 9px 13px; text-align: left; } .prose th { background: var(--bg-soft); color: var(--text); font-weight: 600; } /* Inline code */ .prose :not(pre) > code { font-family: var(--font-mono); font-size: 0.855em; background: var(--accent-wash); color: var(--accent-ink); border: 1px solid var(--border); border-radius: 5px; padding: 0.11em 0.36em; word-break: break-word; } /* Code blocks ------------------------------------------------------ */ .code-block { margin: 1.7rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--code-bg); overflow: hidden; } .code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 8px 7px 14px; background: var(--code-head); border-bottom: 1px solid var(--border); min-height: 36px; } .code-lang { font-family: var(--font-mono); font-size: 0.71rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .copy-btn { display: none; font-family: var(--font-sans); font-size: 0.755rem; font-weight: 550; color: var(--text-muted); background: transparent; border: 1px solid var(--border-strong); border-radius: 6px; padding: 3px 9px; cursor: pointer; } .has-js .copy-btn { display: inline-block; } .copy-btn:hover { color: var(--text); background: var(--surface); } .copy-btn[data-copied="true"] { color: var(--accent-ink); border-color: var(--accent); } .code-block pre { margin: 0; padding: 16px 18px; overflow-x: auto; } .code-block code { font-family: var(--font-mono); font-size: 0.845rem; line-height: 1.7; color: var(--text); white-space: pre; tab-size: 2; } /* Pager ------------------------------------------------------------ */ .pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--border); } .pager-link { display: block; max-width: 46%; text-decoration: none; color: var(--text); } .pager-next { text-align: right; margin-left: auto; } .pager-label { display: block; font-family: var(--font-mono); font-size: 0.71rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; } .pager-title { font-size: 0.95rem; font-weight: 550; } .pager-link:hover .pager-title { color: var(--accent-ink); } /* ------------------------------------------------------------------ Footer ------------------------------------------------------------------ */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-soft); padding: 34px 0; margin-top: auto; } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; } .footer-brand { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text); } .footer-tagline { font-weight: 400; color: var(--text-muted); } .footer-links { display: flex; gap: 16px; margin-left: auto; } .footer-links a { color: var(--text-muted); font-size: 0.875rem; text-decoration: none; } .footer-links a:hover { color: var(--accent-ink); } .footer-meta { flex: 1 0 100%; margin: 0; font-size: 0.79rem; color: var(--text-muted); } /* ------------------------------------------------------------------ Responsive ------------------------------------------------------------------ */ @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .site-nav { display: none; position: absolute; top: 62px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 18px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .site-nav.is-open { display: flex; } .nav-group { flex-direction: column; align-items: stretch; gap: 0; } .nav-group-social { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; } .nav-link { padding: 11px 0; font-size: 0.97rem; } .nav-link[aria-current="page"]::after { left: -12px; right: auto; top: 11px; bottom: 11px; width: 2px; height: auto; } .header-actions { margin-left: auto; } } @media (max-width: 720px) { body { font-size: 16px; } .wrap { padding: 0 20px; } .hero { padding: 46px 0 44px; } .hero-inner { flex-direction: column-reverse; align-items: flex-start; gap: 26px; } .eyebrow { font-size: 0.72rem; letter-spacing: 0.04em; } .avatar { width: 88px; height: 88px; } .section { padding: 46px 0; } .section-top { padding-top: 48px; } .research-list { grid-template-columns: 1fr; } .pager { flex-direction: column; gap: 22px; } .pager-link { max-width: 100%; } .pager-next { text-align: left; } .footer-links { margin-left: 0; flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } @media print { .site-header, .site-footer, .pager, .back-link, .copy-btn { display: none !important; } }