/* ============================================= THEME TOGGLE — Dark ↔ Light Mode shadesofshrey.com ============================================= */ /* ── Toggle Button ── */ .theme-toggle { position: relative; z-index: 1001; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; cursor: pointer; padding: 0; margin-left: auto; flex-shrink: 0; transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.2s ease; } .theme-toggle:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.14); transform: scale(1.08); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle svg { width: 18px; height: 18px; color: rgba(255,255,255,0.85); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease, color 0.35s ease; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } /* ── Nav placement — index.html (.nav) ── */ .nav .theme-toggle { margin-left: var(--space-lg, 2rem); } /* ── Nav placement — subpages (.site-nav) ── */ .site-nav .theme-toggle { margin-left: 2rem; } /* Mobile: show toggle in header bar, not inside menu */ @media (max-width: 1024px) { .nav .theme-toggle, .site-nav .theme-toggle { margin-left: auto; margin-right: 12px; order: -1; } } /* ================================================================= LIGHT THEME OVERRIDES Applied via data-theme="light" on ================================================================= */ /* ── Global transition for smooth theme switch ── */ [data-theme="light"], [data-theme="light"] * { transition-property: background-color, color, border-color, box-shadow, fill, stroke; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.16,1,0.3,1); } /* ── Toggle button in light mode ── */ [data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.3); } [data-theme="light"] .theme-toggle:hover { border-color: rgba(0,0,0,0.5); background: rgba(0,0,0,0.12); } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle svg { color: #3a3530; } /* ── styles.css (index.html) ── */ [data-theme="light"] { --color-black: #faf8f5; --color-white: #1a1a1f; --color-gray-100: #1d1d1f; --color-gray-200: #2a2a2e; --color-gray-300: #3a3a42; --color-gray-400: #5a5a62; --color-gray-500: #6a6a72; --color-gray-600: #c0bdb8; --color-gray-700: #e8e4de; } [data-theme="light"] body { background-color: #faf8f5; color: #1a1a1f; } [data-theme="light"] ::selection { background-color: #c9a84c; color: #fff; } /* Nav */ [data-theme="light"] .nav.scrolled { background-color: rgba(250,248,245,0.88); box-shadow: 0 1px 0 rgba(0,0,0,0.06); } [data-theme="light"] .nav-logo-img, [data-theme="light"] .site-nav-logo-img { filter: brightness(0.4) saturate(1.4); } [data-theme="light"] .nav-toggle span, [data-theme="light"] .site-nav-toggle span { background-color: #1a1a1f; } [data-theme="light"] .nav-menu a { color: #5a5a62; } [data-theme="light"] .nav-menu a::after { background-color: #1a1a1f; } [data-theme="light"] .nav-menu a:hover { color: #1a1a1f; } /* Hero */ [data-theme="light"] .hero-logo-img { filter: brightness(0.35) saturate(1.6); } [data-theme="light"] .hero-grain { opacity: 0.015; } [data-theme="light"] .scroll-line { background: linear-gradient(to bottom, #1a1a1f, transparent); } /* Philosophy */ [data-theme="light"] .quote-mark { color: #e8e4de; } /* Works */ [data-theme="light"] .filter-btn.active { color: #1a1a1f; border-color: #1a1a1f; background-color: rgba(0,0,0,0.04); } [data-theme="light"] .filter-btn:hover { color: #1a1a1f; } [data-theme="light"] .work-placeholder { background: linear-gradient(135deg, #e8e4de, #d5d0c8); color: #b0aba3; } [data-theme="light"] .work-image { background-color: #e8e4de; } [data-theme="light"] .work-info { background: linear-gradient(to top, rgba(250,248,245,0.95), transparent); } /* Gallery */ [data-theme="light"] .gallery-placeholder { background: linear-gradient(135deg, #e8e4de, #d5d0c8); } [data-theme="light"] .gallery-placeholder span { color: #b0aba3; } [data-theme="light"] .gallery-item::after { background: linear-gradient(to top, rgba(250,248,245,0.3), transparent 50%); } /* Lightbox */ [data-theme="light"] .lightbox-backdrop { background-color: rgba(250,248,245,0.94); } [data-theme="light"] .lightbox-close { color: #1a1a1f; } [data-theme="light"] .lightbox-close:hover { background-color: rgba(0,0,0,0.08); } [data-theme="light"] .lightbox-prev, [data-theme="light"] .lightbox-next { color: #1a1a1f; background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .lightbox-prev:hover, [data-theme="light"] .lightbox-next:hover { background: rgba(0,0,0,0.1); } /* Journal cards */ [data-theme="light"] .journal-card { border-color: #e0dcd4; } [data-theme="light"] .journal-card:hover { border-color: #c0bdb8; background-color: rgba(0,0,0,0.02); } [data-theme="light"] .journal-tag { background-color: #e8e4de; color: #1a1a1f; } [data-theme="light"] .journal-placeholder { background: linear-gradient(135deg, #e8e4de, #faf8f5); } [data-theme="light"] .journal-link::after { background-color: #1a1a1f; } /* Timeline */ [data-theme="light"] .timeline::before { background: linear-gradient(to bottom, #1a1a1f, #e8e4de); } [data-theme="light"] .timeline-marker { background-color: #1a1a1f; box-shadow: 0 0 8px rgba(0,0,0,0.15); } /* Skill bars */ [data-theme="light"] .skill-bar { background-color: #e8e4de; } [data-theme="light"] .skill-progress { background-color: #1a1a1f; } /* Footer */ [data-theme="light"] footer { border-top-color: #e0dcd4; } /* ── Strategy tile on index page ── */ [data-theme="light"] .strategy-tile { background: #f0ece5; border-color: rgba(160,130,50,0.2); } [data-theme="light"] .strategy-tile:hover { background: #ebe7df; } /* Contact / Connect form */ [data-theme="light"] .contact-input, [data-theme="light"] .contact-textarea { background-color: #f0ece5; border-color: #e0dcd4; color: #1a1a1f; } [data-theme="light"] .contact-input:focus, [data-theme="light"] .contact-textarea:focus { border-color: #c9a84c; } /* ================================================================= PAGE-SPECIFIC LIGHT THEME OVERRIDES ================================================================= */ /* ── Site-wide nav (subpages) ── */ [data-theme="light"] .site-nav { background: rgba(250,248,245,0.88); box-shadow: 0 1px 0 rgba(0,0,0,0.06); } [data-theme="light"] .site-nav-menu a { color: #5a5a62; } [data-theme="light"] .site-nav-menu a::after { background-color: #1a1a1f; } [data-theme="light"] .site-nav-menu a:hover { color: #1a1a1f; } /* ── journal-article.css (the-art-of-intentional-living) ── */ [data-theme="light"] { --bg-primary: #faf8f5; --bg-secondary: #f0ece5; --bg-card: #e8e4de; --gold: #a08232; --gold-dim: #8b7028; --gold-glow: rgba(160,130,50,0.08); --gold-line: rgba(160,130,50,0.2); --text-primary: #1a1a1f; --text-body: #3a3a42; --text-muted: #7a7a82; --text-accent: #6b5a20; } /* ── strategy-section.css ── */ [data-theme="light"] { --bg: #faf8f5; --bg-elevated: #f0ece5; --bg-card: #e8e4de; --bg-card-hover: #e0dcd4; --gold: #a08232; --gold-light: #b8942e; --gold-dim: rgba(160,130,50,0.12); --gold-glow: rgba(160,130,50,0.06); --text: #1a1a1f; --text-secondary: #5a5a62; --text-muted: #8a8a92; --accent: #2a2a2f; --line: rgba(160,130,50,0.2); --line-subtle: rgba(160,130,50,0.08); } /* ── domino-cold-war.css ── */ [data-theme="light"] { --bg-primary: #faf8f5; --bg-secondary: #f0ece5; --bg-card: #e8e4de; --bg-highlight: #ddd8ce; --gold: #a08232; --gold-dim: #7a6525; --gold-glow: rgba(160,130,50,0.12); --red: #c03530; --red-dim: rgba(192,53,48,0.12); --green: #2e8b32; --green-dim: rgba(46,139,50,0.1); --blue: #3a6cb8; --blue-dim: rgba(58,108,184,0.1); --orange: #c87030; --orange-dim: rgba(200,112,48,0.1); --purple: #7a50b8; --purple-dim: rgba(122,80,184,0.1); --text-primary: #1a1a1f; --text-secondary: #5a5a62; --text-dim: #8a8a92; --border: rgba(160,130,50,0.15); } /* ── root-cause-analysis.css ── */ [data-theme="light"] { --bg: #faf8f5; --bg2: #f0ece5; --bg3: #e8e4de; --bg4: #e0dcd4; --gold: #a08232; --gold-d: #7a6525; --gold-g: rgba(160,130,50,0.1); --red: #c03530; --red-g: rgba(192,53,48,0.08); --blue: #3a6cb8; --blue-g: rgba(58,108,184,0.08); --green: #2e8b32; --green-g: rgba(46,139,50,0.08); --orange: #c87030; --orange-g: rgba(200,112,48,0.08); --purple: #7a50b8; --purple-g: rgba(122,80,184,0.08); --cyan: #2a9aa8; --cyan-g: rgba(42,154,168,0.08); --txt: #1a1a1f; --txt2: #5a5a62; --txt3: #8a8a92; --bdr: rgba(160,130,50,0.12); } /* ── research.css (hardcoded, not variable-based) ── */ [data-theme="light"] .research-page { background: linear-gradient(165deg, #faf8f5 0%, #f0ece5 40%, #faf8f5 100%); color: #1a1a1f; } [data-theme="light"] .research-bg-grid { background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); } [data-theme="light"] .research-header .back-link { color: rgba(42,154,168,0.7); } /* ── Body grain overlay for light mode ── */ [data-theme="light"] body::before { opacity: 0.012; } [data-theme="light"] .hero-grain { opacity: 0.012; } /* ── SVG strokes & fills for strategy diagram ── */ [data-theme="light"] .strategy-section svg text { fill: #1a1a1f; } [data-theme="light"] .strategy-section svg line, [data-theme="light"] .strategy-section svg path { stroke: rgba(160,130,50,0.4); } /* ── Domino/Root-cause body override ── */ [data-theme="light"] body { background: #faf8f5; color: #1a1a1f; } /* ── Sticky sub-nav (domino, root-cause) ── */ [data-theme="light"] .nav#nav, [data-theme="light"] nav.nav:not(:first-of-type) { background: rgba(250,248,245,0.92); border-bottom-color: rgba(0,0,0,0.06); } [data-theme="light"] .nav-btn { color: #5a5a62; } [data-theme="light"] .nav-btn.active, [data-theme="light"] .nav-btn:hover { color: #1a1a1f; } /* ── Copyright banner ── */ [data-theme="light"] .copyright-banner, [data-theme="light"] .copy-banner { background: rgba(240,236,229,0.95); color: #5a5a62; } /* ── Progress bar (journal articles) ── */ [data-theme="light"] .progress-bar { background: #a08232; } /* ── Pullquote gold border ── */ [data-theme="light"] .pullquote { border-left-color: #a08232; } /* ── Code blocks ── */ [data-theme="light"] code, [data-theme="light"] .inline-code { background: #e8e4de; color: #3a3a42; } /* ── Mobile nav menu overlay ── */ @media (max-width: 1024px) { [data-theme="light"] .nav-menu { background-color: rgba(250,248,245,0.96); } [data-theme="light"] .site-nav-menu { background: rgba(250,248,245,0.96); } } /* ── Playground section ── */ [data-theme="light"] .playground-card { background-color: #f0ece5; border-color: #e0dcd4; } [data-theme="light"] .playground-card:hover { background-color: #e8e4de; } [data-theme="light"] .playground-card::before { background: radial-gradient(circle at center, rgba(0,0,0,0.03), transparent 70%); } [data-theme="light"] .playground-tag { border-color: #d5d0c8; } /* ── Strategy section (on index page — hardcoded colors) ── */ [data-theme="light"] .strategy-tile { background: #f0ece5; } [data-theme="light"] .strategy-tile:hover { background: #e8e4de; box-shadow: 0 20px 56px rgba(0,0,0,0.08), 0 0 0 1px rgba(160,130,50,0.08); } [data-theme="light"] .tile-title { color: #1a1a1f; } [data-theme="light"] .tile-title em { color: #a08232; } [data-theme="light"] .tile-eyebrow, [data-theme="light"] .tile-cta { color: #a08232; } [data-theme="light"] .tile-arrow { background: #a08232; } [data-theme="light"] .tile-arrow::after { border-color: #a08232; } [data-theme="light"] .node-lbl { fill: #1a1a1f; } [data-theme="light"] .edge-lbl { fill: #8b7028; } [data-theme="light"] .core-lbl { fill: #a08232; } [data-theme="light"] .core-sub { fill: #7a7a82; } [data-theme="light"] .tri-edge, [data-theme="light"] .tri-edge-ghost { stroke: #a08232; } [data-theme="light"] .pulse-r { stroke: #a08232; } [data-theme="light"] .fp { fill: #a08232; } /* ── Strategy full section (hardcoded colors) ── */ [data-theme="light"] .strategy-panel { background: #f0ece5; border-color: rgba(160,130,50,0.1); } [data-theme="light"] .strategy-panel:hover { background: #e8e4de; border-color: rgba(160,130,50,0.22); } [data-theme="light"] .strategy-panel::before { background: linear-gradient(90deg, transparent, #a08232, transparent); } [data-theme="light"] .strategy-eyebrow { color: #a08232; } [data-theme="light"] .strategy-title { color: #1a1a1f; } [data-theme="light"] .strategy-title em { color: #a08232; } [data-theme="light"] .strategy-intro { color: #6a6a72; } [data-theme="light"] .strategy-brief p { color: #3a3a42; } [data-theme="light"] .strategy-accent-line { color: #8b7028; } [data-theme="light"] .strategy-brief-divider { color: #a08232; } [data-theme="light"] .strategy-brief-divider::before, [data-theme="light"] .strategy-brief-divider::after { background: #a08232; } [data-theme="light"] .strategy-panel-marker { color: #a08232; border-color: rgba(160,130,50,0.22); } [data-theme="light"] .strategy-panel h3 { color: #1a1a1f; } [data-theme="light"] .strategy-panel p { color: #5a5a62; } [data-theme="light"] .strategy-tag { color: #a08232; border-color: rgba(160,130,50,0.18); } [data-theme="light"] .strategy-centrepiece { border-color: rgba(160,130,50,0.12); } [data-theme="light"] .strategy-centrepiece::before { background: #faf8f5; color: #a08232; } [data-theme="light"] .strategy-centrepiece blockquote { color: #1a1a1f; } [data-theme="light"] .strategy-centrepiece cite { color: #8a8a92; } /* SVG elements in strategy framework */ [data-theme="light"] .triangle-edge { stroke: #a08232; } [data-theme="light"] .triangle-edge-ghost { stroke: #a08232; } [data-theme="light"] .edge-label { fill: #8b7028; } [data-theme="light"] .node-label { fill: #1a1a1f; } [data-theme="light"] .core-label { fill: #a08232; } [data-theme="light"] .core-sublabel { fill: #7a7a82; } [data-theme="light"] .pulse-ring { stroke: #a08232; } [data-theme="light"] .flow-particle { fill: #a08232; } /* ── Connect / Contact form ── */ [data-theme="light"] .form-group input, [data-theme="light"] .form-group textarea { color: #1a1a1f; border-bottom-color: #d5d0c8; } [data-theme="light"] .form-group input:focus, [data-theme="light"] .form-group textarea:focus { border-color: #1a1a1f; box-shadow: 0 1px 0 0 #1a1a1f; } [data-theme="light"] .submit-btn { background-color: #1a1a1f; color: #faf8f5; } [data-theme="light"] .submit-btn:hover { background-color: #2a2a2e; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } [data-theme="light"] .social-link { border-color: #d5d0c8; } [data-theme="light"] .social-link:hover { background-color: #1a1a1f; border-color: #1a1a1f; color: #faf8f5; box-shadow: 0 4px 16px rgba(0,0,0,0.1); } /* ── Footer ── */ [data-theme="light"] .footer { border-top-color: rgba(0,0,0,0.06); } /* ── Focus outlines ── */ [data-theme="light"] a:focus-visible, [data-theme="light"] button:focus-visible, [data-theme="light"] input:focus-visible, [data-theme="light"] textarea:focus-visible { outline-color: #a08232; } /* ── Domino event card colored bars ── */ [data-theme="light"] .event-card { background: #f0ece5; } /* ── Research page specific hardcoded elements ── */ [data-theme="light"] .research-header h1, [data-theme="light"] .research-header .gradient-text { color: #1a1a1f; -webkit-text-fill-color: #1a1a1f; background: none; } [data-theme="light"] .stat-number { color: #a08232; } [data-theme="light"] .legend-dot { opacity: 0.9; } [data-theme="light"] .event-card { background: #f0ece5; } [data-theme="light"] .tab-btn.active { color: #1a1a1f; border-bottom-color: #a08232; } /* ── Journal article page specifics ── */ [data-theme="light"] .hero { background: #faf8f5; } [data-theme="light"] .hero h1 { color: #1a1a1f; } [data-theme="light"] .hero-subtitle { color: #5a5a62; } [data-theme="light"] .hero-author { color: #7a7a82; } [data-theme="light"] .hero-line { background: #d5d0c8; } [data-theme="light"] .hero-roman { color: #a08232; } /* ── Scroll hint ── */ [data-theme="light"] .hero-scroll-hint span { color: #8a8a92; } [data-theme="light"] .scroll-arrow { border-color: #8a8a92; } /* ── Section dividers ── */ [data-theme="light"] .section-divider, [data-theme="light"] .divider { border-color: #e0dcd4; background: #e0dcd4; } /* ── code-as-creative-expression.css (The Discipline of Care) ── */ [data-theme="light"] { --accent-gold: #9a7e30; --accent-gold-dim: rgba(154,126,48,0.15); --accent-gold-glow: rgba(154,126,48,0.06); --rule-color: rgba(154,126,48,0.2); } [data-theme="light"] .drop-cap::first-letter { color: #9a7e30; } [data-theme="light"] .pull-quote { border-left-color: #9a7e30; } [data-theme="light"] .section-heading::after { background: #9a7e30; } [data-theme="light"] .sign-off-brand { color: #9a7e30; } [data-theme="light"] .back-to-top:hover { color: #9a7e30; } [data-theme="light"] .article-footer { border-top-color: rgba(154,126,48,0.1); } [data-theme="light"] .article-footer-brand { color: #9a7e30; } /* ── Gallery toggle button in light mode ── */ [data-theme="light"] .gallery-toggle { border-color: rgba(0,0,0,0.15); color: #7a7a82; } [data-theme="light"] .gallery-toggle:hover { border-color: rgba(0,0,0,0.35); color: #1a1a1f; } /* ── Code rain tile (homepage) — keep dark in light mode for contrast ── */ [data-theme="light"] .code-rain-tile { background: #010204; } /* ── Mobile nav menu light mode ── */ @media (max-width: 1024px) { [data-theme="light"] .nav-menu { background-color: rgba(250,248,245,0.97); } [data-theme="light"] .site-nav-menu { background: rgba(250,248,245,0.97); } }