.pr-6 { padding-right:1.5rem } .anchor svg { display:inline; } .dark .toc-wrapper { background-color: var(--tw-prose-pre-bg)!important; border-color: rgb(55 65 81/var(--tw-divide-opacity))!important; } .light .toc-wrapper { border-color: rgb(229 231 235/var(--tw-divide-opacity))!important; } .toc-wrapper a, .related-posts a, .recent-posts a { text-decoration: none; } .toc-link a { display:none; } .toc-link:hover a{ display:inline-block; } .tags a { margin-right: .75rem; } .category a { margin-right: .1rem; } .category { line-height:3.2rem; } .read-more { text-decoration:inherit; } .nav-top li { display:inline-block; margin-left: 1.5rem; font-weight: 500; } .nav-mobile li{ outline-width: 0; outline-style: solid; letter-spacing: .1em; font-weight: 700; font-size: 1.5rem; line-height: 2rem; padding-right: 1rem; padding-top: .5rem; padding-bottom: .5rem; margin-bottom: 1rem; } .menu-mobile { display:none; } @media (max-width: 640px) { .nav-top { display:none; } .is-menu-open .menu-mobile { display:block!important; } } .search-form { display:none; } .is-search-open .search-form { display: flex; } .tags a:hover { color:rgb(190 24 93); } .dark .tags a:hover { color:rgb(244 114 182); } .thumbnail { position:relative; display:block; } .nav li > ul { display:none; } .footnotes { margin-top:0; border:none; } .footnotes ol { margin-bottom:0; padding-top: 1.5em; } .footnotes > hr { margin:0; } .thumb-icon { background: rgba(0,0,0,0.7); color: #fff; text-align: center; display: block; width: 32px; height: 32px; position: absolute; bottom: 50%; left: 50%; margin-left: -16px; margin-bottom: -16px; -webkit-border-radius: 4px; border-radius: 4px; -moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .thumb-icon svg { margin: 1px 0 0 2px; } .thumbnail:hover .thumb-icon { background: #fff; color: #333; } .recent-posts > ul { padding-left: 15px; } /* ---- 2026 upgrade: accessibility, breadcrumbs, media safety ---- */ /* Skip link: off-screen until focused, then visible for keyboard users. */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; padding: 0.75rem 1rem; background: #ffffff; color: #111827; border-radius: 0 0 0.375rem 0; font-weight: 600; } .skip-link:focus { left: 0; } .dark .skip-link { background: #030712; color: #f9fafb; } /* Visible keyboard focus without affecting mouse users. */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 2px; } .dark a:focus-visible, .dark button:focus-visible, .dark input:focus-visible, .dark [tabindex]:focus-visible { outline-color: #60a5fa; } #main-content:focus { outline: none; } /* Breadcrumb trail (reuses HTMLy's BreadcrumbList microdata markup). */ .breadcrumb-nav { font-size: 0.8125rem; line-height: 1.5; color: #6b7280; margin-bottom: 0.5rem; overflow-x: auto; white-space: nowrap; } .dark .breadcrumb-nav { color: #9ca3af; } .breadcrumb-nav a { color: inherit; text-decoration: none; } .breadcrumb-nav a:hover { text-decoration: underline; } /* Media never overflows its column and always reserves height (less CLS). */ .prose img, .thumbnail img { max-width: 100%; height: auto; } /* Respect users who ask for reduced motion. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ 1vs1.cam brand integration Appended last so these rules win over tailwind.css by source order. The blog reuses the main site's /assets/css/directory.css for the dark palette, header, side menu, footer, age-gate and cookie banner, and runs the tailwind theme permanently in dark mode (see ). ============================================================ */ html { color-scheme: dark; } /* Sticky footer on short pages. Body bg + Inter font come from directory.css. */ body.dir-blog { display: flex; flex-direction: column; } .dir-blog-main { flex: 1 0 auto; padding: 1.5rem 0 2.5rem; } /* Rebrand the Tailwind "primary" (pink) accent to the site rose accent. */ .text-primary-500 { color: #f43f5e; } .text-primary-600 { color: #e11d48; } .bg-primary-500 { background-color: #e11d48; } .bg-primary-600 { background-color: #9f1239; } .border-primary-500 { border-color: #e11d48; } .hover\:text-primary-400:hover { color: #fb7185; } .hover\:text-primary-500:hover { color: #f43f5e; } .hover\:text-primary-600:hover { color: #e11d48; } .focus\:border-primary-500:focus { border-color: #e11d48; } .focus\:ring-primary-400:focus { --tw-ring-color: #fb7185; } .focus\:ring-primary-500:focus { --tw-ring-color: #e11d48; } .focus\:ring-primary-600:focus { --tw-ring-color: #9f1239; } /* Post tags + article links on the dark background. */ .tags a { color: #fb7185; } .tags a:hover, .dark .tags a:hover { color: #f43f5e; } .dir-blog .prose a { color: #fb7185; text-decoration: underline; text-underline-offset: 2px; } .dir-blog .prose a:hover { color: #f43f5e; } /* Category pills on the blog index -> rose to match the site. */ .category a { background: rgba(225, 29, 72, .14) !important; color: #fecdd3 !important; border: 1px solid rgba(225, 29, 72, .3); } .category a:hover { background: #e11d48 !important; color: #fff !important; }