/* ============================================================ NovaSounds — style.css Shared styles for ALL pages. Dark theme is default. Light theme activates via class="light-theme" on element. ============================================================ */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ DESIGN TOKENS — DARK (default) ============================================================ */ :root { --bg: #080810; --bg2: #0f0f1a; --surface: #0f0f1a; --card: #13131f; --border: #1c1c2e; --border2: #252538; --ink: #f0ede8; --ink2: #a8a4b8; --ink3: #5a5870; --gold: #d4a843; --gold-hover: #e0b84a; --gold-glow: rgba(212,168,67,0.15); --gold-subtle: rgba(212,168,67,0.08); --teal: #2eb8a4; --crimson: #c04a5e; --lavender: #7b68c8; --green: #4ecb71; --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 8px 32px rgba(0,0,0,0.5); --shadow-lg: 0 24px 60px rgba(0,0,0,0.6); --nav-bg: rgba(8,8,16,0.88); --theme-icon: '🌙'; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', sans-serif; --mono: 'JetBrains Mono', monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --transition: 0.25s ease; } /* ============================================================ DESIGN TOKENS — LIGHT ============================================================ */ html.light-theme { --bg: #faf8f5; --bg2: #f2efe9; --surface: #ffffff; --card: #ffffff; --border: #e4ddd4; --border2: #d0c8bc; --ink: #1a1510; --ink2: #5a5248; --ink3: #9a9088; --gold: #b8861c; --gold-hover: #9a7016; --gold-glow: rgba(184,134,28,0.12); --gold-subtle: rgba(184,134,28,0.07); --teal: #1d9e8c; --crimson: #a83248; --lavender: #5c4ab0; --green: #2d9e50; --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 8px 32px rgba(0,0,0,0.10); --shadow-lg: 0 24px 60px rgba(0,0,0,0.12); --nav-bg: rgba(250,248,245,0.92); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* smooth theme transition */ transition: background-color 0.4s ease, color 0.4s ease; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); overflow-x: hidden; line-height: 1.6; transition: background 0.4s ease, color 0.4s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; font-family: var(--sans); } /* ============================================================ NOISE TEXTURE OVERLAY ============================================================ */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; opacity: 0.3; transition: opacity 0.4s ease; } html.light-theme body::after { opacity: 0.1; } /* ============================================================ TYPOGRAPHY HELPERS ============================================================ */ .serif { font-family: var(--serif); } .mono { font-family: var(--mono); } .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 4px; color: var(--gold); text-transform: uppercase; display: flex; align-items: center; gap: 10px; } .eyebrow::after { content: ''; width: 32px; height: 1px; background: var(--gold); opacity: 0.5; flex-shrink: 0; } .section-title { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; line-height: 1.15; color: var(--ink); } .section-title em { font-style: italic; color: var(--gold); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; border: none; transition: all var(--transition); white-space: nowrap; } .btn-gold { background: var(--gold); color: #fff8ee; font-weight: 600; } .btn-gold:hover { background: var(--gold-hover); transform: translateY(-1px); box-shadow: 0 4px 20px var(--gold-glow); } .btn-ghost { background: transparent; color: var(--ink2); border: 1px solid var(--border2); } .btn-ghost:hover { border-color: var(--ink3); color: var(--ink); background: var(--card); } .btn-lg { padding: 14px 36px; font-size: 15px; border-radius: var(--radius-md); } /* ============================================================ NAVBAR (shared across all pages) ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); transition: background 0.4s ease, border-color 0.4s ease; } .nav-logo { display: flex; align-items: center; /* vertically centres icon + text together */ gap: 10px; text-decoration: none; line-height: 1; /* removes any inherited line-height pushing text up */ } .nav-logo img { height: 58px; /* bigger — clearly visible now */ width: auto; object-fit: contain; display: block; /* removes inline baseline gap that causes misalignment */ filter: drop-shadow(0 0 8px rgba(42,157,120,0.55)) drop-shadow(0 0 16px rgba(184,137,42,0.35)) brightness(1.2); transition: transform 0.3s ease, filter 0.3s ease; } .nav-logo:hover img { transform: scale(1.1) rotate(-4deg); filter: drop-shadow(0 0 12px rgba(42,157,120,0.8)) drop-shadow(0 0 22px rgba(184,137,42,0.5)) brightness(1.3); } html.light-theme .nav-logo img { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15)) brightness(0.97); } html.light-theme .nav-logo:hover img { filter: drop-shadow(0 2px 8px rgba(42,157,120,0.35)) brightness(1.02); } /* Text wrapper — force same vertical alignment as image */ .nav-logo-text { font-family: var(--serif); font-size: 1.65rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1; display: flex; /* keeps Nova + Sounds inline with no gap issues */ align-items: center; } .nav-logo-nova { font-family: var(--serif); font-weight: 700; font-style: italic; background: linear-gradient(135deg, #2fc99a 0%, #1e9e70 60%, #167a55 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-logo-sounds { font-family: var(--serif); font-weight: 700; background: linear-gradient(135deg, #d4a030 0%, #b8892a 60%, #9a7020 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html.light-theme .nav-logo-nova { background: linear-gradient(135deg, #1a8a60 0%, #0e6a48 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.light-theme .nav-logo-sounds { background: linear-gradient(135deg, #b07820 0%, #8a5e10 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 13px; font-weight: 500; color: var(--ink2); transition: color var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--ink); } .nav-right { display: flex; align-items: center; gap: 12px; } /* ── Theme Toggle Button ── */ .theme-toggle { background: var(--card); border: 1px solid var(--border2); border-radius: 20px; padding: 7px 14px; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink2); transition: all var(--transition); } .theme-toggle:hover { border-color: var(--gold); color: var(--ink); } .theme-toggle .toggle-track { width: 32px; height: 18px; background: var(--border2); border-radius: 9px; position: relative; transition: background 0.3s ease; } .theme-toggle .toggle-track::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--ink3); top: 3px; left: 3px; transition: transform 0.3s ease, background 0.3s ease; } html.light-theme .theme-toggle .toggle-track { background: var(--gold); } html.light-theme .theme-toggle .toggle-track::after { transform: translateX(14px); background: #fff; } .toggle-icon { font-size: 14px; } /* ============================================================ LAYOUT HELPERS ============================================================ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 48px; } section { padding: 100px 48px; position: relative; } .section-header { margin-bottom: 52px; } .section-header .eyebrow { margin-bottom: 12px; } /* ============================================================ CARDS ============================================================ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-4px); border-color: var(--border2); box-shadow: var(--shadow-md); } /* ============================================================ BOOK COVER COLOURS (reused on multiple pages) ============================================================ */ .bc-1 { background: linear-gradient(160deg, #1a1030, #2a1848); } .bc-2 { background: linear-gradient(160deg, #0e1a14, #1e3828); } .bc-3 { background: linear-gradient(160deg, #1a0e10, #381820); } .bc-4 { background: linear-gradient(160deg, #101828, #1a2840); } .bc-5 { background: linear-gradient(160deg, #201810, #382810); } .bc-6 { background: linear-gradient(160deg, #180e20, #2e1838); } .bc-7 { background: linear-gradient(160deg, #0e1820, #182838); } .bc-8 { background: linear-gradient(160deg, #201010, #401818); } .bc-9 { background: linear-gradient(160deg, #101820, #1c2c38); } .bc-10 { background: linear-gradient(160deg, #181020, #281838); } html.light-theme .bc-1 { background: linear-gradient(160deg, #c8b8e8, #a890d0); } html.light-theme .bc-2 { background: linear-gradient(160deg, #a8d8c8, #78b8a0); } html.light-theme .bc-3 { background: linear-gradient(160deg, #e8b8c0, #c88090); } html.light-theme .bc-4 { background: linear-gradient(160deg, #b0c8e8, #8090c0); } html.light-theme .bc-5 { background: linear-gradient(160deg, #e8d0a8, #c8a870); } html.light-theme .bc-6 { background: linear-gradient(160deg, #d0b8e0, #a880c0); } html.light-theme .bc-7 { background: linear-gradient(160deg, #b0c8d8, #8098b8); } html.light-theme .bc-8 { background: linear-gradient(160deg, #e8b8b8, #c87878); } html.light-theme .bc-9 { background: linear-gradient(160deg, #b8c8d8, #8898b0); } html.light-theme .bc-10 { background: linear-gradient(160deg, #c8b8d8, #9880b8); } /* ============================================================ BADGES ============================================================ */ .badge { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; } .badge-free { background: rgba(46,184,164,0.18); color: var(--teal); } .badge-locked { background: rgba(212,168,67,0.14); color: var(--gold); } .badge-new { background: rgba(192,74,94,0.18); color: var(--crimson); } /* ============================================================ SCROLLING GENRE STRIP ============================================================ */ .genre-strip { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; overflow: hidden; transition: background 0.4s ease; } .genre-strip-inner { display: flex; gap: 56px; animation: scrollStrip 22s linear infinite; white-space: nowrap; } @keyframes scrollStrip { from { transform: translateX(0); } to { transform: translateX(-50%); } } .genre-strip-item { font-family: var(--serif); font-size: 1rem; font-style: italic; color: var(--ink3); flex-shrink: 0; display: flex; align-items: center; gap: 20px; } .genre-strip-item::after { content: '✦'; font-style: normal; font-size: 0.65rem; color: var(--gold); opacity: 0.55; } /* ============================================================ FOOTER (shared across all pages) ============================================================ */ footer { background: var(--surface); border-top: 1px solid var(--border); padding: 60px 48px 28px; transition: background 0.4s ease; } .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--border); margin-bottom: 28px; } .footer-logo-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .footer-logo-wrap img { height: 36px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25)); } .footer-brand { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; line-height: 1; } .footer-brand .fn { font-style: italic; background: linear-gradient(135deg, #2fc99a, #1e9e70); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-brand .fs { background: linear-gradient(135deg, #d4a030, #b8892a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-tagline { font-size: 13px; color: var(--ink3); line-height: 1.7; font-weight: 300; max-width: 260px; } .footer-col h5 { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink3); margin-bottom: 16px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col ul li a { font-size: 13px; color: var(--ink3); font-weight: 300; transition: color var(--transition); } .footer-col ul li a:hover { color: var(--ink); } .footer-bottom { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink3); } /* ============================================================ FADE-IN ON SCROLL (JS adds .visible) ============================================================ */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ============================================================ RESPONSIVE — MOBILE ============================================================ */ @media (max-width: 900px) { .navbar { padding: 0 20px; } .nav-links { display: none; } section { padding: 64px 20px; } .container { padding: 0 20px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }