/* ==================================== */ /* 1. ROOT COLORS (Your Palette) */ /* ==================================== */ :root { --bg: linear-gradient(to bottom right, #f9e8e2, #d0e7f9); --text-main: #333; --accent: #a46ccf; --card-bg: rgba(255, 255, 255, 0.6); --glass: blur(8px); } /* ==================================== */ /* 2. RESET & BODY */ /* ==================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; background: var(--bg); background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100vh; color: var(--text-main); overflow-x: hidden; min-height: 100vh; } /* ==================================== */ /* 3. HEADER: Round Logo + Name */ /* ==================================== */ header { padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: rgba(255, 255, 255, 0.4); backdrop-filter: var(--glass); z-index: 10; } .header-left { display: flex; align-items: center; gap: 12px; } /* Round logo placeholder */ .round-logo { width: 45px; height: 45px; background: #ddd; border-radius: 50%; background-image: url('img.png'); /* Replace with your logo */ background-size: cover; background-position: center; background-size: 170%; } .logo { font-family: 'Caveat', cursive; font-size: 1.8rem; color: var(--accent); } /* ==================================== */ /* 4. NAVBAR: Better spacing, hover, active */ /* ==================================== */ .nav { display: flex; gap: .3rem; align-items: center; } /* underline for nav buttons */ .nav-btn { position: relative; /* required for ::after */ display: inline-block; /* ensures ::after width works */ background: none; border: none; padding: 0.6rem 1.2rem; font-weight: 600; font-size: 1rem; cursor: pointer; color: var(--text-main); } /* default hidden underline */ .nav-btn::after { content: ""; position: absolute; bottom: 0; /* stick to bottom of button */ left: 0; width: 0%; height: 2px; background-color: var(--accent); transition: width 0.3s ease; } /* Show underline if button is active */ .nav-btn.active::after { width: 100%; } /* Optional: hover effect */ .nav-btn:hover::after { width: 100%; } .nav a, .nav-btn { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: var(--text-main); text-decoration: none; padding: 0.6rem 1.2rem; border-radius: 12px; transition: all 0.3s ease; background: none; border: none; cursor: pointer; } /* Hover effect */ .nav a:hover, { background: var(--accent); color: white; } /* Active page highlight */ .nav a.active { background: var(--accent); color: white; font-weight: 600; } /* Dropdown */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; top: 100%; left: 0; background: rgba(192, 192, 192, 0.3); min-width: 160px; border-radius: 6px; backdrop-filter: var(--glass); z-index: 1; overflow: hidden; } .dropdown-content a { color: black; padding: 10px 15px; text-decoration: none; display: block; font-size: 1rem; } .dropdown-content a:hover { background: rgba(0, 0, 0, 0.1); } .dropdown:hover .dropdown-content { display: block; } /* ==================================== */ /* 10. RESPONSIVE */ /* ==================================== */ @media (max-width: 600px) { header { padding: 0.7rem 1rem; flex-wrap: wrap; gap: 0.5rem; } .header-left { gap: 6px; } .round-logo { width: 36px; height: 36px; } .logo { font-size: 1.4rem; } .nav { gap: 0.7rem; flex-wrap: wrap; justify-content: center; } .nav a, .nav-btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; } .dropdown-content { min-width: 130px; left: 50%; transform: translateX(-50%); } .hero { padding-bottom: 2.5rem; padding-top: 1rem; } .hero h1 { font-size: 2.2rem; } .hero p { font-size: 1rem; } .map { margin-top: 1.5rem; height: auto; min-height: 28vh; padding: 1.5rem 1rem; } .heart-container { width: clamp(130px, 45vw, 240px); } .realms { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 1rem; } .realm-card h3 { font-size: 1.35rem; } .quote-section, .submit { padding: 2rem 1rem; } .quote { font-size: 1.35rem; } footer p { font-size: 0.8rem; } } /* ==================================== */ /* FLOATING WORDS — POETIC BACKGROUND */ /* ==================================== */ footer { padding: 1.5rem; text-align: center; font-size: .9rem; color: #888; } .privacy-link { color: var(--accent); text-decoration: underline; } .privacy-link:hover { color: #8a54b3; } /* ==================================== */ /* FLOATING WORDS – quiet background */ /* ==================================== */ /* Underline hover for nav buttons */ .nav-btn { position: relative; background: none; border: none; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: var(--text-main); padding: 0.6rem 1.2rem; border-radius: 0; /* optional: makes it look link-like */ cursor: pointer; transition: color 0.3s ease; } /* create underline effect */ .nav-btn::after { content: ""; position: absolute; left: 0; bottom: 0.4rem; width: 0%; height: 2px; background-color: var(--accent); transition: width 0.3s ease; } /* on hover — underline appears */ .nav-btn:hover::after { width: 100%; } /* optional: color change on hover */ .nav-btn:hover { color: var(--accent); } /* if active (clicked or current section) */ .nav-btn.active::after { width: 100%; } /* ==================================== */ /* COMING SOON PAGE */ /* ==================================== */ .coming-soon { height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #5a3e88; font-family: 'Caveat', cursive; backdrop-filter: var(--glass); } .coming-soon h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 0.5rem; } .coming-soon p { font-family: 'Inter', sans-serif; font-size: 1.1rem; color: #555; }