.theme-toggle { width:40px; height:40px; display:inline-grid; place-items:center; position:relative; flex:0 0 auto; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; overflow:hidden; transition:background .28s cubic-bezier(.16,1,.3,1),border-color .28s cubic-bezier(.16,1,.3,1),color .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1); }
.theme-toggle:hover { transform:rotate(16deg) scale(1.06); background:rgba(255,255,255,.16); }.theme-toggle:active { transform:rotate(0) scale(.92); }
.theme-toggle svg { position:absolute; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:opacity .22s ease,transform .32s cubic-bezier(.16,1,.3,1); }.theme-toggle .theme-sun { opacity:0; transform:rotate(-70deg) scale(.45); }.theme-toggle .theme-moon { opacity:1; transform:rotate(0) scale(1); }
html[data-theme="light"] .theme-toggle { color:var(--dark); border-color:rgba(30,30,30,.18); background:rgba(255,255,255,.78); box-shadow:0 5px 18px rgba(0,0,0,.1); } html[data-theme="light"] .theme-toggle .theme-sun { opacity:1; transform:rotate(0) scale(1); } html[data-theme="light"] .theme-toggle .theme-moon { opacity:0; transform:rotate(70deg) scale(.45); }
html[data-theme="light"] body.home-page #hero { background:#f0eeea; } html[data-theme="light"] body.home-page #hero .hero-name,html[data-theme="light"] body.home-page #hero .hero-descriptor { color:#242220; } html[data-theme="light"] body.home-page #hero .hero-location,html[data-theme="light"] body.home-page #hero .now-label,html[data-theme="light"] body.home-page #hero .now-item-name { color:#242220; } html[data-theme="light"] body.home-page #hero .now-item-desc,html[data-theme="light"] body.home-page #hero .now-footer { color:#6c665f; } html[data-theme="light"] body.home-page #hero .now-rule { background:rgba(36,34,32,.18); } html[data-theme="light"] body.home-page #hero .btn-ghost { border-color:rgba(36,34,32,.3); color:#242220; } html[data-theme="light"] body.home-page #hero .hero-badge { color:#242220; border-color:rgba(36,34,32,.16); background:rgba(36,34,32,.03); } html[data-theme="light"] body.home-page #hero #hero-scrim { background:linear-gradient(100deg, rgba(240,238,234,.88) 0%, rgba(240,238,234,.55) 38%, rgba(240,238,234,.1) 62%, transparent 78%), linear-gradient(0deg, rgba(240,238,234,.6) 0%, transparent 30%); } html[data-theme="light"] #navbar { background:rgba(240,238,234,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(36,34,32,.1); } html[data-theme="light"] #navbar .nav-brand-text,html[data-theme="light"] #navbar .nav-links a { color:rgba(36,34,32,.72); } html[data-theme="light"] #navbar .nav-links a:hover { color:#242220; }
html[data-theme="dark"] { color-scheme:dark; --soft:#1c1b19; --mid:#b7b1a8; --dark:#f1eee8; --coral:#ff9a72; --coral2:#ffb28f; --ink:#151412; --ink2:#100f0e; --white:#282623; }
html[data-theme="dark"] body { background:var(--soft); color:var(--dark); } html[data-theme="dark"] #navbar { background:rgba(21,20,18,.86)!important; border-bottom-color:rgba(255,255,255,.09)!important; box-shadow:0 8px 30px rgba(0,0,0,.16); } html[data-theme="dark"] #navbar .nav-brand-text,html[data-theme="dark"] #navbar .nav-links a,html[data-theme="dark"] #navbar .nav-back { color:rgba(255,255,255,.78)!important; } html[data-theme="dark"] #navbar .nav-links a:hover,html[data-theme="dark"] #navbar .nav-back:hover { color:#fff!important; }
html[data-theme="dark"] .project-card { background:var(--white); box-shadow:0 14px 38px rgba(0,0,0,.24); } html[data-theme="dark"] .course-card { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.12); } html[data-theme="dark"] .course-mod-btn,html[data-theme="dark"] .tag,html[data-theme="dark"] .cred-tag { border-color:rgba(255,255,255,.15); } html[data-theme="dark"] .gallery-frame,html[data-theme="dark"] #slideshow { background:#171614; } html[data-theme="dark"] .meta-block { border-color:rgba(255,255,255,.12); } html[data-theme="dark"] .return-btn { background:var(--coral); color:#241711; }
body.apple-i-project .gallery-media img { object-fit:contain; background:#171614; }
html[data-theme="light"] #navbar .nav-back { color:var(--coral)!important; } html[data-theme="light"] #navbar .nav-back:hover { color:var(--dark)!important; }
/* Home chrome is visible immediately (transparent over the hero), then gets a glass bar once scrolled. */
#navbar.scrolled,#navbar.light { border-radius:0 0 14px 14px; }
/* Light is a complete theme, not a light navigation pasted onto dark sections. */
html[data-theme="light"] #hub,html[data-theme="light"] #courses,html[data-theme="light"] footer { background:#f0eeea!important; color:#242220!important; border-color:rgba(36,34,32,.1)!important; } html[data-theme="light"] #hub .section-heading,html[data-theme="light"] #courses .courses-heading,html[data-theme="light"] footer .footer-brand { color:#242220!important; } html[data-theme="light"] #hub .hub-card,html[data-theme="light"] #courses .course-card { background:#ffffff!important; border-color:rgba(36,34,32,.14)!important; box-shadow:0 2px 18px rgba(36,34,32,.06)!important; } html[data-theme="light"] #hub .hub-title,html[data-theme="light"] #courses .course-title { color:#242220!important; } html[data-theme="light"] #hub .hub-desc,html[data-theme="light"] #courses .course-desc,html[data-theme="light"] footer .footer-nav a,html[data-theme="light"] footer .footer-copy { color:rgba(36,34,32,.62)!important; } html[data-theme="light"] #hub .hub-icon { color:rgba(36,34,32,.45)!important; } html[data-theme="light"] #hub .hub-card:hover .hub-icon { color:var(--coral)!important; } html[data-theme="light"] #hub .hub-number { color:var(--coral)!important; } html[data-theme="light"] footer .footer-rule { background-image:linear-gradient(to right, rgba(36,34,32,.18) 0, rgba(36,34,32,.18) 4px, transparent 4px, transparent 10px)!important; } html[data-theme="light"] footer .footer-social a { border-color:rgba(36,34,32,.16)!important; color:rgba(36,34,32,.5)!important; }
/* Keep navigation quiet enough to leave room for the work. */
#navbar { padding:1.05rem 2.25rem!important; } #navbar.scrolled,#navbar.light { padding:.78rem 2.25rem!important; } #navbar .nav-brand { gap:.62rem; } #navbar .nav-brand img { width:25px; height:25px; } #navbar .nav-brand-text { font-size:.7rem; letter-spacing:.29em; } #navbar .nav-links { gap:1.65rem; } #navbar .nav-links a { font-size:.61rem; letter-spacing:.15em; }
@media (max-width:700px) { .theme-toggle { width:36px; height:36px; } #navbar,#navbar.scrolled,#navbar.light { padding:.72rem 1.05rem!important; } #navbar .nav-right { gap:.7rem; } #navbar .nav-brand img { width:22px; height:22px; } #navbar .nav-links { gap:.85rem; } } @media (prefers-reduced-motion:reduce) { .theme-toggle,.theme-toggle svg { transition:none; } }