/* ===================================== ZARA K. REED KAZAKH INTERFACE FOUNDATION ===================================== */ /* RESET */ * { box-sizing: border-box; } body { margin:0; padding:0; background:#111; color:#e8e1d5; font-family: 'Helvetica Neue', Arial, sans-serif; } /* ========================== NAVIGATION ========================== */ .navbar { display:flex; justify-content:space-between; align-items:center; padding:25px 7%; background:#0b0b0b; } .logo { color:#d8c39a; letter-spacing:4px; font-size:22px; } .nav-links { display:flex; flex-direction:row; gap:25px; list-style:none; margin:0; padding:0; } .nav-links a { color:#e8e1d5; text-decoration:none; } .nav-links a:hover { color:#d8c39a; } /* ========================== HERO ========================== */ .kazakh-hero { min-height:100vh; padding:80px 8%; } .hero-title { text-align:center; margin-bottom:70px; } .hero-title h1 { font-size:60px; letter-spacing:12px; margin:0; } .hero-title p { color:#d8c39a; letter-spacing:5px; } /* ========================== CINEMATIC HERO ========================== */ .kazakh-hero { min-height:90vh; display:flex; justify-content:center; align-items:center; text-align:center; background: linear-gradient( rgba(0,0,0,0.65), rgba(0,0,0,0.75) ), url("kazakh-hero.jpg"); background-size:cover; background-position:center; } .hero-overlay { max-width:800px; } .hero-overlay h1 { font-size:60px; letter-spacing:12px; } .motto { color:#d8c39a; letter-spacing:5px; font-size:20px; } .hero-text { text-align:center; margin-top:70px; } .hero-text h2 { font-size:40px; letter-spacing:5px; } .hero-text p { max-width:700px; margin:20px auto; line-height:1.8; } .btn { display:inline-block; margin-top:30px; padding:12px 30px; background:#d8c39a; color:#111; text-decoration:none; border-radius:5px; font-weight:bold; } .btn:hover { background:#d8c39a; color:#111; } /* ========================== NOVEL SECTION ========================== */ .novel-section { max-width:1100px; margin:100px auto; padding:70px 40px; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; background:#111; } .novel-image { text-align:center; } .novel-image img { width:350px; max-width:100%; box-shadow: 0 40px 80px black; } .novel-content { text-align:center; } .novel-content h2 { color:#d8c39a; } .novel-content h3 { font-size:32px; letter-spacing:4px; } .novel-content h3, .motto { font-family: Georgia, serif; } /* ========================== AUTHOR SECTION ========================== */ .author-section { display:flex; align-items:center; justify-content:center; gap:80px; max-width:1200px; margin:100px auto; padding:80px 8%; background: radial-gradient( circle at center, #5a4724, #21180c 75% ); border-top:1px solid #d8c39a; border-bottom:1px solid #d8c39a; } .author-info { max-width:500px; } .author-photo img { width:350px; box-shadow: 0 40px 80px rgba(0,0,0,0.8); } /* ========================== FOOTER ========================== */ footer { text-align:center; padding:50px; background:#080808; } /* ========================== MOBILE ========================== */ @media(max-width:900px){ .navbar { flex-direction:column; gap:25px; } .nav-links { flex-direction:column; text-align:center; } .hero-visual { grid-template-columns:1fr; } .hero-title h1 { font-size:35px; letter-spacing:6px; } .hero-image img { height:300px; } .hero-text h2 { font-size:28px; } .novel-section, .author-section { flex-direction:column; text-align:center; } .novel-cover img, .author-photo img { width:280px; } .novel-section { grid-template-columns:1fr; } .novel-image img { width:280px; } } /* ===================================== KAZAKH NOVEL READING BLACKBIRD WHISPER PROLOGUE ===================================== */ .novel-page { max-width:850px; margin:80px auto; padding:0 30px; } .novel-page h1 { text-align:center; font-size:34px; letter-spacing:3px; margin-bottom:20px; color:#f2f2f2; } .novel-page h2 { text-align:center; font-weight:normal; font-size:22px; color:#c9bfae; margin-bottom:50px; } .chapter-text { font-size:19px; line-height:2; letter-spacing:0.2px; } .chapter-text p { margin-bottom:40px; } .chapter-navigation { display:flex; justify-content:space-between; margin-top:70px; padding-top:30px; border-top:1px solid #333; } .chapter-navigation a { color:#d8c39a; text-decoration:none; } .chapter-navigation a:hover { color:white; } .audio-player { text-align:center; margin:40px auto; } .audio-player p { color:#d8c39a; letter-spacing:2px; } /* ========================== NOVEL BACK LINK ========================== */ .back-link { display:block; max-width:850px; margin:30px auto 0; padding:0 30px; color:#d8c39a; text-decoration:none; font-size:15px; letter-spacing:1px; } .back-link:hover { color:#ffffff; } /* ========================== CONTACT PRE-FOOTER ========================== */ .contact-section { max-width:900px; margin:100px auto; padding:80px 40px; text-align:center; background: radial-gradient( circle at center, #4f3b1b, #171109 80% ); border-top:1px solid #d8c39a; border-bottom:1px solid #d8c39a; } .contact-section h2 { color:#d8c39a; } /* ========================== LEGAL FOOTER ========================== */ .legal-footer { padding:35px 20px; text-align:center; background:#030303; border-top:1px solid rgba(216,195,154,0.1); } .copyright { margin:0; opacity:0.7; } /* ========================== PUBLICATION INFO ========================== */ .publication-info { text-align:center; color:#8f8778; font-size:14px; letter-spacing:1px; margin-top:-25px; margin-bottom:50px; } /* ========================== SOCIAL LINKS ========================== */ .social-links a, .social-links a:visited { color:#d8c39a; text-decoration:none; } .social-links a:hover { color:#ffffff; } .author-info h2 .author-section h2, .contact-section h2 { color:#d8c39a; } .contact-section a, .social-links a { color:#d8c39a; } .contact-section a:hover, .social-links a:hover { color:#ffffff; } .contact-section .btn { background:#d8c39a; color:#111 !important; } .contact-section .btn:hover { background:#ffb703; color:#111 !important; }