/* ============================================================ NIGHT THEME — shared skin for blog.html & cookbook.html Matches the index.html night landing (palette, nav, footer). Load AFTER style-creative.css and the page's own stylesheet, with . ============================================================ */ html[data-theme="night"] { --color-bg: #0b1322; --color-bg-card: rgba(27, 41, 64, .35); --color-border: rgba(143, 184, 255, .16); --color-border-hover: rgba(143, 184, 255, .5); --color-text: #e6ecf7; --color-text-muted: #8fa0bd; --color-accent: #ffd97a; --color-secondary: #8fb8ff; } html[data-theme="night"] body { background: linear-gradient(180deg, #0b1322 0%, #121d31 60%, #0b1322 100%); color: var(--color-text); font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* faint static starfield behind everything */ html[data-theme="night"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 22px 34px, rgba(223, 232, 244, .8) 50%, transparent 51%), radial-gradient(1px 1px at 187px 122px, rgba(223, 232, 244, .55) 50%, transparent 51%), radial-gradient(1px 1px at 311px 61px, rgba(223, 232, 244, .4) 50%, transparent 51%), radial-gradient(2px 2px at 254px 219px, rgba(223, 232, 244, .5) 50%, transparent 51%), radial-gradient(1px 1px at 96px 181px, rgba(223, 232, 244, .6) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 345px 158px, rgba(255, 217, 122, .45) 50%, transparent 51%); background-size: 380px 260px; opacity: .5; } /* ---------- night nav (same chrome as index.html) ---------- */ .night-hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: linear-gradient(180deg, rgba(13, 23, 48, .92), rgba(17, 29, 56, .88)); backdrop-filter: blur(6px); box-shadow: 0 1px 0 rgba(0, 0, 0, .5); } .night-hdr nav { display: flex; justify-content: center; align-items: center; height: 68px; max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; } .night-hdr ul { display: flex; gap: 46px; list-style: none; margin: 0; padding: 0; } .night-hdr ul a { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: #a9b6cf; text-decoration: none; transition: color .2s; white-space: nowrap; } .night-hdr ul li { margin: 0; } .night-hdr ul a:hover { color: var(--color-accent); } .night-hdr ul a.active { color: var(--color-accent); } .night-hdr .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .night-hdr .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform .25s, opacity .25s; } .night-hdr .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .night-hdr .nav-toggle.open span:nth-child(2) { opacity: 0; } .night-hdr .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 840px) { .night-hdr .nav-toggle { display: flex; } .night-hdr ul { display: none; position: absolute; top: 68px; right: 16px; flex-direction: column; gap: 0; background: rgba(13, 23, 48, .97); border: 1px solid var(--color-border); border-radius: 14px; padding: 10px; min-width: 220px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); } .night-hdr ul.open { display: flex; } .night-hdr ul a { display: block; padding: 13px 18px; font-size: 11.5px; border-radius: 9px; } .night-hdr ul a:hover { background: rgba(143, 184, 255, .1); } } /* ---------- content polish on both pages ---------- */ html[data-theme="night"] .blog-layout, html[data-theme="night"] .cookbook-layout { position: relative; z-index: 1; } html[data-theme="night"] .blog-post, html[data-theme="night"] .recipe-card, html[data-theme="night"] .blog-sidebar, html[data-theme="night"] .cookbook-sidebar { border-radius: 13px; } html[data-theme="night"] .post-content a, html[data-theme="night"] .recipe-body a { color: var(--color-secondary); } html[data-theme="night"] .post-content a:hover, html[data-theme="night"] .recipe-body a:hover { color: var(--color-accent); } html[data-theme="night"] .post-title, html[data-theme="night"] .recipe-title, html[data-theme="night"] .cookbook-title { color: var(--color-text); } html[data-theme="night"] .post-date { color: var(--color-accent); } html[data-theme="night"] .tag { border: 1px solid var(--color-border); color: var(--color-secondary); background: rgba(27, 41, 64, .3); } /* ---------- footer ---------- */ html[data-theme="night"] .footer { background: #0b1322; color: var(--color-text-muted); border-top: 1px solid var(--color-border); position: relative; z-index: 1; } html[data-theme="night"] .footer a { color: inherit; } html[data-theme="night"] .secret-door { display: inline-flex; align-items: center; gap: 10px; opacity: .35; transition: opacity .3s; text-decoration: none; } html[data-theme="night"] .secret-door:hover { opacity: 1; } html[data-theme="night"] .secret-hint { font-size: 11px; letter-spacing: .1em; color: var(--color-text-muted); opacity: 0; transition: opacity .3s; } html[data-theme="night"] .secret-door:hover .secret-hint { opacity: 1; }