/* ========================================================================== Cozy Focus Station — Global Styles Lego / pixel-art inspired productivity UI ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=VT323&display=swap"); /* -------------------------------------------------------------------------- CSS Custom Properties — Dark Mode (default) -------------------------------------------------------------------------- */ :root { /* Typography */ --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "VT323", "Courier New", "Lucida Console", monospace; /* Surfaces */ --color-bg: #1a1a1e; --color-bg-elevated: #242428; --color-bg-panel: #2e2e34; --color-bg-input: #1e1e22; --color-bg-ad: #2a2a2a; /* Text */ --color-text: #e8e8ec; --color-text-muted: #9a9aa8; --color-text-heading: #f4f4f8; /* Accents — muted neon */ --color-accent: #5eead4; --color-accent-secondary: #a78bfa; --color-accent-warm: #fbbf24; --color-accent-danger: #f87171; --color-accent-success: #4ade80; /* Borders & shadows */ --color-border: #000000; --color-border-muted: #3a3a44; --shadow-block: 4px 4px 0px #000000; --shadow-block-sm: 3px 3px 0px #000000; --shadow-block-hover: 5px 5px 0px #000000; --shadow-block-active: 1px 1px 0px #000000; /* Slider */ --slider-track: #3a3a44; --slider-thumb: var(--color-accent); --slider-thumb-border: #000000; /* Notepad grid */ --notepad-line-major: rgba(94, 234, 212, 0.18); --notepad-line-minor: rgba(94, 234, 212, 0.08); --notepad-bg: #1c1c20; /* Layout */ --sidebar-left-width: minmax(260px, 300px); --sidebar-right-width: 340px; --main-max-width: 720px; --content-gap: 1.25rem; --panel-padding: 1.25rem; --border-width: 3px; --radius: 0; /* Transitions */ --transition-fast: 80ms ease; --transition-normal: 150ms ease; /* Dynamic Occupation Theme defaults */ --bg-app: var(--color-bg); --surface: var(--color-bg-panel); --accent: var(--color-accent); --text-main: var(--color-text); --border-color: var(--color-border-muted); } /* -------------------------------------------------------------------------- Light Mode — toggled via .light-mode on -------------------------------------------------------------------------- */ body.light-mode { --color-bg: #f5f3ee; --color-bg-elevated: #ffffff; --color-bg-panel: #faf8f4; --color-bg-input: #ffffff; --color-bg-ad: #e8e6e1; --color-text: #1a1a1e; --color-text-muted: #5c5c68; --color-text-heading: #0f0f12; --color-accent: #0d9488; --color-accent-secondary: #7c3aed; --color-accent-warm: #d97706; --color-accent-danger: #dc2626; --color-accent-success: #16a34a; --color-border: #1a1a1e; --color-border-muted: #c8c4bc; --shadow-block: 4px 4px 0px #b8b4ac; --shadow-block-sm: 3px 3px 0px #b8b4ac; --shadow-block-hover: 5px 5px 0px #a8a49c; --shadow-block-active: 1px 1px 0px #b8b4ac; --slider-track: #d4d0c8; --slider-thumb: var(--color-accent); --slider-thumb-border: #1a1a1e; --notepad-line-major: rgba(13, 148, 136, 0.22); --notepad-line-minor: rgba(13, 148, 136, 0.1); --notepad-bg: #fffef9; } /* -------------------------------------------------------------------------- Reset & Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 24px 24px; } body.light-mode { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px); } img, canvas { display: block; max-width: 100%; } a { color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { color: var(--color-accent-secondary); } button, input, select, textarea { font-family: inherit; font-size: inherit; } fieldset { border: none; margin: 0; padding: 0; min-width: 0; } legend { padding: 0; } /* -------------------------------------------------------------------------- Accessibility Utilities -------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- Top Bar / Header -------------------------------------------------------------------------- */ .top-bar { position: sticky; top: 0; z-index: 100; background-color: var(--color-bg-elevated); border-bottom: var(--border-width) solid var(--color-border); box-shadow: 0 4px 0 var(--color-border); } .top-bar__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1400px; margin: 0 auto; padding: 0.875rem 1.25rem; } .top-bar__title { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; } .top-bar__title-link { color: var(--color-text-heading); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; } .top-bar__title-link:hover { color: var(--color-accent); } .top-bar__theme-toggle { flex-shrink: 0; cursor: pointer; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); background-color: var(--color-bg-panel); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-block-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-normal); } .top-bar__theme-toggle:hover { background-color: var(--color-accent-secondary); color: #000000; transform: translate(-1px, -1px); box-shadow: var(--shadow-block-hover); } .top-bar__theme-toggle:active { transform: translate(2px, 2px); box-shadow: var(--shadow-block-active); } /* -------------------------------------------------------------------------- App Layout — 3-Column Grid -------------------------------------------------------------------------- */ .app-layout { display: grid; grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width); grid-template-areas: "sidebar-left main-content sidebar-right"; gap: var(--content-gap); align-items: start; max-width: 1400px; margin: 0 auto; padding: var(--content-gap); } .sidebar-left { grid-area: sidebar-left; } .main-content { grid-area: main-content; display: flex; flex-direction: column; gap: var(--content-gap); min-width: 0; } .sidebar-right { grid-area: sidebar-right; display: flex; flex-direction: column; gap: var(--content-gap); align-items: center; } /* -------------------------------------------------------------------------- Shared Panel Styles -------------------------------------------------------------------------- */ .sound-mixer, .pomodoro, .visualizer, .asmr-notepad, .your-vibe { background-color: var(--color-bg-panel); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-block); padding: var(--panel-padding); } .sound-mixer__heading, .pomodoro__heading, .visualizer__heading, .asmr-notepad__heading, .your-vibe__heading, .site-footer__heading, .site-footer__nav-heading { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-heading); line-height: 1.3; } .site-footer__nav-heading { font-size: 0.875rem; margin-bottom: 1rem; } .sound-mixer__description, .pomodoro__description, .visualizer__description, .asmr-notepad__description, .your-vibe__description { margin: 0 0 1rem; font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.5; } .sound-mixer__recommendation { margin-bottom: 1.25rem; padding: 0.875rem; background-color: var(--color-bg-elevated); border: 2px solid var(--color-border-muted); } .sound-mixer__recommendation-heading { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-heading); } .sound-mixer__select { display: block; width: 100%; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; color: var(--color-text); background-color: var(--color-bg-input); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-block-sm); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235eead4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; } body.light-mode .sound-mixer__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230d9488' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); } .sound-mixer__recommendation-text { margin: 0 0 0.75rem; font-size: 0.8125rem; line-height: 1.55; color: var(--color-text-muted); } .sound-mixer__recommendation-btn { cursor: pointer; width: 100%; padding: 0.5625rem 1rem; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: #000000; background-color: var(--color-accent-warm); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-block-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .sound-mixer__recommendation-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-block-hover); } .sound-mixer__recommendation-btn:active { transform: translate(3px, 3px); box-shadow: var(--shadow-block-active); } /* -------------------------------------------------------------------------- Binaural Engine (New) -------------------------------------------------------------------------- */ .binaural-engine { display: flex; flex-direction: column; gap: 1rem; } .binaural-engine__inputs { display: flex; gap: 0.75rem; } .binaural-engine__input-group { flex: 1; display: flex; flex-direction: column; gap: 0.375rem; } .binaural-engine__number { width: 100%; padding: 0.375rem 0.5rem; font-family: var(--font-mono); font-size: 1.125rem; font-weight: bold; text-align: center; color: var(--accent); background-color: var(--color-bg-input); border: 2px solid var(--color-border); box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2); } body.light-mode .binaural-engine__number { box-shadow: inset 2px 2px 0 rgba(0,0,0,0.05); } .binaural-engine__number:focus { outline: none; border-color: var(--accent); } .binaural-engine__presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } .btn-wave-preset { cursor: pointer; padding: 0.375rem 0.25rem; font-weight: 700; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text); background-color: var(--color-bg-input); border: 2px solid var(--color-border); box-shadow: var(--shadow-block-sm); transition: all var(--transition-fast); } .btn-wave-preset:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-block-hover); } .btn-wave-preset.active { background-color: var(--accent); color: #000000; border-color: var(--color-border); } /* -------------------------------------------------------------------------- Core Audio Controls -------------------------------------------------------------------------- */ .sound-mixer__controls { display: flex; flex-direction: column; gap: 1.25rem; } .sound-mixer__group { display: flex; flex-direction: column; gap: 0.875rem; padding: 0.875rem; background-color: var(--color-bg-elevated); border: 2px solid var(--color-border-muted); } .sound-mixer__legend { margin-bottom: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background-color: var(--color-bg-input); border: 2px solid var(--color-border); } .sound-mixer__control { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.375rem 0.75rem; align-items: center; } .sound-mixer__label { grid-column: 1 / -1; font-size: 0.8125rem; font-weight: 500; color: var(--color-text); } .sound-mixer__slider { grid-column: 1; width: 100%; height: 8px; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background: transparent; } .sound-mixer__output { grid-column: 2; grid-row: 2; min-width: 2.25rem; padding: 0.125rem 0.375rem; font-family: var(--font-mono); font-size: 1.125rem; font-weight: 400; text-align: center; color: var(--accent); background-color: var(--color-bg-input); border: 2px solid var(--color-border); } /* Range slider — WebKit */ .sound-mixer__slider::-webkit-slider-runnable-track { height: 8px; background-color: var(--slider-track); border: 2px solid var(--color-border); border-radius: 0; } .sound-mixer__slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 22px; margin-top: -9px; background-color: var(--slider-thumb); border: 2px solid var(--slider-thumb-border); border-radius: 0; box-shadow: 2px 2px 0 var(--color-border); transition: background-color var(--transition-normal); } .sound-mixer__slider::-webkit-slider-thumb:hover { background-color: var(--color-accent-secondary); } .sound-mixer__slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-accent-warm); outline-offset: 2px; } /* Range slider — Firefox */ .sound-mixer__slider::-moz-range-track { height: 8px; background-color: var(--slider-track); border: 2px solid var(--color-border); border-radius: 0; } .sound-mixer__slider::-moz-range-thumb { width: 18px; height: 22px; background-color: var(--slider-thumb); border: 2px solid var(--slider-thumb-border); border-radius: 0; box-shadow: 2px 2px 0 var(--color-border); cursor: pointer; transition: background-color var(--transition-normal); } .sound-mixer__slider::-moz-range-thumb:hover { background-color: var(--color-accent-secondary); } /* -------------------------------------------------------------------------- Pomodoro Timer -------------------------------------------------------------------------- */ .pomodoro__mode-toggle { display: inline-flex; margin-bottom: 1rem; border: var(--border-width) solid var(--color-border); box-shadow: var(--shadow-block-sm); overflow: hidden; } .pomodoro__mode-btn { cursor: pointer; padding: 0.5rem 1rem; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text); background-color: var(--color-bg-elevated); border: none; border-right: 2px solid var(--color-border); transition: background-color var(--transition-normal), color var(--transition-normal); } .pomodoro__mode-btn:last-child { border-right: none; } .pomodoro__mode-btn[aria-pressed="true"] { background-color: var(--accent); color: #000000; } .pomodoro__mode-btn:hover { background-color: var(--color-accent-secondary); color: #000000; } .pomodoro__display { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 1rem 0; padding: 1.5rem 1rem; background-color: var(--color-bg-input); border: var(--border-width) solid var(--color-border); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.25); } body.light-mode .pomodoro__display { box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.08); } .pomodoro__clock { font-family: var(--font-mono); font-size: clamp(3.5rem, 12vw, 5.5rem); font-weight: 400; line-height: 1; letter-spacing: 0.08em; color: var(--accent); text-shadow: 2px 2px 0 var(--color-border), 0 0 24px rgba(94, 234, 212, 0.25); } body.light-mode .pomodoro__clock { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15), 0 0 0 transparent; } .pomodoro__mode-label { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .pomodoro__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } /* -------------------------------------------------------------------------- Shared Blocky Button (Lego brick) -------------------------------------------------------------------------- */ .pomodoro__button, .asmr-notepad__button { cursor: pointer; padding: 0.625rem 1.25rem; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-heading); background-color: var(--color-bg-elevated); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-block); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-normal), color var(--transition-normal); } .pomodoro__button:hover, .asmr-notepad__button:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-block-hover); } .pomodoro__button:active, .asmr-notepad__button:active { transform: translate(3px, 3px); box-shadow: var(--shadow-block-active); } .pomodoro__button--start { background-color: var(--color-accent-success); color: #000000; } .pomodoro__button--start:hover { background-color: #86efac; } .pomodoro__button--reset { background-color: var(--color-accent-danger); color: #000000; } .pomodoro__button--reset:hover { background-color: #fca5a5; } .asmr-notepad__button { background-color: var(--color-accent-secondary); color: #000000; } .asmr-notepad__button:hover { background-color: #c4b5fd; } /* -------------------------------------------------------------------------- Focus Builder Visualizer -------------------------------------------------------------------------- */ .visualizer__brick-count { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--color-text-muted); } .visualizer__brick-count strong { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 400; color: var(--accent); } .visualizer__canvas-wrapper { display: flex; justify-content: center; padding: 0.75rem; background-color: var(--color-bg-input); border: 2px solid var(--color-border-muted); } .visualizer__canvas { width: 100%; max-width: 400px; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; border: 2px solid var(--color-border); background-color: #121216; } body.light-mode .visualizer__canvas { background-color: #e8e6e1; } /* -------------------------------------------------------------------------- ASMR Notepad -------------------------------------------------------------------------- */ .asmr-notepad__toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; } .asmr-notepad__keyboard-select { display: flex; flex-direction: column; gap: 0.375rem; flex: 1 1 180px; } .asmr-notepad__select { cursor: pointer; padding: 0.5rem 0.75rem; color: var(--color-text); background-color: var(--color-bg-input); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-block-sm); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235eead4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; } body.light-mode .asmr-notepad__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230d9488' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); } .asmr-notepad__select:hover { border-color: var(--accent); } .asmr-notepad__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 2 1 280px; } .notepad-style-picker { display: flex; gap: 0.5rem; } .btn-paper-style { cursor: pointer; padding: 0.5rem 0.875rem; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); background-color: var(--color-bg-elevated); border: 2px solid var(--color-border); box-shadow: var(--shadow-block-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-normal), color var(--transition-normal); } .btn-paper-style:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-block-hover); } .btn-paper-style.active { background-color: var(--accent); color: #000000; } .asmr-notepad__textarea { display: block; width: 100%; min-height: 320px; padding: 1rem 1.25rem; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.75rem; color: var(--color-text); resize: vertical; border: var(--border-width) solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-block-sm); background-color: var(--notepad-bg); background-image: linear-gradient(var(--notepad-line-minor) 1px, transparent 1px), linear-gradient(90deg, var(--notepad-line-minor) 1px, transparent 1px), linear-gradient(var(--notepad-line-major) 1px, transparent 1px), linear-gradient(90deg, var(--notepad-line-major) 1px, transparent 1px); background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px; background-position: 0 0, 0 0, 0 0, 0 0; transition: border-color var(--transition-normal); } .asmr-notepad__textarea::placeholder { color: var(--color-text-muted); opacity: 0.7; } .asmr-notepad__textarea:hover { border-color: var(--color-border-muted); } .asmr-notepad__textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-block-sm), 0 0 0 2px rgba(94, 234, 212, 0.2); } body.light-mode .asmr-notepad__textarea:focus { box-shadow: var(--shadow-block-sm), 0 0 0 2px rgba(13, 148, 136, 0.2); } .asmr-notepad__textarea.paper-style-plain { background-color: var(--notepad-bg); } .asmr-notepad__textarea.paper-style-ruled { background-color: var(--notepad-bg); background-image: linear-gradient(var(--notepad-line-major) 1px, transparent 1px); background-size: 100% 28px; line-height: 28px; } .asmr-notepad__textarea.paper-style-grid { background-color: var(--notepad-bg); background-image: linear-gradient(90deg, var(--notepad-line-minor) 1px, transparent 1px), linear-gradient(var(--notepad-line-minor) 1px, transparent 1px); background-size: 24px 24px; } /* -------------------------------------------------------------------------- Right Sidebar — AdSense -------------------------------------------------------------------------- */ .sidebar-right { display: flex; flex-direction: column; gap: 1.5rem; } .adsense-sidebar, .adsense-sidebar-bottom { width: 100%; display: flex; flex-direction: column; align-items: center; position: static; } .adsense-sidebar__slot { flex-shrink: 0; width: 300px; min-width: 300px; max-width: 300px; height: 600px; min-height: 600px; max-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--color-bg-ad); text-align: center; border: var(--border-width) solid var(--color-border); box-shadow: var(--shadow-block); } .adsense-sidebar__placeholder { margin: 0; padding: 1rem; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } /* -------------------------------------------------------------------------- Your Vibe Panel -------------------------------------------------------------------------- */ .your-vibe { width: 100%; max-width: 340px; } .your-vibe__field-label { display: inline-block; margin-bottom: 1rem; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #000000; background-color: var(--accent); border: 2px solid var(--color-border); } .your-vibe__icon-wrapper { display: flex; align-items: center; justify-content: center; padding: 1.5rem; background-color: var(--color-bg-input); border: 2px solid var(--color-border-muted); } .your-vibe__icon { width: 96px; height: 96px; color: var(--accent); } .your-vibe__icon * { stroke: var(--accent); transition: stroke var(--transition-normal); } .your-vibe__caption { margin: 1rem 0 0; font-size: 0.8125rem; text-align: center; color: var(--color-text-muted); line-height: 1.5; } /* -------------------------------------------------------------------------- Bottom Horizontal Ad Banner -------------------------------------------------------------------------- */ .adsense-banner { padding: 0 var(--content-gap) var(--content-gap); position: static; } .adsense-banner__container { display: flex; justify-content: center; max-width: 1400px; margin: 0 auto; } .adsense-banner__slot { flex-shrink: 0; width: 100%; max-width: 728px; height: 90px; min-height: 90px; max-height: 90px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto; background-color: var(--color-bg-ad); text-align: center; border: var(--border-width) solid var(--color-border); box-shadow: var(--shadow-block); } .adsense-banner__placeholder { margin: 0; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } /* -------------------------------------------------------------------------- Site Footer -------------------------------------------------------------------------- */ .site-footer { margin-top: 0.5rem; padding: 2rem var(--content-gap) 2.5rem; background-color: var(--color-bg-elevated); border-top: var(--border-width) solid var(--color-border); } .site-footer__content { max-width: 900px; margin: 0 auto; } .site-footer__science { margin-bottom: 2.5rem; } .site-footer__paragraph { margin: 0 0 1rem; font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.75; text-align: justify; hyphens: auto; } .site-footer__paragraph:last-of-type { margin-bottom: 0; } /* New CSS Grid setup for multi-page Footer Navigation */ .site-footer__navigation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; padding-top: 2rem; border-top: 2px solid var(--color-border-muted); } .site-footer__nav-column { display: flex; flex-direction: column; } .site-footer__legal-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .site-footer__legal-link { display: inline-block; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); text-decoration: none; padding: 0.375rem 0.75rem; border: 2px solid var(--color-border); background-color: var(--color-bg-panel); box-shadow: var(--shadow-block-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-normal); } .site-footer__legal-link:hover { color: var(--accent); transform: translate(-1px, -1px); box-shadow: var(--shadow-block-hover); } .site-footer__copyright { margin: 2.5rem 0 0; padding-top: 1.5rem; font-size: 0.8125rem; text-align: center; border-top: 1px solid var(--color-border-muted); color: var(--color-text-muted); } /* -------------------------------------------------------------------------- Dynamic Occupation Theme Engines -------------------------------------------------------------------------- */ html[data-occupation="engineering"] { --accent: #00ffcc; } html[data-occupation="finance"] { --accent: #3b82f6; } html[data-occupation="laws"] { --accent: #ef4444; } html[data-occupation="creative"] { --accent: #a855f7; } html[data-occupation="relaxation"] { --accent: #eab308; } body.light-mode html[data-occupation="engineering"], body.light-mode[data-occupation="engineering"] { --accent: #0f9d83; } body.light-mode html[data-occupation="finance"], body.light-mode[data-occupation="finance"] { --accent: #1d4ed8; } body.light-mode html[data-occupation="laws"], body.light-mode[data-occupation="laws"] { --accent: #b91c1c; } body.light-mode html[data-occupation="creative"], body.light-mode[data-occupation="creative"] { --accent: #7e22ce; } body.light-mode html[data-occupation="relaxation"], body.light-mode[data-occupation="relaxation"] { --accent: #a16207; } html[data-occupation="engineering"] body.light-mode { --accent: #0f9d83; } html[data-occupation="finance"] body.light-mode { --accent: #1d4ed8; } html[data-occupation="laws"] body.light-mode { --accent: #b91c1c; } html[data-occupation="creative"] body.light-mode { --accent: #7e22ce; } html[data-occupation="relaxation"] body.light-mode { --accent: #a16207; } .sound-mixer, .pomodoro, .visualizer, .asmr-notepad, .your-vibe { transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow var(--transition-fast); } .sound-mixer__slider::-webkit-slider-thumb, .sound-mixer__slider::-moz-range-thumb { background-color: var(--accent); } body { transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease; } /* -------------------------------------------------------------------------- Responsive — Tablet -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .app-layout { grid-template-columns: 1fr; grid-template-areas: "sidebar-left" "main-content" "sidebar-right"; } .sidebar-left, .main-content, .sidebar-right { width: 100%; } .sidebar-right { align-items: center; } .your-vibe { max-width: 340px; } } /* -------------------------------------------------------------------------- Responsive — Mobile -------------------------------------------------------------------------- */ @media (max-width: 768px) { :root { --content-gap: 1rem; --panel-padding: 1rem; } .top-bar__nav { padding: 0.75rem 1rem; } .top-bar__title { font-size: 1rem; } .top-bar__theme-toggle { padding: 0.4375rem 0.75rem; font-size: 0.75rem; } .app-layout { padding: 1rem; } .pomodoro__actions, .asmr-notepad__actions { width: 100%; } .pomodoro__button, .asmr-notepad__button { flex: 1 1 auto; min-width: 120px; } .asmr-notepad__toolbar { flex-direction: column; align-items: stretch; } .asmr-notepad__actions { justify-content: stretch; } .site-footer__paragraph { text-align: left; hyphens: none; } .adsense-sidebar__slot { width: 300px; min-width: 300px; max-width: 300px; height: 600px; min-height: 600px; max-height: 600px; flex-shrink: 0; } .adsense-banner__container { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding-bottom: 0.25rem; } .adsense-banner__slot { width: 728px; min-width: 728px; max-width: 728px; height: 90px; min-height: 90px; max-height: 90px; flex-shrink: 0; margin: 0; } } @media (max-width: 400px) { .top-bar__nav { flex-wrap: wrap; } .top-bar__title { flex: 1 1 100%; text-align: center; } .top-bar__theme-toggle { width: 100%; } } /* -------------------------------------------------------------------------- Reduced Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }