/* ========================================================= micro.techchahiye.com — Global Stylesheet Brand: #008080 (accent), #3a4247 (secondary/dark) Font: Montserrat (load it once in ) ========================================================= */ /* ----------------------------- TOKENS — LIGHT (default) ------------------------------*/ :root{ /* Brand */ --tc-accent: #008080; /* primary */ --tc-dark: #3a4247; /* secondary (dark baseline) */ /* Base palette */ --text: #0e1214; --link: var(--tc-accent); --link_visited: var(--tc-accent); --accent1: #21262c; --accent2: #5b646b; --background: #ffffff; --code: #e7eaee; --button-text: #ffffff; /* Content blocks */ --blockquote: #fffbe6; --blockquote-border: #c2d8d8; /* soft teal */ --aside: #e9f7f7; --aside-border: #6ebcbc; --note: #eef6f0; --note-border: #d5e1d6; --alert: #ffebee; --alert-border: #d32f2f; --field: #fffbe6; --mark: #FFFF99; --audio-link: var(--tc-accent); /* Shared card tokens (TOC / KT / DYK / FAQ) */ --surface: #ffffff; --surface-text: #1d2127; --surface-muted: var(--tc-dark); --surface-border: rgba(0,128,128,.28); --accent: var(--tc-accent); /* convenience alias */ /* Typography (stacks) */ --font_system_ui: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font_body: "Montserrat", var(--font_system_ui); --font_mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; } /* ----------------------------- TOKENS — DARK (auto) ------------------------------*/ @media (prefers-color-scheme: dark){ :root{ --text: #f2f5f7; --link: #59d0d0; --link_visited: #59d0d0; --accent1: #f2f5f7; --accent2: #cfd5db; --background: var(--tc-dark); --code: #4b545a; --button-text: #111519; --blockquote: #40484e; --blockquote-border: #8ccccc; --aside: #2f3c3e; --aside-border: #6fbcbc; --note: #2f353a; --note-border: #495157; --alert: #ff5555; --alert-border: #ff6e6e; --field: #40484e; --surface: #2a3136; --surface-text: #e8ebef; --surface-muted: #cfd5db; --surface-border: rgba(0,128,128,.28); } } /* Optional: force light (if you add a toggle that sets .light-mode on ) */ body.light-mode{ --text:#0e1214; --background:#fff; --surface:#fff; --surface-text:#1d2127; --surface-muted:var(--tc-dark); --surface-border: rgba(0,128,128,.28); } /* ========================================================= GLOBAL ELEMENTS / TYPOGRAPHY ========================================================= */ html, body{ font-family: var(--font_body); font-optical-sizing: auto; } body{ max-width: 50em; margin: 2em auto; padding: 0 1em; background: var(--background); color: var(--text); font-size: 16px; line-height: 1.6; } .site-header{ text-align: left; } header p { font-size: 14px; } /* Headings */ h1,h2,h3,h4,h5,h6{ font-weight: 650; line-height: 1.2; font-family: var(--font_body); } h2{ margin-top: 10px; font-size: 18px; } /* Header + title link */ header{ margin-bottom: 2em; } .post-header{ margin-bottom: 0; } header h1{ margin: .2em 0; } header h1 a, header h1 a:visited{ color: var(--text); text-decoration: none; font-size: 16px; } header h1 a:hover{ color: var(--accent1); } header p{ margin-top: 0; } /* Links */ a{ color: var(--link); text-underline-offset: .15em; text-decoration-thickness: .08em; } a:hover{ text-decoration: underline; } a:visited{ color: var(--link_visited); } /* Date chip */ a.post-date{ font-size: .8em; color: var(--link); text-decoration: none; border: 1px solid var(--code); padding: 2px; border-radius: 5px; } span.post-date{ font-size: .8em; } /* Article content */ .e-content{ margin-bottom: 2em; overflow-wrap: anywhere; } .e-content p:first-of-type, article p:first-of-type{ margin-top: 0; } img.profile_photo{ border-radius: 80px; } /* Navigation + reply buttons */ nav ul, ul.reply-buttons{ list-style: none; padding: 0; } nav ul li, ul.reply-buttons li{ display: inline; margin-right: .2em; line-height: 2.15em; white-space: nowrap; } nav a, nav a:visited, nav a:hover, a.conversation-on-mb, a.reply-on-mastodon, a.reply-by-email, a.read-more{ padding: 5px 10px; border: 1px solid var(--link); color: var(--link); border-radius: 10px; font-size: .9em; text-decoration: none; } nav a:hover, a.conversation-on-mb:hover, a.reply-on-mastodon:hover, a.reply-by-email:hover, a.read-more:hover{ background: var(--link); color: var(--button-text); } /* Buttons (native) */ button{ cursor: pointer; } /* Reply-to bubble */ .reply-to{ background: var(--code); border-radius: 10px; padding: 0 .333em; display: inline-block; font-size: .8em; } /* Prev/Next navigation */ .post-nav{ margin: 2.5em 0; text-align: center; } .post-nav span{ padding: 0 5px; } .post-nav a:visited{ color: var(--link); } /* Media defaults */ .post-meta{ color: var(--accent2); } article img, .e-content img, .p-summary img{ width: 100%; height: auto; border-radius: 5px; } /* Lists / tags */ ul.post-tags{ padding-left: 0; } ul.post-tags li{ display: inline; font-size: .8em; } ul.post-list{ list-style: none; padding-left: 0; } ul.post-list a.u-url{ text-decoration: none; } /* Callouts & block types */ .callout{ background: var(--code); padding: 1em; border-radius: 10px; margin-bottom: 2em; } blockquote, aside, .aside, .note, .alert, .blockquote{ padding: 1em; border-left: 4px solid; border-radius: 0 5px 5px 0; font-size: .9em; margin: 1em; } blockquote, .blockquote{ background: var(--blockquote); border-left-color: var(--blockquote-border); } aside, .aside{ background: var(--aside); border-left-color: var(--aside-border); } .note{ background: var(--note); border-left-color: var(--note-border); font-style: italic; } /* Alert (gentle animated border) */ @keyframes blinkBorder{ 0%,100%{border-color:var(--alert-border)} 50%{border-color:var(--alert)} } .alert{ background: var(--alert); border-left-color: var(--alert-border); font-weight: bold; animation: blinkBorder 2s infinite ease-in-out; } /* Tidy inner margins */ blockquote p:last-of-type, .blockquote p:last-of-type, aside p:last-of-type, .aside p:last-of-type, .alert p:last-of-type, .note p:last-of-type{ margin-bottom: 0; } blockquote p:first-of-type, .blockquote p:first-of-type, aside p:first-of-type, .aside p:first-of-type, .alert p:first-of-type, .note p:first-of-type{ margin-top: 0; } blockquote cite, aside cite, .aside cite{ display: block; text-align: right; margin-top: 1em; } /* Code */ div.highlight div{ border-radius: 5px; } .highlight{ font-size: .9em; line-height: 1em; } pre{ overflow: auto; padding: 1em; } p>code, li>code, span.tinylytics_hits, span.tinylytics_uptime{ background: var(--code); padding: 2px 4px; font-size: .9em; border-radius: 5px; font-family: var(--font_mono); } /* Micro.blog / Tinylytics odds & ends */ .microblog_conversation{ margin: 2em 0; } .microblog_post{ margin-bottom: 1em; padding: 1em; border: 1px solid var(--code); border-radius: 5px; } .microblog_user{ font-weight: bold; } .microblog_user img{ vertical-align: middle; width: 40px; height: auto; border-radius: 40px; max-width: 40px !important; } .microblog_text img{ max-width: 100%; border-radius: 5px; } .microblog_time a, .microblog_time a:visited{ color: var(--accent2); font-size: .8em; text-decoration: none; } .microblog_narration_button{ color: var(--audio-link); } .microblog_narration_button span{ vertical-align: baseline !important; } /* Footer */ footer{ margin-top: 2em; text-align: center; } footer .custom_footer{ font-size: .75em; color: var(--accent2); } footer .attribution{ display: none; } footer i{ font-size: 1.5em; padding: 0 5px; } footer a i:hover{ color: var(--text); } /* Utilities */ .full-archives{ overflow-wrap: anywhere; } .tiny-img{ max-width: 25em; } .tiny-text{ font-size: .6em; } .p-summary{ margin-bottom: 2em; } /* Embeds */ iframe{ max-width: 100%; } video{ width: 100% !important; height: auto !important; background: var(--code); border-radius: 5px; } /* Forms */ input[type=text], input[type=search], input[type=email]{ padding: 10px; font-size: .9em; border: 1px solid var(--link) !important; border-radius: 5px !important; color: var(--text); display: block; height: auto; background: var(--field); margin: 5px 0; } input[type=submit], button{ vertical-align: baseline; padding: 5px 10px; font-size: .9em; border-radius: 5px; border: 1px solid var(--link); background: none; color: var(--link); -webkit-appearance: none; margin-top: 5px; font-weight: normal; cursor: pointer; } input[type=submit]:hover, button:hover{ background: var(--link); color: var(--button-text); } label{ font-weight: bold; } form p{ margin-bottom: 0; } /* Mark highlight keeps text color */ mark{ background: var(--mark); color: inherit; } /* ========================================================= AUTHOR / RELATED / LAYOUT CARDS ========================================================= */ .post-preview, .footer-content, .author-box, .related-content{ border: 1px solid var(--code); margin-bottom: 1.5em; padding: 10px; border-radius: 15px; } .related-content{ padding-left: 25px; padding-top: 7px; padding-bottom: 7px; } .author-box img{ width: 100px; height: 100px; border-radius: 50%; margin-right: 20px; } .author-box h3{ font-size: 18px; font-weight: bold; margin-bottom: 7px; color: var(--accent); /* brand */ } .author-box p{ font-size: 16px; color: var(--text); } .author-box .social-icons{ margin-top: 10px; } .author-box .social-icons a{ margin-right: 10px; } .author-box .social-icons i{ font-size: 20px; color: var(--link); } /* Adaptive Photo Grid */ .adaptive_photo_layout ul{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; align-items: start; } .adaptive_photo_layout li{ display: block; width: 100%; overflow: hidden; border-radius: 5px; } .adaptive_photo_layout img{ width: 100%; height: auto; object-fit: cover; vertical-align: bottom; border-radius: 0; transition: transform .3s ease, opacity .3s ease; } .adaptive_photo_layout img:hover{ transform: scale(1.05); opacity: .9; } @media (max-aspect-ratio: 1/1){ .adaptive_photo_layout li{ height: auto; } } @media (max-height: 480px){ .adaptive_photo_layout li{ height: auto; } } @media (max-aspect-ratio: 1/1) and (max-width: 480px){ .adaptive_photo_layout ul{ grid-template-columns: 100%; } .adaptive_photo_layout li{ height: auto; } } /* ========================================================= THEME-SAFE COMPONENTS (TOC + CONTENT CARDS) ========================================================= */ /* “Written by …” line */ .author-line{ color: var(--surface-muted) !important; font-size: 14px; margin: 8px 0 16px; } .author-line a{ color: var(--accent); text-decoration: none; font-weight: 600; } .author-line a:hover{ text-decoration: underline; } /* Shared card base */ .muz-box, .muz-toc, .kt-box{ background: var(--surface) !important; border: 1px solid var(--surface-border) !important; color: var(--surface-text); border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.08); } /* Key Takeaways card */ .kt-box{ padding: 14px 16px; margin: 16px 0 20px; } .kt-box .box-head, .kt-head{ display: flex; align-items: center; gap: 8px; margin: 0 0 8px 0; font-weight: 800; font-size: 16px; letter-spacing: .2px; } .kt-head::before, .kt-box .box-head::before{ content: "★"; color: var(--accent); } .kt-box ul, .kt-box ol{ margin: 0 0 0 20px; } .kt-box li{ margin: 6px 0; color: var(--surface-muted); } .kt-copy{ margin-left: auto; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 2px 8px; cursor: pointer; font-size: 12px; } /* Generic card (DYK + FAQ scaffold) */ .muz-box{ padding: 14px 16px; margin: 16px 0 20px; } .muz-box .box-head{ display: flex; align-items: center; gap: 8px; margin: 0 0 8px 0; font-weight: 800; font-size: 16px; letter-spacing: .2px; } .muz-box ul, .muz-box ol{ margin: 0 0 0 20px; } .muz-box li{ margin: 6px 0; color: var(--surface-muted); } .info-box .box-head::before{ content: "💡"; color: var(--accent); } .faq-box .box-head::before{ content: "❓"; color: var(--accent); } /* FAQ accordions */ .faq-box details{ border: 1px solid var(--surface-border) !important; border-radius: 10px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)) !important; margin: 8px 0; padding: 8px 10px; } .faq-box summary{ list-style: none; cursor: pointer; font-weight: 700; color: var(--surface-text); } .faq-box summary::-webkit-details-marker{ display: none; } .faq-box .answer{ color: var(--surface-text); margin-top: 6px; } /* Card content contrast fixes */ .kt-box, .muz-box, .faq-box{ color: var(--surface-text) !important; } .kt-box p, .kt-box li, .muz-box p, .muz-box li, .faq-box .answer p, .faq-box .answer li{ color: var(--surface-text) !important; } .author-line{ color: var(--surface-muted) !important; } .kt-box li, .muz-box li, .faq-box summary, .faq-box .answer{ opacity: 1 !important; } /* TOC container */ .muz-toc{ padding: 10px 12px; margin: 12px 0 18px; } .muz-toc details{ border: 0; } .muz-toc summary{ list-style: none; cursor: pointer; font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; user-select: none; color: var(--surface-text); } .muz-toc summary::-webkit-details-marker{ display: none; } .muz-toc summary::before{ content: "▸"; font-size: 12px; opacity: .7; transition: transform .2s ease; } .muz-toc details[open] summary::before{ transform: rotate(90deg); } .muz-toc nav{ margin-top: 8px; } .muz-toc ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } /* TOC chips (color-mix first, fallback second) */ @supports (color-mix(in oklab, #000 10%, #fff)){ .muz-toc a{ color: var(--surface-text) !important; font-weight: 600; background: color-mix(in oklab, var(--accent) 12%, var(--surface)) !important; border: 1px solid color-mix(in oklab, var(--accent) 38%, var(--surface)) !important; border-radius: 9999px; text-decoration: none; line-height: 1; padding: 6px 10px; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; } .muz-toc a:hover{ background: color-mix(in oklab, var(--accent) 18%, var(--surface)) !important; } .muz-toc a.active{ background: color-mix(in oklab, var(--accent) 26%, var(--surface)) !important; border-color: color-mix(in oklab, var(--accent) 60%, var(--surface)) !important; } } @supports not (color-mix(in oklab, #000 10%, #fff)){ .muz-toc a{ color: var(--surface-text) !important; font-weight: 600; background: rgba(0,128,128,.16) !important; border: 1px solid var(--surface-border) !important; border-radius: 9999px; text-decoration: none; line-height: 1; padding: 6px 10px; white-space: nowrap; } .muz-toc a:hover{ background: rgba(0,128,128,.20) !important; } .muz-toc a.active{ background: rgba(0,128,128,.26) !important; border-color: rgba(0,128,128,.55) !important; } } /* Anchor offset for TOC jumps */ .e-content h2, .e-content h3, .post-content h2, .post-content h3{ scroll-margin-top: 80px; } /* ========================================================= BRAND BUTTONS / BADGES / FOCUS / SCROLLBARS ========================================================= */ /* Solid brand button */ .btn-brand{ --btn-bg: var(--accent); --btn-text: #fff; --btn-border: color-mix(in oklab, var(--accent) 70%, #0000); display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border-radius:12px; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-text); text-decoration:none; font-weight:700; line-height:1; transition:transform .06s ease, box-shadow .2s ease, background .2s ease; } .btn-brand:hover{ background: color-mix(in oklab, var(--accent) 90%, #0000); box-shadow: 0 6px 18px rgba(0,0,0,.15); } .btn-brand:active{ transform: translateY(1px); } /* Outline button */ .btn-outline{ --btn-text: var(--accent); display:inline-flex; align-items:center; gap:.5rem; padding:.52rem .9rem; border-radius:12px; border:1.5px solid color-mix(in oklab, var(--accent) 65%, #0000); color:var(--btn-text); background:transparent; text-decoration:none; font-weight:700; transition: background .2s, color .2s, border-color .2s, transform .06s; } .btn-outline:hover{ background: color-mix(in oklab, var(--accent) 12%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 80%, #0000); } .btn-outline:active{ transform: translateY(1px); } /* Subtle chip */ .btn-subtle{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .75rem; border-radius:9999px; border:1px solid color-mix(in oklab, var(--accent) 35%, var(--surface)); background: color-mix(in oklab, var(--accent) 10%, var(--surface)); color: var(--surface-text); text-decoration:none; font-weight:600; } .btn-subtle:hover{ background: color-mix(in oklab, var(--accent) 16%, var(--surface)); } /* Secondary (charcoal) button */ .btn-secondary{ --sec: var(--tc-dark); display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border-radius:12px; border:1px solid color-mix(in oklab, var(--surface-text) 20%, #0000); background: var(--sec); color:#fff; text-decoration:none; font-weight:700; } .btn-secondary:hover{ background: color-mix(in oklab, var(--sec) 85%, #0000); } /* Badges */ .badge, .chip{ display:inline-block; border-radius:9999px; padding:.28rem .6rem; font-size:.75rem; line-height:1; border:1px solid color-mix(in oklab, var(--accent) 38%, var(--surface)); } .badge-brand{ background: color-mix(in oklab, var(--accent) 14%, var(--surface)); color: var(--surface-text); } .badge-secondary{ background: color-mix(in oklab, var(--tc-dark) 14%, var(--surface)); color: #fff; border-color: color-mix(in oklab, var(--tc-dark) 45%, var(--surface)); } .badge-outline{ background: transparent; color: var(--accent); } /* Focus ring */ .focus-ring, .btn-brand:focus-visible, .btn-outline:focus-visible, .btn-secondary:focus-visible, .btn-subtle:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: 2px solid color-mix(in oklab, var(--accent) 80%, #0000); outline-offset: 2px; border-radius: 10px; } /* Selection */ ::selection{ background: color-mix(in oklab, var(--accent) 70%, #0000); color: #fff; } /* If you use a top progress bar (reading-time component) */ .post-progress{ background: var(--accent); } /* WebKit scrollbars */ *::-webkit-scrollbar{ height:10px; width:10px; } *::-webkit-scrollbar-thumb{ background: color-mix(in oklab, var(--accent) 55%, #0000); border-radius: 9999px; border: 2px solid var(--background); } *::-webkit-scrollbar-track{ background: var(--background); } /* ICON SAFETY — SAFE VERSION */ i{ font-style: normal; font-weight: normal; } /* Leave FA alone so it can use its own font-family */ [class^="ri"], [class*=" ri-"], /* Remix */ [class^="bi"], [class*=" bi-"], /* Bootstrap Icons */ [class^="icon"], [class*=" icon-"]{ /* generic icon classnames */ font-family: inherit !important; } /* Optional: tidy the share bar visuals */ #share-bar i{ font-size: 16px; line-height: 1; vertical-align: middle; } #share-bar a, #share