/* ==================================== */ /* 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; } .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, .nav-btn: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; } /* ==================================== */ /* 5. HERO SECTION */ /* ==================================== */ .hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-bottom: 10rem; gap: .1rem; } .hero h1 { font-family: 'Caveat', cursive; font-size: clamp(1rem, 5vw, 3rem); margin-bottom: .1rem; color: #5a3e88; } .hero p { font-size: clamp(1rem, 3vw, 1.2rem); color: #555; margin-bottom: .3rem; } /* ==================================== */ /* 6. HEART & MAP (Red line removed) */ /* ==================================== */ .map { display: flex; justify-content: center; margin-top: 6rem; height: 8vh; align-items: center; flex-direction: column; padding: 3rem 2rem; } .svg-box { display: flex; align-items: center; gap: 2rem; } .heart-container { position: absolute; top: 55%; left: 50%; width: clamp(100px, 25vw, 300px); height: auto; transform: translate(-50%, -50%); z-index: 13; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* RED LINE REMOVED */ .heart-svg rect { display: none !important; } .heart-region { fill: rgba(164, 108, 207, 0.2); stroke: var(--accent); stroke-width: 1.2; transition: fill .3s, transform .3s; } .heart-region:hover { fill: rgba(164, 108, 207, 0.5); transform: scale(1.02); filter: drop-shadow(0 0 3px #a46ccf); } .tooltip { position: absolute; bottom: -2.4rem; left: 50%; transform: translateX(-50%); color: #5a3e88; font-family: 'Caveat', cursive; font-size: 1.8rem; padding: .3rem .6rem; border-radius: 6px; pointer-events: none; opacity: 1; white-space: nowrap; z-index: 99; transition: opacity .2s ease; } /* ==================================== */ /* 7. REALM CARDS (6 cards) */ /* ==================================== */ .realms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; padding: 3rem 2rem; } .realm-card { background: var(--card-bg); backdrop-filter: var(--glass); padding: 1.5rem; border-radius: 16px; text-align: center; transition: transform .2s ease; cursor: pointer; } .realm-card:hover { transform: scale(1.03); } .realm-card h3 { font-family: 'Caveat', cursive; font-size: 1.5rem; color: #734f9a; } /* ==================================== */ /* 8. QUOTE SECTION (Back!) */ /* ==================================== */ .quote-section { padding: 3rem 2rem; text-align: center; background: rgba(255, 255, 255, 0.5); backdrop-filter: var(--glass); } .quote { font-family: 'Caveat'; font-size: 1.8rem; max-width: 600px; margin: auto; color: #444; word-spacing: 0.5rem; } /* ==================================== */ /* 9. FOOTER + Privacy Link */ /* ==================================== */ footer { padding: 1.5rem; text-align: center; font-size: .9rem; color: #888; } .privacy-link { color: var(--accent); } .privacy-link:hover { color: #8a54b3; } /* ==================================== */ /* SUBMIT BUTTON */ /* ==================================== */ .submit { padding: 3rem 2rem; text-align: center; } .submit a { padding: .6rem 1.2rem; background-color: #444; color: white; border-radius: 10px; text-decoration: none; font-weight: 600; transition: background 0.3s ease; } .submit a:hover { background: #333; } /* ==================================== */ /* 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 */ /* ==================================== */ /* ==================================== */ /* FLOATING WORDS – quiet background */ /* ==================================== */