/* ========================================================= mobile.css — MOBILE LAYOUT OVERRIDES Applied via set by JS / server. ========================================================= */ /* ---------- Single-column layout: hide sidebars ---------- */ .is-mobile .layout { grid-template-columns: 1fr; padding: 0.75rem; gap: 0; } .is-mobile .layout__left, .is-mobile .layout__right { display: none; } .is-mobile .layout__main { grid-column: 1; grid-row: 1; padding: 1.25rem; border-radius: var(--radius); position: static; } /* ---------- Header: compact, position:relative for drawer ---------- */ .is-mobile .site-header { position: relative; } .is-mobile .site-header__inner { padding: 0 1rem; gap: 0.5rem; } .is-mobile .site-header__title { font-size: 1.15rem; } .is-mobile .site-header__nav { display: none; } /* ---------- Hamburger button ---------- */ .hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: var(--radius); color: var(--color-header-text); margin-left: auto; line-height: 1; position: relative; z-index: 1100; } .hamburger-btn:hover { background: var(--color-hover); } .hamburger-btn svg { display: block; width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; } /* Toggle between ☰ and ✕ icons via CSS */ .hamburger-btn .icon-close { display: none; } .hamburger-btn.is-open .icon-menu { display: none; } .hamburger-btn.is-open .icon-close { display: block; } .is-mobile .hamburger-btn { display: flex; align-items: center; justify-content: center; } /* ---------- Stories + TOC drawer ---------- */ .mobile-stories-drawer { display: none; position: absolute; top: 7%; right: 15px; z-index: 1050; background: var(--color-header-bg); border-bottom: 2px solid var(--color-accent); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); max-height: 0; overflow: hidden; opacity: 0; max-width: 480px; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; } .is-mobile .mobile-stories-drawer { display: block; } .mobile-stories-drawer.is-open { max-height: 82vh; opacity: 1; overflow-y: auto; } .mobile-stories-drawer__inner { padding: 1rem 1.25rem 1.5rem; } /* Section label shared by stories and TOC */ .mobile-drawer-section-title { font-family: var(--font-heading, Georgia, serif); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); } /* Stories list */ .mobile-stories-drawer .story-list { list-style: none; } .mobile-stories-drawer .story-list__item { border-bottom: 1px dashed var(--color-border); padding: 0.75rem 0; margin: 0; } .mobile-stories-drawer .story-list__item:last-child { border-bottom: none; padding-bottom: 0; } .mobile-stories-drawer .story-list__link { display: block; text-decoration: none; color: inherit; } .mobile-stories-drawer .story-list__title { display: block; font-weight: 600; font-size: 0.95rem; color: var(--color-text); margin-bottom: 0.2rem; transition: color 0.15s; } .mobile-stories-drawer .story-list__snippet { display: block; font-size: 0.82rem; color: var(--color-muted); line-height: 1.45; } .mobile-stories-drawer .story-list__link:hover .story-list__title { color: var(--color-accent); } /* ---------- TOC section inside drawer ---------- */ .mobile-drawer-toc-section { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--color-border); } /* Collapsible TOC toggle row */ .mobile-toc-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; font-family: var(--font-heading, Georgia, serif); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); margin-bottom: 0; } .mobile-toc-toggle__arrow { font-size: 0.65rem; color: var(--color-accent); transition: transform 0.25s ease; display: inline-block; } .mobile-toc-toggle.is-open .mobile-toc-toggle__arrow { transform: rotate(90deg); } /* TOC list: collapsed by default, expands on toggle */ .mobile-toc-list { list-style: none; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, margin-top 0.2s ease; margin-top: 0; } .mobile-toc-list.is-open { max-height: 500px; margin-top: 0.6rem; } .mobile-toc-list li { margin-bottom: 0; } .mobile-toc-list .toc__link { display: block; text-decoration: none; color: var(--color-muted); font-size: 0.9rem; padding: 0.55rem 0.4rem; border-radius: 4px; border-left: 2px solid transparent; transition: all 0.15s ease; } .mobile-toc-list .toc__link:hover, .mobile-toc-list .toc__link:active { color: var(--color-accent); border-left-color: var(--color-accent); background: var(--color-hover); } .mobile-toc-list .toc__item--h3 { padding-left: 0.8rem; } .mobile-toc-list .toc__item--h4 { padding-left: 1.6rem; } .mobile-toc-list .toc__item--h3 .toc__link, .mobile-toc-list .toc__item--h4 .toc__link { font-size: 0.82rem; } /* ---------- Backdrop ---------- */ .mobile-drawer-backdrop { display: none; position: fixed; inset: 0; z-index: 1040; background: rgba(0, 0, 0, 0.38); opacity: 0; transition: opacity 0.25s ease; cursor: pointer; } .is-mobile .mobile-drawer-backdrop { display: block; } .mobile-drawer-backdrop.is-open { opacity: 1; } /* ---------- Article typography ---------- */ .is-mobile .article__title { font-size: 1.5rem; margin-bottom: 1.25rem; } .is-mobile .article__heading { font-size: 1.15rem; } .is-mobile .article__paragraph { font-size: 0.97rem; line-height: 1.7; } /* ---------- Footer ---------- */ .is-mobile .site-footer__inner { padding: 0 1rem; font-size: 0.8rem; }