/* Theme Name: Treziro Theme Theme URI: https://example.com/ Author: ChatGPT Description: A modern, responsive WordPress theme featuring a glassy header with dark/light mode and a mobile off‑canvas navigation. Designed for the Treziro brand. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: treziro */ /* Root variables define the colour palette for light and dark modes. The theme toggler switches between these two palettes by setting data‑theme="light" or data‑theme="dark" on the element. You can adjust these variables to fine‑tune your brand colours and glows. */ :root[data-theme="light"] { /* base colours */ --bg: #f5f9fc; --surface: rgba(255, 255, 255, 0.15); --surface-blur: rgba(255, 255, 255, 0.2); --text: #0a2540; --muted: #425466; --brand: #ffffff; /* glows for cards and buttons */ --glow-1: rgba(56, 189, 248, 0.30); --glow-2: rgba(244, 114, 182, 0.28); /* orb colours for light background */ --orb-1: rgba(56, 189, 248, 0.30); --orb-2: rgba(244, 114, 182, 0.28); --orb-3: rgba(251, 191, 36, 0.18); } :root[data-theme="dark"] { --bg: #010412; --surface: rgba(255, 255, 255, 0.05); --surface-blur: rgba(255, 255, 255, 0.1); --text: #f1f5f9; --muted: #94a3b8; --brand: #ffffff; --glow-1: rgba(236, 72, 153, 0.55); --glow-2: rgba(59, 130, 246, 0.45); } /* Base styles */ html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background: var(--bg); color: var(--text); transition: background 0.3s ease, color 0.3s ease; } /* Light mode orb background pattern */ :root[data-theme="light"] body { background-image: radial-gradient(520px 420px at -6% 55%, var(--orb-1), transparent 60%), radial-gradient(520px 420px at 106% 20%, var(--orb-2), transparent 60%), radial-gradient(260px 220px at 50% -10%, var(--orb-3), transparent 60%); background-attachment: fixed, fixed, fixed; } /* Sticky glassy header */ .site-header { position: sticky; top: 0; z-index: 999; backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); background: var(--surface-blur); border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 0.5rem 1rem; } .site-header .inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 1rem; } .brand { display: flex; align-items: center; flex: 0 0 auto; } .brand .custom-logo { height: 90px; width: auto; object-fit: contain; margin-right: 12px; filter: drop-shadow(0 10px 24px var(--glow-2)) drop-shadow(0 6px 16px var(--glow-1)); } .brand .site-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text); line-height: 1; } /* Primary navigation */ .main-nav { flex: 1 1 auto; display: flex; justify-content: center; } .main-nav .menu { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .main-nav .menu-item a { display: block; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 600; text-decoration: none; color: var(--muted); transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .main-nav .menu-item a:hover { color: var(--text); } .main-nav .menu-item.current-menu-item a, .main-nav .menu-item.current_page_item a { color: var(--text); background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: 0 2px 6px var(--glow-1), 0 6px 16px var(--glow-2); } /* Header tool buttons (theme, socials) */ .header-tools { display: flex; align-items: center; flex: 0 0 auto; gap: 0.5rem; } .header-tools button, .header-tools a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text); transition: background 0.2s ease; font-size: 0; /* hide text content if using letters for icons */ } .header-tools button:hover, .header-tools a:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); } /* Hamburger menu toggle (shown on narrow screens) */ .menu-toggle { display: none; width: 36px; height: 36px; border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: color-mix(in srgb, var(--surface) 60%, transparent); cursor: pointer; align-items: center; justify-content: center; } .menu-toggle svg { width: 66px; height: 36px; stroke: var(--text); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Off‑canvas mobile navigation */ .mobile-nav { display: none; position: fixed; inset: 0; z-index: 998; padding: 4rem 1rem; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow-y: auto; } .mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; } .mobile-nav li a { font-size: 1.5rem; font-weight: 700; text-decoration: none; color: var(--text); transition: color 0.2s ease; } .mobile-nav li a:hover { color: var(--muted); } /* Theme toggle label (shown on larger screens only) */ .theme-toggle-label { margin-left: 0.4rem; font-weight: 600; color: var(--muted); } /* Responsive layout adjustments */ @media (max-width: 900px) { /* Hide the horizontal nav and show the hamburger */ .main-nav { display: none; } .menu-toggle { display: inline-flex; } /* When body has class .mobile-nav-open, show the mobile nav */ body.mobile-nav-open .mobile-nav { display: block; } } @media (max-width: 640px) { .brand .custom-logo { height: 72px; } .mobile-nav li a { font-size: 1.25rem; } } /* --- Treziro: single-source sun/moon icon --- */ /* 0) Never show any old inline SVGs if they exist */ .theme-toggle svg, .theme-toggle .sun-icon, .theme-toggle .moon-icon { display:none !important; } /* 1) Button shell styling (glassy pill) */ #theme-toggle.theme-toggle{ width:36px; height:36px; padding:0; line-height:0; font-size:0; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; border:1px solid color-mix(in srgb, var(--text) 10%, transparent); background: color-mix(in srgb, var(--surface) 60%, transparent); /* IMPORTANT: no background-image on the button itself */ background-image:none !important; } /* 2) Draw exactly one icon via a pseudo-element */ .theme-toggle::after{ content:""; width:20px; height:20px; display:block; background-repeat:no-repeat; background-position:center; background-size:20px 20px; } /* 3) Light mode → show MOON (prompt to go dark) */ :root[data-theme="light"] .theme-toggle::after{ background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjMkY4OEZGIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNIDIxIDEyLjc5IEE5IDkgMCAxIDEgMTEuMjEgMyA3IDcgMCAwIDAgMjEgMTIuNzkgeiIvPjwvc3ZnPg=='); } /* 4) Dark mode → show SUN (prompt to go light) */ :root[data-theme="dark"] .theme-toggle::after{ background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjRjNDMTJGIiBzdHJva2U9IiNGM0MxMkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI1Ii8+PGxpbmUgeDE9IjEyIiB5MT0iMSIgeDI9IjEyIiB5Mj0iMyIvPjxsaW5lIHgxPSIxMiIgeTE9IjIxIiB4Mj0iMTIiIHkyPSIyMyIvPjxsaW5lIHgxPSI0LjIyIiB5MT0iNC4yMiIgeDI9IjUuNjQiIHkyPSI1LjY0Ii8+PGxpbmUgeDE9IjE4LjM2IiB5MT0iMTguMzYiIHgyPSIxOS43OCIgeTI9IjE5Ljc4Ii8+PGxpbmUgeDE9IjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiIvPjxsaW5lIHgxPSIyMSIgeTE9IjEyIiB4Mj0iMjMiIHkyPSIxMiIvPjxsaW5lIHgxPSI0LjIyIiB5MT0iMTkuNzgiIHgyPSI1LjY0IiB5Mj0iMTguMzYiLz48bGluZSB4MT0iMTguMzYiIHkxPSI1LjY0IiB4Mj0iMTkuNzgiIHkyPSI0LjIyIi8+PC9zdmc+'); }