/* ===== Starlight Custom Styles ===== */ /* ── Modern Color Theme ── */ :root { --sl-color-accent-low: #e0e7ff; --sl-color-accent: #4f46e5; --sl-color-accent-high: #3730a3; --sl-color-bg-nav: #f8fafc; --sl-color-bg: #ffffff; --sl-color-text: #1e293b; --sl-color-text-accent: #4f46e5; /* MessageBubble — iMessage style */ --bubble-left-bg: #e9e9eb; --bubble-left-bg-top: #f0f0f3; --bubble-left-fg: #1c1c1e; --bubble-right-bg: #0a84ff; --bubble-right-bg-top: #1a8eff; --bubble-right-fg: #ffffff; --bubble-gityo-bg: #c8c4e8; --highlight-bg: #e0e7ff; --highlight-fg: #3730a3; /* Dyslexia quote bubble — warm amber */ --bubble-dyslexia-bg: #fef3c7; --bubble-dyslexia-bg-top: #fef9e7; --bubble-dyslexia-fg: #1c1c1e; } :root[data-theme="dark"] { --sl-color-accent-low: #1e1b4b; --sl-color-accent: #818cf8; --sl-color-accent-high: #a5b4fc; --sl-color-bg-nav: #0f172a; --sl-color-bg: #1e293b; --sl-color-text: #e2e8f0; --sl-color-text-accent: #a5b4fc; /* MessageBubble dark */ --bubble-left-bg: #2c2c2e; --bubble-left-bg-top: #38383a; --bubble-left-fg: #e5e5ea; --bubble-right-bg: #0a84ff; --bubble-right-bg-top: #1a8eff; --bubble-right-fg: #ffffff; --bubble-gityo-bg: #3a3658; --highlight-bg: #312e81; --highlight-fg: #c7d2fe; /* Dyslexia quote bubble dark */ --bubble-dyslexia-bg: #3d3520; --bubble-dyslexia-bg-top: #4a3f28; --bubble-dyslexia-fg: #fde68a; } /* ── Readable Typography ── */ .sl-markdown-content { line-height: 1.75; color: var(--sl-color-text); } .sl-markdown-content p { margin-bottom: 1em; } /* ── Stylish Headings ── */ .sl-markdown-content h2 { margin-top: 0.5em !important; margin-bottom: 0.5em !important; } .sl-heading-wrapper.level-h2 { margin-top: 0.5em !important; } .sl-markdown-content h3, .sl-markdown-content h4, .sl-markdown-content h5 { font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; } .sl-markdown-content h3 { font-size: 1em; margin-top: 1.2em; margin-bottom: 0.3em; padding-left: 0.6em; border-left: 3px solid var(--sl-color-accent); color: var(--sl-color-text); } .sl-markdown-content h4 { font-size: 0.95em; margin-top: 1em; margin-bottom: 0.2em; opacity: 0.8; } .sl-markdown-content h5 { font-size: 0.9em; margin-top: 1.2em; opacity: 0.7; text-transform: none; } /* ── Subtle Links ── */ /* ── Stylish Tables ── */ .sl-markdown-content table:not(:where(.not-content *)) { display: table; width: 100%; border-collapse: separate; border-spacing: 0; margin: 1rem 0; font-size: 0.9em; overflow: hidden; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .sl-markdown-content thead th { background: var(--sl-color-accent-low); color: var(--sl-color-accent-high); padding: 0.6rem 0.75rem; text-align: left; font-weight: 600; font-size: 0.85em; border-bottom: 2px solid var(--sl-color-accent); } .sl-markdown-content tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--sl-color-gray-5); vertical-align: top; } .sl-markdown-content tbody tr:last-child td { border-bottom: none; } .sl-markdown-content tbody tr:hover { background: var(--sl-color-gray-5); } .sl-markdown-content tbody tr:nth-child(even) { background: var(--sl-color-gray-6); } .sl-markdown-content tbody tr:nth-child(even):hover { background: var(--sl-color-gray-5); } /* Tables inside bubbles */ .bln table { display: table !important; width: 100%; font-size: 0.88em; border-radius: 6px; background: var(--sl-color-bg); border: 1px solid var(--sl-color-gray-5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); color: var(--sl-color-text); } .bln.bleft thead th { background: var(--sl-color-gray-7); color: var(--sl-color-text); border-bottom: 2px solid var(--sl-color-gray-4); } .bln.bleft tbody td { border-bottom: 1px solid var(--sl-color-gray-6); } .bln.bleft tbody tr:hover { background: var(--sl-color-gray-6); } .bln.bleft tbody tr:nth-child(even) { background: var(--sl-color-gray-7); } .bln.bright thead th { background: var(--sl-color-gray-7); color: var(--sl-color-text); border-bottom: 2px solid var(--sl-color-gray-4); } .bln.bright tbody td { border-bottom: 1px solid var(--sl-color-gray-6); } .bln.bright tbody tr:hover { background: var(--sl-color-gray-6); } .bln.bright tbody tr:nth-child(even) { background: var(--sl-color-gray-7); } /* Tables inside note asides */ .starlight-aside--note table { box-shadow: none; border: 1px solid var(--sl-color-gray-5); background: var(--sl-color-bg); width: auto; max-width: 100%; } .starlight-aside--note thead th { background: var(--sl-color-gray-7); color: var(--sl-color-text); border-bottom-color: var(--sl-color-gray-4); } .starlight-aside--note tbody tr:nth-child(even) { background: var(--sl-color-gray-7); } /* ── Subtle Links ── */ .sl-markdown-content a { text-decoration: none; } /* External link icon globally */ .sl-markdown-content a[href^="http"]::after { content: " ↗"; font-size: 0.75em; } /* Links inside bubbles */ .bln a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; font-weight: 500; } .bln a[href^="/"]::before { content: "🔗 "; font-size: 0.85em; } .bln.bleft a { color: #2563eb; text-decoration-color: #93c5fd; } .bln.bleft a:hover { background: rgba(37, 99, 235, 0.1); border-radius: 2px; } .bln.bright a { color: #e0f2fe; text-decoration-color: rgba(255, 255, 255, 0.6); } .bln.bright a:hover { background: rgba(255, 255, 255, 0.15); border-radius: 2px; } /* ── Top fade effect (like iPhone) ── */ /* Kaigiroku links spacing */ #kaigiroku { margin-bottom: 0.25rem !important; display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; } #kaigiroku a[href^="http"]::after { content: " ↗"; font-size: 0.8em; } /* Hide the overview link in TOC */ /* ── Nicer note asides ── */ .starlight-aside--note { --sl-color-asides-text-accent: var(--sl-color-accent-high); --sl-color-asides-border: var(--sl-color-accent); background: var(--sl-color-accent-low); border-radius: 6px; padding: 0.75rem 1rem; margin: 0.75rem 0; font-size: 0.95em; border: none; box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.06); position: relative; } .starlight-aside--note::before { content: ""; position: absolute; top: -4px; right: 20px; width: 32px; height: 8px; background: var(--sl-color-accent); border-radius: 2px; opacity: 0.5; } .starlight-aside--note .starlight-aside__title { font-size: 0.9em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; margin-bottom: 0.25rem; } .starlight-aside--tip { --sl-color-asides-text-accent: #065f46; --sl-color-asides-border: #10b981; background: #ecfdf5; border-radius: 6px; padding: 0.75rem 1rem; margin: 0.75rem 0; font-size: 0.95em; border: none; box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.06); position: relative; } .starlight-aside--tip::before { content: ""; position: absolute; top: -4px; right: 20px; width: 32px; height: 8px; background: #10b981; border-radius: 2px; opacity: 0.5; } :root[data-theme="dark"] .starlight-aside--tip { --sl-color-asides-text-accent: #6ee7b7; --sl-color-asides-border: #059669; background: #022c22; } :root[data-theme="dark"] .starlight-aside--tip::before { background: #059669; } main::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 6rem; background: linear-gradient(180deg, var(--sl-color-bg) 0%, transparent 100%); pointer-events: none; z-index: 10; } /* ── Text Justification ── */ p, .sl-sidebar a, #starlight__sidebar a { text-align: justify; } /* ── Admonition title inline ── */ .sl-banner .title, aside .title { display: inline; } /* ── Mermaid centering ── */ .mermaid-container { text-align: center; } /* Mermaid diagram support */ /* Mermaid centering */ .sl-markdown-content p:has(> svg) { text-align: center !important; } /* ── Video container ── */ .video-container { position: relative; width: 100%; max-width: 560px; margin: 0 auto; } .video-container iframe { width: 100%; aspect-ratio: 16 / 9; } /* ── Hero subtitle center ── */ .hero__subtitle { text-align: center; } /* ── PDF iframe ── */ .tukokusyo { width: 100%; height: 700px; border: 1px solid var(--sl-color-gray-5); border-radius: 6px; } @media screen and (max-width: 996px) { .tukokusyo { width: 100%; height: 400px; touch-action: pan-y; } } /* ── General question anchor separator ── */ #situgi { display: flex; flex-direction: column; } #situgi > .anchor { margin-top: 20px; border-bottom: 1px dashed; padding-bottom: 20px; } /* ══════════════════════════════════════ MessageBubble (Speech Bubble) ══════════════════════════════════════ */ .bln { border-radius: 1rem; position: relative; padding: 0.375rem 1rem; max-width: 88%; font-size: 1rem; letter-spacing: normal; line-height: 1.6; } /* Multi-element bubbles get more padding */ .bln:has(> :nth-child(3)) { padding-top: 0.75rem; padding-bottom: 0.75rem; } .bln.bleft { background: linear-gradient( 180deg, var(--bubble-left-bg-top) 0%, var(--bubble-left-bg) 100% ); color: var(--bubble-left-fg); margin: 1.2rem auto 0.6rem 4%; } .bln.bleft.gityo { background: linear-gradient(180deg, #e0ddf5 0%, var(--bubble-gityo-bg) 100%); } .bln.bleft.dyslexia { background: linear-gradient( 180deg, var(--bubble-dyslexia-bg-top) 0%, var(--bubble-dyslexia-bg) 100% ); color: var(--bubble-dyslexia-fg); max-width: 92%; font-size: 1.05rem; line-height: 1.8; letter-spacing: 0.02em; } .bln.bleft.dyslexia .tail-outer { border-color: transparent var(--bubble-dyslexia-bg) transparent transparent; } .bln.bright { background: linear-gradient( 180deg, var(--bubble-right-bg-top) 0%, var(--bubble-right-bg) 100% ); color: var(--bubble-right-fg); margin: 1.2rem 4% 0.6rem auto; } /* Remove outline approach */ .bln-inner { all: unset; } .tail-inner { display: none !important; } /* Bubble tail — outer (colored) */ .tail-outer { display: block; position: absolute; width: 0; height: 0; border-style: solid; bottom: 2px; } .bln.bleft .tail-outer { border-color: transparent var(--bubble-left-bg) transparent transparent; border-width: 8px 22px 6px 0; left: -16px; rotate: -35deg; } .bln.bleft.gityo .tail-outer { border-color: transparent var(--bubble-gityo-bg) transparent transparent; } .bln.bright .tail-outer { border-color: transparent transparent transparent var(--bubble-right-bg); border-width: 8px 0 6px 22px; right: -16px; rotate: 40deg; } /* Bubble tail — inner (page background) */ .tail-inner { display: block; position: absolute; width: 0; height: 0; border-style: solid; bottom: 3px; } .bln.bleft .tail-inner { border-color: transparent var(--sl-color-bg) transparent transparent; border-width: 6px 18px 4px 0; left: -13px; rotate: -40deg; } .bln.bright .tail-inner { border-color: transparent transparent transparent var(--sl-color-bg); border-width: 6px 0 4px 18px; right: -14px; rotate: 40deg; } /* Speaker label — subtle */ .bln::after { color: var(--sl-color-gray-3); content: attr(data-speaker); position: absolute; font-size: 0.7rem; top: -1.1rem; white-space: nowrap; } .bln.bleft::after { left: 0.5rem; } .bln.bright::after { right: 0.5rem; text-align: right; } /* Bubble inner paragraphs */ .bln > p:not(:last-child) { margin-top: 0; } .bln > p:last-child { margin: 0; } /* Bubble emotion variants */ .bln.bleft.thought, .bln.bleft.smile, .bln.bleft.weary, .bln.bleft.anger, .bln.bleft.sorry, .bln.bleft.search { border: 6px dotted var(--bubble-left-fg); background-color: unset; } .bln.bleft.thought::before, .bln.bleft.smile::before, .bln.bleft.weary::before, .bln.bleft.anger::before, .bln.bleft.sorry::before, .bln.bleft.search::before { border-width: 0; content: "🤔"; left: -2.5rem; top: 0; } .bln.bleft.smile::before { content: "🙂"; } .bln.bleft.weary::before { content: "😩"; } .bln.bleft.anger::before { content: "💢"; } .bln.bleft.sorry::before { content: "🙏"; } .bln.bleft.search::before { content: "🔍"; } @media only screen and (min-width: 800px) { .bln { max-width: 66%; } .bln.bleft.thought::before, .bln.bleft.smile::before, .bln.bleft.weary::before, .bln.bleft.anger::before, .bln.bleft.sorry::before, .bln.bleft.search::before { left: -3rem; } } /* ── BlockQuote (cool sticky note) ── */ .qt { position: relative; background: linear-gradient(135deg, #fef9e7 0%, #fef3c7 100%); border: 1px solid #fcd34d; border-radius: 4px; padding: 18px 20px 20px; margin: 1rem 6%; color: #78350f; box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.06); } :root[data-theme="dark"] .qt { background: linear-gradient(135deg, #2a1e00 0%, #1a1400 100%); border-color: #854d00; color: #fcd34d; box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.2); } .qt::before { content: ""; position: absolute; top: -6px; left: 16px; width: 40px; height: 10px; background: #d97706; border-radius: 2px; opacity: 0.6; } .qt cite { font-weight: 600; display: block; font-style: normal; margin-bottom: 0.5rem; font-size: 0.95em; color: inherit; } .bln .qt a { color: #92400e; text-decoration-color: #b45309; } :root[data-theme="dark"] .bln .qt a { color: #fbbf24; text-decoration-color: #f59e0b; } /* ══════════════════════════════════════ Highlight ══════════════════════════════════════ */ .highlight-span { background-color: var(--highlight-bg); color: var(--highlight-fg); border-bottom: 1px dotted var(--highlight-fg); } /* ══════════════════════════════════════ Site Guide (home page nav cards) ══════════════════════════════════════ */ /* ── Homepage Hero Banner (Salient-inspired) ── */ /* Remove default Starlight page title and extra whitespace on home */ main:has(.home-hero) > .content-panel:first-child { display: none; } main:has(.home-hero) { padding-top: 0; } .main-frame:has(.home-hero) { padding-top: 0; } /* Hide right sidebar (TOC) on home page — mobile only */ @media (max-width: 799px) { /* Collapse right sidebar entirely */ .sl-flex:has(.home-hero) .right-sidebar-container { display: none; } .sl-flex:has(.home-hero) .right-sidebar { display: none; } /* Make content full width */ .sl-flex:has(.home-hero) { grid-template-columns: 100%; } .sl-flex:has(.home-hero) .main-pane { width: 100%; max-width: 100%; } } /* Change TOC "Back to top" text */ [href="#_top"]:not([class*="skip"]) span { display: none; } [href="#_top"]:not([class*="skip"])::after { content: "ページ上部へ"; font-size: 0.875rem; } .sl-container:has(.home-hero) .hero, .content-panel:has(.home-hero) > .sl-container { padding-top: 0; } .content-panel:has(.home-hero) { padding-top: 0 !important; } .content-panel:has(.home-hero) { overflow-x: clip; } .home-hero { position: relative; margin: 3.5rem calc(-50vw + 50%) 3rem calc(-50vw + 50%); padding: 6rem 1rem 5rem 8%; background: url("/img/mini_yasutake-yohei_15.jpg") top center/auto 110% no-repeat; text-align: left; color: #fff; min-height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .home-hero::before { content: ""; position: absolute; inset: 0; background: none; } .home-hero > * { position: relative; z-index: 1; } .home-hero h1 { font-size: 1.8rem; font-weight: 700; color: #fff; margin: 0 0 0.5rem; line-height: 1.5; } .home-hero h1 .line { display: block; } .home-hero .hero-sub { font-size: 0.95rem; color: #fff; opacity: 0.9; } /* ── Profile intro: photo + message (two-column) ── */ .home-intro { margin: 5rem 0 6rem; } .home-intro .intro-head h2 { margin-top: 0 !important; margin-bottom: 1rem; line-height: 1.6; text-align: center; } .home-intro .intro-photo { text-align: center; margin: 0 auto 1rem; } .home-intro .intro-photo img { display: inline; width: 200px; max-width: 60%; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .home-intro .photo-caption { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--sl-color-gray-2); text-align: center; } .home-intro .intro-text > p:first-child { margin-top: 0 !important; } @media screen and (min-width: 768px) { .home-intro { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; row-gap: 0.5rem; align-items: center; } .home-intro .intro-head, .home-intro .intro-cta { grid-column: 1 / -1; text-align: center; } .home-intro .intro-photo img { width: 100%; } } /* ── Separator with label ── */ .home-sep { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 2rem; } .home-sep::before, .home-sep::after { content: ""; flex: 1; border-top: 1px solid #aaa; } .home-sep span { font-size: 0.85rem; color: #888; font-weight: 600; } @media screen and (min-width: 768px) { .home-hero { margin: 3.5rem 0 2rem 0; padding: 6rem 2rem 4rem 3rem; } .home-hero h1 { font-size: 2.5rem; } } /* ══════════════════════════════════════ Top bar: cleaner site title ══════════════════════════════════════ */ /* ── Jisseki page: achievement item images ── */ .achievement-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--sl-color-gray-6); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; } .achievement-card .achievement-img { flex-shrink: 0; width: 160px; height: 110px; object-fit: cover; border-radius: 6px; } .achievement-card .achievement-body { flex: 1; min-width: 0; } .achievement-card .achievement-body p { margin: 0.25rem 0 0; font-size: 0.9rem; } @media screen and (max-width: 600px) { .achievement-card { flex-direction: column; } .achievement-card .achievement-img { width: 100%; height: 140px; } } /* Activity grid on home page */ .activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .activity-card { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; display: block; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .activity-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } .activity-card img { width: 100%; height: 100%; object-fit: cover; } .activity-card .activity-title { position: absolute; top: 0; left: 0; right: 0; padding: 0.4rem 0.5rem; background: rgba(0, 0, 0, 0.6); color: white; font-size: 0.8rem; font-weight: 700; text-align: center; line-height: 1.3; z-index: 1; } .site-title { font-size: 1.05rem; font-weight: 500; letter-spacing: 0.02em; } .sl-markdown-content h2:has(+ .site-guide) { font-size: 0.9rem !important; } .guide-btn { display: inline-block; padding: 0.4rem 1.2rem; background: var(--sl-color-accent); color: #fff !important; border-radius: 6px; font-weight: 500; font-size: 0.9rem; transition: background 0.2s; } .guide-btn:hover { background: var(--sl-color-accent-high); color: #fff !important; } /* ── Site guide icon cards ── */ .site-guide { display: grid; grid-template-columns: repeat(3, 120px); gap: 0.5rem; margin: 2rem 0 1rem; justify-content: center; } .site-guide a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.75rem 0.5rem; border-radius: 8px; background: var(--sl-color-gray-6); text-decoration: none; text-align: center; font-size: 0.85rem; font-weight: 500; color: var(--sl-color-text); transition: background 0.2s; } .site-guide a:hover { background: var(--sl-color-accent-low); } .site-guide .icon { font-size: 1.4rem; line-height: 1; } .site-guide .label { line-height: 1.3; } .intro-cta { text-align: center; margin-top: 1.5rem; } /* ══════════════════════════════════════ External Link Icon ══════════════════════════════════════ */ /* ── Hide empty profile table header ── */ .sl-markdown-content thead:has(th:empty) { display: none; } /* ── Center and space 市政への思い, 活動 headings ── */ .profile-detail ~ h2, .profile-detail ~ .sl-heading-wrapper.level-h2 { text-align: center !important; margin-top: 8rem !important; margin-bottom: 2rem !important; } /* ── Profile detail headings: smaller, centered ── */ .profile-detail .sl-heading-wrapper { text-align: center !important; margin-top: 3rem !important; margin-bottom: 4rem !important; } .profile-detail h3 { font-size: 0.85em !important; text-align: center !important; border-left: none !important; padding-left: 0 !important; } /* ── Profile detail: more space between photo and caption ── */ .profile-detail figcaption { margin-top: 0.8rem !important; } .profile-detail figure { margin-bottom: 2rem !important; } /* Hide heading anchor links on home page */ .sl-markdown-content:has(.home-hero) .sl-anchor-link { display: none; } .profile-table { margin-top: 1.5rem; } .profile-table table { box-shadow: none !important; border-radius: 0 !important; border: none !important; } .profile-table table tbody td { padding: 1rem 0.5rem; border-bottom: 1px solid var(--sl-color-gray-5); vertical-align: middle; } .profile-table table tbody td:last-child { white-space: normal; } .profile-table table tbody td:first-child { white-space: nowrap; } .profile-table table tbody tr:nth-child(even) { background: transparent; } .profile-table table tbody tr:hover { background: var(--sl-color-gray-5); } .ext-link-icon { display: inline-block; margin-left: 0.15em; font-size: 0.75em; vertical-align: super; }