/* ========================================================================== */ /* Ph.D. Dropout — Minimal, Matte UI */ /* Clean stylesheet matching current HTML (index, physics, maths) */ /* - Light/Dark themes via [data-theme] on */ /* - Sticky footer layout */ /* - Split hero with ghost quick-links */ /* - Clickable translucent .section-note cards */ /* ========================================================================== */ /* ===== Base / Reset ===== */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.55; } /* ===== Theming (light default) ===== */ :root, :root[data-theme="light"]{ --bg: #f6f7f9; --panel: #ffffff; --card: #ffffff; --text: #1a1d21; --muted: #5e6672; --accent: #2563eb; --border: #e6e9ef; --shadow: 0 10px 24px rgba(0,0,0,.06); --radius: 14px; --bg: #f0f0f0; --text: #333; --muted: #555; --border: #e0e0e0; --accent: #007BFF; } :root[data-theme="dark"]{ --bg: #0e0f11; --panel: #131518; --card: #17191d; --text: #e6e7ea; --muted: #9aa0a8; --accent: #7cc3ff; --border: #22262b; --shadow: 0 6px 20px rgba(0,0,0,.35); --radius: 14px; --bg: #1e1f22; /* soft matte dark gray background */ --text: #e5e5e5; /* gentle off-white for main text */ --muted: #b0b0b0; /* softer gray for secondary text */ --border: #2d2f34; /* subtle gray borders */ --accent: #66aaff; /* calm blue accent */ } /* ===== Layout ===== */ body.layout { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); } .container { width: min(1100px, 92vw); margin-inline: auto; } .main-fill { flex: 1; } .lede { color: var(--muted); max-width: 70ch; } .muted { color: var(--muted); } /* ===== Header / Nav ===== */ .site-header{ position: sticky; top: 0; z-index: 50; background: color-mix(in hsl, var(--bg) 75%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .header-wrap{ display:flex; align-items:center; justify-content:space-between; padding: 25px 0; font-size: 20px; } /* .brand{ color: var(--text); text-decoration:none; font-weight:800; letter-spacing:.2px; font-size: clamp(18px, 2.2vw, 22px); } */ /* Brand with logo */ .brand{ display: inline-flex; align-items: center; gap: 50px; text-decoration: none; } .brand-logo{ height: 45px; /* adjust to taste: 24–32px */ width: auto; display: block; transform: scale(2.5); /* visually enlarges the logo */ transform-origin: left center; } /* keep the nice typography on just the text */ .brand-text{ color: var(--text); font-weight: 500; letter-spacing: .2px; font-size: clamp(45px, 2.2vw, 22px); } /* Mobile-first header compression */ @media (max-width: 640px){ .header-wrap{ padding: 12px 0; /* was 25px */ gap: 10px; } .nav{ gap: 12px; } /* was 16px */ .nav a{ font-size: 18px; } /* slightly smaller links */ .theme-toggle{ padding: 6px; } /* tighter button */ .theme-toggle img{ height: 20px; width: 20px; } .brand-text{ font-size: clamp(20px, 2.2vw, 22px); display: none; } .brand-logo{ height: 30px; transform: scale(2.3);} .brand{gap: 20px;} } @media (max-width: 380px){ .brand-text{ display: none; } /* frees space on tiny phones */ .brand-logo{ height: 28px; } } .nav { display:flex; align-items:center; gap: 22px; } .nav a{ color: var(--muted); text-decoration:none; font-weight:600; transition: color .2s ease; } .nav a:hover, .nav a.active{ color: var(--text); } /* Theme toggle button */ .theme-toggle{ margin-left: 6px; border: 0px solid var(--border); background: var(--panel); color: var(--text); border-radius: 10px; padding: 10px 12px; line-height: 1; cursor: pointer; transition: transform .15s ease, border-color .2s ease, background .2s ease; background: transparent; } .theme-toggle img { height: 25px; width: 25px; display: block; } .theme-toggle:hover{ transform: translateY(-1px); border-color: color-mix(in hsl, var(--border), var(--text) 10%); } /* ===== Breadcrumb ===== */ .breadcrumb{ margin: 18px 0 8px; color: var(--muted); } .breadcrumb a{ color: var(--muted); text-decoration: none; } .breadcrumb a:hover{ color: var(--text); } /* ===== Hero (homepage) ===== */ .hero-split{ position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; padding: 48px 0 12px; align-items: start; } .hero-copy h1{ margin: 0 0 10px; font-size: clamp(32px, 6vw, 56px); line-height: 1.05; letter-spacing: .2px; } .hero-copy .quiet{ font-weight: 400; color: var(--muted); } .hero-actions{ display: flex; gap: 12px; margin-top: 16px; } /* Buttons */ .btn{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s ease, border-color .2s ease, background .2s ease; } .btn:hover{ transform: translateY(-1px); border-color: color-mix(in hsl, var(--border), var(--text) 12%); } .btn.primary{ background: color-mix(in hsl, var(--accent) 18%, var(--panel)); border-color: color-mix(in hsl, var(--accent) 40%, var(--border)); } /* “Start here” ghost card (right column) */ .hero-card{ background: var(--bg); /* match page background */ border: 0; box-shadow: none; border-radius: 16px; padding: 0; } .card-title{ margin: 0 0 10px; padding: 0; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; } .list-nav{ list-style: none; padding: 0; margin: 0; } .list-nav li + li{ margin-top: 8px; } .list-nav a{ display: block; text-decoration: none; color: var(--text); padding: 10px 0; border: 0; background: transparent; border-radius: 10px; position: relative; transition: background .2s ease, outline-color .2s ease; } .list-nav a::after{ content: ""; display: block; height: 1px; margin-top: 10px; background: color-mix(in hsl, var(--border), var(--bg) 30%); } .list-nav a:hover{ background: color-mix(in hsl, var(--bg), var(--accent) 5%); background: transparent; } .list-nav a:focus-visible{ outline: 2px solid color-mix(in hsl, var(--accent) 45%, transparent); outline-offset: 2px; } /* Ambient accent */ .hero-split::after{ content: ""; position: absolute; right: -8%; top: -10%; width: 520px; height: 520px; background: radial-gradient(closest-side, color-mix(in hsl, var(--accent) 22%, transparent) 0%, transparent 70%); filter: blur(30px); opacity: .25; pointer-events: none; } /* ===== Page headers (subject/topic pages) ===== */ .page-header{ padding: 36px 0 8px; } .page-header h1{ margin: 0 0 6px; font-size: clamp(26px, 4vw, 36px); } .page-header h2{ margin: 0; font-size: clamp(16px, 2.2vw, 20px); color: var(--muted); } /* ===== Clickable translucent content cards ===== */ .section-note{ margin: 28px 0 64px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(255,255,255,0.60); /* light fallback */ box-shadow: 0 6px 18px rgba(0,0,0,.08); backdrop-filter: blur(8px) saturate(110%); -webkit-backdrop-filter: blur(8px) saturate(110%); transition: background .2s ease, border-color .2s ease, transform .15s ease; color: inherit; text-decoration: none; display: block; /* allows */ } :root[data-theme="dark"] .section-note{ background: rgba(19,21,24,0.55); /* dark fallback */ } /* Prefer modern mixing when supported */ @supports (background: color-mix(in hsl, white 0%, black 100%)) { :root[data-theme="light"] .section-note{ background: color-mix(in hsl, var(--panel) 55%, transparent); background: transparent; } :root[data-theme="dark"] .section-note{ background: color-mix(in hsl, var(--panel) 45%, transparent); background: transparent; } } .section-note h2{ margin: 0 0 10px; } .bullets{ margin: 10px 0 0 18px; color: var(--muted); } .section-note:hover{ /*transform: translateY(-1px);*/ border-color: color-mix(in hsl, var(--border), var(--text) 15%); background: color-mix(in hsl, var(--panel) 62%, transparent); } .section-note:focus-visible{ outline: 2px solid color-mix(in hsl, var(--accent) 45%, transparent); outline-offset: 3px; } /* ===== Footer ===== */ .site-footer{ border-top: 1px solid var(--border); background: color-mix(in hsl, var(--bg) 85%, transparent); } .foot-wrap{ padding: 20px 0; display:flex; align-items:center; justify-content:space-between; } /* ===== Responsive ===== */ @media (max-width: 900px){ .hero-split{ grid-template-columns: 1fr; gap: 20px; } .hero-split::after{ display: none; } } @media (max-width: 640px){ .nav { gap: 16px; } } /* === TOC links: neutral by default, highlight on hover/focus ============= */ #toc .bullets a{ color: inherit; /* same color as surrounding text */ text-decoration: none; /* remove default underline */ transition: color .15s ease; /* smooth hover */ } #toc .bullets a:visited{ color: inherit; /* no purple after click */ } /* hover/focus: show a clean underline, not a color change */ #toc .bullets a:hover, #toc .bullets a:focus-visible{ text-decoration:none; text-underline-offset: 3px; text-decoration-thickness: 2px; } /* optional: keyboard focus ring for accessibility (keeps the neutral color) */ #toc .bullets a:focus-visible{ outline: 2px solid color-mix(in hsl, var(--accent) 45%, transparent); outline-offset: 2px; } /* === Trig chapter layout (diagram on the right) === */ .trig-split{ display: grid; grid-template-columns: 1.5fr 1fr; /* copy-heavy left, figure right */ gap: 20px; align-items: start; } .trig-figure{ margin: 0; justify-self: end; text-align: center; padding-right: 20px; } .trig-figure img{ max-width: 250%; width: auto; height: auto; /*display: block; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow);*/ background: transparent; } .trig-figure figcaption { font-size: 0.9em; color: var(--muted, #666); margin: 0px; /* kill extra space */ } /* Base look (light mode) */ .trig-figure img { filter: none; transition: filter 0.3s ease; } /* When dark mode is active */ html[data-theme="dark"] .trig-figure img { filter: invert(1) hue-rotate(180deg); } @media (max-width: 900px) { .trig-split { grid-template-columns: 1fr; } .trig-figure { justify-self: start; padding-right: 0; } .trig-figure img { max-width: 100%; } } /* === Unified Footer (from personal website) === */ .site-footer { text-align: center; padding: 12px 20px; border-top: 1px solid var(--border); background-color: color-mix(in hsl, var(--bg) 90%, transparent); color: var(--muted); font-size: 0.8rem; } .site-footer p { margin: 10px; color: var(--muted); } /* Centered “Coming Soon” layout without a card */ .coming-wrap { min-height: 60vh; display:contents; place-items: center; text-align: center; gap: 0px; } .coming-wrap h1 { margin: 10ch; } .coming-wrap .lede { max-width: 70ch; margin: 10ch auto; } /* Let text fill the whole card when there is no diagram layout */ .section-note:not(.trig-split) .lede { max-width: none; /* or try 85ch if you want a soft cap */ } /* === Float-based figure layout inside cards =============================== */ /* Works for any .section-note: text fills remaining space dynamically. */ /* Add class="fig-left" or "fig-right" on
. */ /* Clearfix so floated figures don't leak outside the card */ .section-note::after { content: ""; display: block; clear: both; } /* Base figure look */ .section-note figure { margin: 0; /* reset */ text-align: center; } /* Image sizing: respect intrinsic size but cap responsibly */ .section-note figure img { display: block; max-width: 100%; height: auto; background: transparent; transition: filter 0.3s ease; } /* Optional: dark-mode invert for line-art diagrams */ html[data-theme="dark"] .section-note figure img { filter: invert(1) hue-rotate(180deg); } /* Right-aligned figure (default spacing on the left) */ .section-note figure.fig-right { float: right; /* Width adapts to container size; image won’t exceed this */ width: clamp(180px, 30%, 360px); margin: 0 0 12px 18px; } /* Left-aligned figure */ .section-note figure.fig-left { float: left; width: clamp(180px, 30%, 360px); margin: 0 18px 12px 0; } /* Tighten line-length only when a floated figure is present directly nearby */ .section-note :is(.fig-left, .fig-right) ~ .lede, .section-note p:has(+ figure.fig-left), .section-note p:has(+ figure.fig-right) { max-width: none; /* ensure full wrap across remaining space */ } /* If you keep using .lede elsewhere, let default be comfortable lines */ .lede { max-width: 70ch; } /* Mobile: stop floating; stack full-width */ @media (max-width: 900px) { .section-note figure.fig-left, .section-note figure.fig-right { float: none; width: 100%; margin: 10px auto; } }