/* Base styles and variables */
:root {
--sidebar-width: 220px;
--primary-color: #2c3e50;
--secondary-color: #3498db;
--text-color: #333;
--light-bg: #f9f9f9;
--border-color: #e0e0e0;
--shadow: 0 2px 10px rgba(0,0,0,0.05);
--transition-speed: 0.3s;
--poetry-accent: #8e44ad;
/* Ghibli theme colors */
--ghibli-blue: #4A89DC;
--ghibli-light-blue: #93c2ef;
--ghibli-green: #5D9E7A;
--ghibli-light-green: #90CFB0;
--ghibli-cream: #FDF6E3;
--ghibli-accent: #E76D6F;
--ghibli-yellow: #F6CD61;
--ghibli-brown: #8B5A34;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #f5f5f5;
color: var(--text-color);
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Layout containers */
.app-container {
height: 100vh;
position: relative;
display: flex;
width: 100%;
}
/* Update content area to expand when sidebar is collapsed */
.content-area {
margin-left: var(--sidebar-width);
padding: 20px;
min-height: 100vh;
transition: margin-left var(--transition-speed) ease, width var(--transition-speed) ease;
width: calc(100% - var(--sidebar-width));
}
/* Add new style for when sidebar is collapsed */
.left-panel.hidden + .content-area {
margin-left: 0;
width: 100%;
}
.content-area.full-width {
margin-left: 0;
width: 100%;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0;
padding: 1rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--shadow);
min-height: 80vh;
}
/* Left panel / Sidebar */
.left-panel {
width: var(--sidebar-width);
background-color: var(--ghibli-light-blue);
color: #333;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 10;
box-shadow: 4px 0 15px rgba(0,0,0,0.15);
transition: transform var(--transition-speed) ease;
display: flex;
flex-direction: column;
overflow-y: auto;
/* Remove any top border and keep only the right border */
border: none;
/*border-right: 1px solid var(--ghibli-blue);*/
}
.left-panel.hidden {
transform: translateX(-100%);
}
.sidebar-toggle {
position: fixed;
left: var(--sidebar-width);
top: 10px;
z-index: 20;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: var(--ghibli-green);
color: white;
border: 3px solid white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-speed) ease;
box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.sidebar-toggle:hover {
background-color: var(--ghibli-accent);
transform: scale(1.1);
}
.sidebar-toggle.collapsed i {
transform: rotate(180deg);
}
.sidebar-toggle.collapsed {
left: 10px;
}
.panel-buttons {
display: flex;
flex-direction: column;
padding: 0.8rem;
flex-grow: 1;
position: relative;
align-items: stretch; /* Makes all children same width */
}
.panel-button {
background-color: var(--ghibli-cream);
color: #333;
border: none;
padding: 0.7rem 0.8rem;
margin-bottom: 0.8rem;
border-radius: 20px;
cursor: pointer;
text-align: center;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: 0 3px 0 var(--ghibli-blue);
position: relative;
overflow: hidden;
font-weight: 500;
margin-left: 0;
margin-right: 0;
width: 100%; /* Ensure buttons take full width */
}
.panel-button:hover {
background-color: var(--ghibli-yellow);
transform: translateY(-2px);
box-shadow: 0 5px 0 var(--ghibli-blue);
}
.panel-button.active {
background-color: var(--ghibli-green);
color: white;
font-weight: bold;
box-shadow: 0 3px 0 var(--ghibli-brown);
}
.panel-button::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
transform: scale(0);
opacity: 0;
transition: transform 0.5s, opacity 0.3s;
}
.panel-button:active::before {
transform: scale(1);
opacity: 0.3;
}
/* Update panel footer to accommodate new button */
.panel-footer {
width: 100%;
padding: 12px;
font-size: 0.8rem;
color: rgba(0, 0, 0, 0.7);
text-align: center;
line-height: 1.5;
margin-top: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Style for footer buttons */
.footer-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
width: 100%;
padding: 0 12px;
}
.footer-links a {
padding: 8px 12px;
background-color: var(--ghibli-cream);
color: var(--ghibli-dark-green);
text-decoration: none;
border-radius: 20px;
font-size: 0.85rem;
transition: all 0.3s ease;
text-align: center;
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 3px 0 var(--ghibli-brown), 0 4px 6px rgba(0,0,0,0.1);
}
.footer-links a::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
var(--ghibli-yellow),
var(--ghibli-accent),
var(--ghibli-yellow)
);
border-radius: 20px 20px 0 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.footer-links a:hover {
transform: translateY(-2px);
background-color: var(--ghibli-light-green);
color: var(--ghibli-dark-green);
box-shadow: 0 5px 0 var(--ghibli-brown), 0 6px 8px rgba(0,0,0,0.15);
}
.footer-links a:hover::before {
opacity: 1;
}
.footer-links a:active {
transform: translateY(0);
box-shadow: 0 2px 0 var(--ghibli-brown), 0 3px 4px rgba(0,0,0,0.1);
}
/* Add floating animation for buttons */
@keyframes gentleButtonFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-1px);
}
}
.footer-links a {
animation: gentleButtonFloat 3s ease-in-out infinite;
}
.footer-links a:hover {
animation: none;
}
/* External services section */
.external-services {
margin-top: 1rem;
margin-bottom: 0.8rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.external-button {
background-color: transparent;
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.6rem 0.8rem;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
transition: background-color var(--transition-speed), border-color var(--transition-speed);
font-size: 0.85rem;
}
.external-button:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.4);
}
.external-button i {
font-size: 0.75rem;
}
/* Dropdown Frames in Sidebar */
.dropdown-frames {
width: 100%; /* Take full width of parent */
}
.sidebar-frame {
margin: 15px 0;
background-color: var(--ghibli-cream);
border-radius: 12px;
box-shadow: 0 4px 0 var(--ghibli-brown), 0 4px 10px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease;
width: 100%;
border: none;
}
.sidebar-frame:hover {
transform: translateY(-2px);
}
.frame-title {
background-color: var(--ghibli-blue);
color: white;
padding: 8px 12px;
font-size: 0.9rem;
font-weight: bold;
/*border-bottom: 2px dashed rgba(255,255,255,0.2);*/
position: relative;
}
.frame-title::before {
content: "✦";
margin-right: 5px;
font-size: 0.8rem;
opacity: 0.8;
}
.frame-content {
padding: 12px;
}
.dropdown-container {
display: flex;
align-items: center;
margin-bottom: 10px;
gap: 8px;
}
.dropdown-container label {
display: inline-block;
font-size: 0.8rem;
color: var(--ghibli-brown);
font-weight: 500;
min-width: 35px;
margin-bottom: 0;
flex-shrink: 0;
}
.dropdown-container select {
flex: 1;
padding: 6px 10px;
border-radius: 20px;
border: 2px solid var(--ghibli-light-green);
background-color: white;
font-size: 0.85rem;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
transition: all 0.3s ease;
cursor: pointer;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
.dropdown-container select:focus {
border-color: var(--ghibli-accent);
outline: none;
}
.dropdown-container select:hover {
border-color: var(--ghibli-accent);
}
/* Chat container Ghibli Style */
.chat-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: var(--ghibli-cream);
border-radius: 15px;
position: relative;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all var(--transition-speed) ease;
}
.chat-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--ghibli-yellow), var(--ghibli-accent), var(--ghibli-yellow));
z-index: 1;
}
/* Input Container */
.input-container {
background-color: rgba(255, 255, 255, 0.7);
border-radius: 12px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
border: 2px dashed rgba(93, 158, 122, 0.3);
position: relative;
}
.welcome-message {
color: var(--ghibli-brown);
font-size: 1.1rem;
margin-bottom: 15px;
text-align: center;
font-weight: 500;
padding: 10px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 8px;
border-left: 3px solid var(--ghibli-blue);
}
.welcome-message .ghibli-icon-welcome {
margin-right: 8px;
opacity: 0.8;
}
textarea#user-input {
width: 100%;
min-height: 80px;
border: 2px solid var(--ghibli-light-blue);
border-radius: 10px;
padding: 12px;
font-size: 0.95rem;
background-color: white;
transition: all 0.3s ease;
resize: vertical;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
textarea#user-input:focus {
outline: none;
border-color: var(--ghibli-accent);
box-shadow: 0 0 0 3px rgba(231, 109, 111, 0.2);
}
/* Button Container */
.button-container {
display: flex;
justify-content: flex-end;
margin-top: 10px;
gap: 10px;
}
#submit-button, #optimize-button {
background-color: var(--ghibli-blue);
color: white;
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 3px 0 rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 6px;
}
#optimize-button {
background-color: var(--ghibli-green);
}
#submit-button:hover, #optimize-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}
#submit-button:hover {
background-color: var(--ghibli-accent);
}
#optimize-button:hover {
background-color: var(--ghibli-light-green);
}
#submit-button:active, #optimize-button:active {
transform: translateY(1px);
box-shadow: 0 2px 0 rgba(0,0,0,0.1);
}
/* Output Container */
.output-container {
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
padding: 15px;
box-shadow: 0 3px 0 var(--ghibli-light-green), 0 3px 10px rgba(0,0,0,0.05);
position: relative;
min-height: 200px;
}
/* AI Message Styling */
.ai-message {
background-color: rgba(144, 207, 176, 0.15);
border-left: 3px solid var(--ghibli-green);
padding: 15px;
margin: 10px 0;
border-radius: 0 8px 8px 0;
position: relative;
animation: messageAppear 0.3s ease-out;
}
.ai-message::before {
content: "";
position: absolute;
top: 0;
left: -3px;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--ghibli-green), var(--ghibli-light-green));
}
/* Loading Animation */
#loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
}
.spinner {
width: 60px;
height: 60px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
animation: bounce 1s infinite alternate ease-in-out;
}
@keyframes bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-10px); }
}
@keyframes messageAppear {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#loading p {
margin-top: 15px;
color: var(--ghibli-blue);
font-weight: 500;
font-size: 1rem;
}
/* Floating Elements */
.ghibli-floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.ghibli-floating-elements::before,
.ghibli-floating-elements::after {
content: "";
position: absolute;
background-repeat: no-repeat;
opacity: 0.1;
}
.ghibli-floating-elements::before {
width: 40px;
height: 40px;
top: 20%;
left: 15%;
background-image: url('data:image/svg+xml;utf8,');
animation: float 20s infinite alternate ease-in-out;
}
.ghibli-floating-elements::after {
width: 30px;
height: 30px;
top: 60%;
right: 10%;
background-image: url('data:image/svg+xml;utf8,');
animation: float 25s 5s infinite alternate-reverse ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(10px, 20px) rotate(5deg); }
50% { transform: translate(20px, 10px) rotate(0deg); }
75% { transform: translate(10px, -10px) rotate(-5deg); }
100% { transform: translate(-10px, 10px) rotate(0deg); }
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.chat-container {
padding: 15px;
margin: 10px;
}
.content-area {
padding: 10px;
}
.button-container {
flex-direction: column;
}
#submit-button, #optimize-button {
width: 100%;
justify-content: center;
}
.welcome-message {
font-size: 1rem;
}
}
/* Additional container decoration */
.container {
position: relative;
overflow: hidden;
}
.container::before {
content: "";
position: absolute;
top: 15px;
right: 15px;
width: 100px;
height: 100px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
/* Poetry panel specific styles */
/* Removing the poetry-config-frame style since we removed that section */
#poetry-container {
display: flex;
flex-direction: column;
padding: 2rem;
height: auto;
min-height: calc(100vh - 60px);
overflow-y: visible;
}
.poetry-header {
display: flex;
flex-direction: column;
padding: 18px;
margin-bottom: 25px;
border-radius: 10px;
background-color: #f8f9fa;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
width: 100%;
position: relative;
z-index: 1;
}
.poetry-header:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.poetry-controls {
display: flex;
flex-direction: column;
gap: 1rem;
}
.poetry-selectors {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-bottom: 0;
padding: 0;
transition: background-color 0.3s ease;
}
.selector-group {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
height: 38px;
min-width: 220px;
gap: 10px;
}
.selector-group label {
font-weight: 600;
color: #2c3e50;
font-size: 0.9rem;
transition: color 0.2s;
margin-bottom: 0;
white-space: nowrap;
min-width: 50px;
}
.selector-group:hover label {
color: var(--poetry-accent, #8e44ad);
}
.poetry-select {
flex: 1;
height: 38px;
padding: 10px 14px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background-color: white;
color: #333;
font-size: 0.95rem;
transition: all 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 35px;
}
.poetry-select:hover {
border-color: #bdbdbd;
}
.poetry-select:focus {
outline: none;
border-color: var(--poetry-accent, #8e44ad);
box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.2);
}
.poetry-button {
margin-top: 0;
height: 38px;
padding: 0 20px;
background-color: var(--poetry-accent, #8e44ad);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 15px;
font-weight: 500;
transition: all 0.3s;
box-shadow: 0 2px 6px rgba(142, 68, 173, 0.4);
align-self: center;
display: flex;
align-items: center;
justify-content: center;
}
.poetry-button:hover {
background-color: #7d3c98;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(142, 68, 173, 0.5);
}
.poetry-button:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(142, 68, 173, 0.4);
}
.poetry-content {
padding: 0 1rem 1rem;
overflow-y: auto;
flex: 1;
}
/* Poetry Navigation */
.poem-navigation {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.poem-nav-button {
background-color: var(--button-bg);
border: 1px solid var(--border-color);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s;
}
.poem-nav-button:hover:not(:disabled) {
background-color: var(--button-hover-bg);
}
.poem-nav-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.poem-counter {
font-size: 0.9rem;
color: var(--text-secondary);
}
/* Poem Display */
.poem-display {
background-color: white;
border-radius: 12px;
padding: 3rem 2.5rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
margin-bottom: 2rem;
}
.poem-display:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
/* Fix for poem-display::before and poem-display::after syntax errors */
.poem-display::before {
content: "\201C"; /* Unicode for opening double quote */
position: absolute;
top: 10px;
left: 20px;
font-size: 120px;
color: rgba(142, 68, 173, 0.08);
font-family: serif;
line-height: 1;
}
.poem-display::after {
content: "\201D"; /* Unicode for closing double quote */
position: absolute;
bottom: 10px;
right: 20px;
font-size: 120px;
color: rgba(142, 68, 173, 0.08);
font-family: serif;
line-height: 1;
}
.poem-title {
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 0.8rem;
text-align: center;
position: relative;
padding-bottom: 15px;
}
.poem-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background-color: var(--poetry-accent, #8e44ad);
border-radius: 3px;
}
.poem-author {
font-size: 1.1rem;
color: #7f8c8d;
margin-bottom: 2.5rem;
text-align: center;
font-style: italic;
}
.poem-content {
font-size: 1.4rem;
line-height: 2.2;
text-align: center;
margin-bottom: 2.5rem;
color: #34495e;
transition: color 0.3s;
white-space: pre-wrap;
position: relative;
z-index: 1;
}
.poem-section {
background-color: #f8f9fa;
border-radius: 10px;
padding: 1.8rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border-left: 4px solid var(--poetry-accent, #8e44ad);
position: relative;
overflow: hidden;
display: block !important;
opacity: 1 !important;
}
.poem-section:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.poem-section h3 {
font-size: 1.3rem;
color: var(--poetry-accent, #8e44ad);
margin-bottom: 1.2rem;
position: relative;
padding-bottom: 10px;
font-weight: 600;
}
.poem-section h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: var(--poetry-accent, #8e44ad);
border-radius: 2px;
}
.poem-background-section,
.poem-analysis-section {
display: block !important;
margin-top: 2rem;
margin-bottom: 2rem;
}
.poem-background-section h3::before {
content: "📜 ";
}
.poem-analysis-section h3::before {
content: "✨ ";
}
.poem-background,
.poem-explanation {
font-size: 1.05rem;
line-height: 1.8;
color: #34495e;
display: block !important;
opacity: 1 !important;
}
/* Add subtle decorative element */
.poem-section::after {
content: '';
position: absolute;
top: 10px;
right: 10px;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(142, 68, 173, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
z-index: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.selector-group {
flex-direction: row; /* Keep it as row even on mobile */
width: 100%;
}
.selector-group label {
min-width: 60px;
}
.poetry-select {
flex: 1;
}
.poem-display {
padding: 1.5rem;
}
.poem-title {
font-size: 1.5rem;
}
.poem-content {
font-size: 1.1rem;
}
}
/* Loading spinner for poetry */
#poetry-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
margin: 2rem auto;
}
#poetry-loading .spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(142, 68, 173, 0.1);
border-radius: 50%;
border-top-color: var(--poetry-accent, #8e44ad);
animation: spin 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
margin-bottom: 1.5rem;
}
#poetry-loading p {
color: #7f8c8d;
font-size: 1.1rem;
text-align: center;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Empty State Enhancement */
.poetry-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
background-color: #f8f9fa;
border-radius: 12px;
margin: 2rem 0;
border: 2px dashed #d5d8dc;
transition: all 0.3s ease;
}
.poetry-empty-state:hover {
border-color: var(--poetry-accent, #8e44ad);
background-color: rgba(142, 68, 173, 0.03);
}
.poetry-empty-state img {
width: 120px;
height: auto;
margin-bottom: 1.5rem;
opacity: 0.7;
transition: all 0.3s ease;
}
.poetry-empty-state:hover img {
opacity: 1;
transform: scale(1.1) rotate(5deg);
}
.poetry-empty-state h3 {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 1rem;
}
.poetry-empty-state p {
color: #7f8c8d;
text-align: center;
max-width: 500px;
line-height: 1.6;
margin-bottom: 1.5rem;
}
/* Poetry Panel */
#poetry-panel {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
#poetry-panel.hidden {
display: none;
}
#poetry-container {
display: flex;
flex-direction: column;
padding: 20px;
min-height: calc(100vh - 60px);
position: relative;
height: auto;
overflow: visible;
}
.poetry-header {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.poetry-header h2 {
margin: 0;
color: var(--primary-color);
}
.poetry-config-frame {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
background-color: #f5f5f5;
border-radius: 8px;
margin-bottom: 1rem;
}
.config-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.config-row label {
font-weight: 500;
min-width: 80px;
}
.config-row select {
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
min-width: 120px;
}
.poetry-button {
padding: 0.75rem 1.5rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
align-self: flex-start;
}
.poetry-button:hover {
background-color: #0056b3;
}
.poetry-content {
flex: 1;
overflow-y: auto;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 2rem;
text-align: center;
color: #666;
}
#poetry-display {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.poem-navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.poem-nav-button {
padding: 0.5rem 1rem;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
.poem-nav-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.poem-display {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.poem-title {
margin: 0;
font-size: 1.5rem;
color: var(--primary-color);
text-align: center;
}
.poem-author {
margin: 0.5rem 0 1rem;
font-style: italic;
text-align: center;
color: #666;
}
.poem-content {
font-size: 1.2rem;
line-height: 1.8;
text-align: center;
margin: 1rem 0;
padding: 1rem;
background-color: #f9f9f9;
border-radius: 8px;
white-space: pre-line;
}
.poem-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.poem-section {
padding: 1rem;
background-color: #f5f5f5;
border-radius: 8px;
}
.poem-section h4 {
margin: 0 0 0.5rem;
color: var(--primary-color);
}
.poem-section p {
margin: 0;
line-height: 1.6;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.poetry-config-frame {
flex-direction: column;
}
.poem-display {
padding: 1rem;
}
.poem-title {
font-size: 1.3rem;
}
.poem-content {
font-size: 1rem;
}
}
.main-content {
margin-left: 250px;
padding: 20px;
position: relative;
}
/* Control panel - scroll with page but stick at top when scrolled to */
.control-panel {
position: sticky;
top: 0;
z-index: 100;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 25px;
padding: 18px;
background-color: #f8f9fa;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
align-items: center;
transition: all 0.3s ease;
order: -1;
width: 100%;
}
/* Create container adjustments */
#create-container {
display: flex;
flex-direction: column;
padding: 20px;
min-height: calc(100vh - 60px);
position: relative;
height: auto;
overflow: visible;
}
/* Add some padding at the top of the content area */
.content-area {
padding-top: 20px;
overflow-y: auto;
}
/* Ensure no overflow hidden in parent containers */
.container, .app-container, body {
overflow: visible;
}
/* Fix z-index stacking for proper sticky behavior */
.questions-display-container {
position: relative;
z-index: 10;
}
/* Fix navigation controls at the bottom while scrolling */
.navigation-controls {
position: sticky;
bottom: 20px;
z-index: 90;
display: flex;
justify-content: space-between;
margin-top: 20px;
padding: 15px;
background: rgb(108, 103, 103);
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
order: 3;
}
.navigation-controls:hover {
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
/* Style dropdowns more attractively */
.control-panel select {
padding: 10px 14px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background-color: white;
min-width: 140px;
font-size: 14px;
transition: all 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 35px;
}
.control-panel select:hover {
border-color: #bdbdbd;
}
.control-panel select:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}
/* Enhance the generate button */
.control-panel button {
padding: 8px 16px;
border: none;
border-radius: 4px;
background-color: var(--secondary-color);
color: white;
cursor: pointer;
transition: background-color 0.2s;
margin-left: 10px;
}
.control-panel button:hover {
background-color: #2980b9;
}
.control-panel button:active {
background-color: #2472a4;
}
.control-panel button:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
opacity: 0.7;
}
#evaluate-btn {
background-color: #27ae60;
}
#evaluate-btn:hover {
background-color: #219a52;
}
#evaluate-btn:active {
background-color: #1e8449;
}
#evaluate-btn:disabled {
background-color: #bdc3c7;
}
/* Enhance loading indicator */
.loading-indicator {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.loading-spinner {
border: 4px solid rgba(76, 175, 80, 0.2);
border-radius: 50%;
border-top: 4px solid #4CAF50;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add fade in animation for questions */
.question-item {
animation: fadeIn 0.5s ease;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
border: 1px solid #e0e0e0;
background-color: white;
transition: all 0.3s;
}
.question-item:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Add styles for dropdown validation */
.control-panel select.selected {
border-color: #4CAF50;
background-color: rgba(76, 175, 80, 0.05);
}
.control-panel select:invalid {
border-color: #ff6b6b;
}
/* Style for the ready button */
.control-panel button.ready {
background-color: #4CAF50;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.5);
}
.control-panel button:disabled {
background-color: #9e9e9e;
cursor: not-allowed;
box-shadow: none;
opacity: 0.7;
}
/* Add interactive elements to poem display */
.poem-content {
position: relative;
}
.poem-line {
display: block;
padding: 5px 0;
transition: all 0.2s ease;
position: relative;
}
.poem-line:hover {
color: var(--poetry-accent, #8e44ad);
transform: translateX(5px);
}
.poem-line::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 2px;
background-color: var(--poetry-accent, #8e44ad);
transition: width 0.2s ease;
opacity: 0;
}
.poem-line:hover::before {
width: 15px;
opacity: 1;
}
/* Styles for the interactive elements added by JavaScript */
.poetry-select.selected {
border-color: var(--poetry-accent, #8e44ad);
background-color: rgba(142, 68, 173, 0.05);
}
.selector-group.has-selection label {
color: var(--poetry-accent, #8e44ad);
}
.poem-section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.poem-section.animate-in {
opacity: 1;
transform: translateY(0);
}
/* Add animation when poem loads */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.poem-display {
animation: fadeIn 0.6s ease-out forwards;
}
.poem-title, .poem-author {
opacity: 0;
animation: fadeIn 0.8s ease-out 0.3s forwards;
}
.poem-content {
opacity: 0;
animation: fadeIn 1s ease-out 0.6s forwards;
}
/* Improved animation when scrolling */
@keyframes stickyAppear {
from { transform: translateY(-10px); opacity: 0.9; }
to { transform: translateY(0); opacity: 1; }
}
.poetry-header.scrolled {
animation: stickyAppear 0.3s forwards;
}
/* Vocabulary Styles */
#vocabulary-content {
display: flex;
flex-direction: column;
height: 100%;
background-color: transparent;
overflow: auto;
width: 100%;
padding: 0 20px;
}
.vocabulary-container {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.vocabulary-card-container {
flex: 1;
overflow-y: auto;
padding: 20px;
background: var(--card-bg);
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
padding-bottom: 80px;
width: 100%;
}
.vocabulary-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.vocabulary-header h2 {
margin: 0;
color: var(--text-color);
font-size: 1.5rem;
}
.vocabulary-load-btn {
padding: 8px 16px;
background: var(--secondary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
text-decoration: none;
margin-left: 10px;
display: inline-block;
font-weight: 500;
font-size: 15px;
vertical-align: middle;
}
.vocabulary-load-btn:hover {
background: #2980b9;
color: white;
}
.initial-message {
text-align: center;
color: #64748b;
font-size: 18px;
padding: 50px 30px;
border-radius: 10px;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 800px;
margin: 40px auto;
}
.word-card {
background-color: white;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
padding: 35px 40px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
min-height: 500px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
display: flex;
flex-direction: column;
animation: cardEntrance 0.6s ease-out;
gap: 20px;
}
@keyframes cardEntrance {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.word-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.word-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #e2e8f0;
}
.word-english {
font-size: 38px;
font-weight: 700;
color: var(--primary-color, #2c3e50);
animation: fadeIn 0.8s ease-out;
}
.word-details {
display: flex;
gap: 12px;
align-items: center;
}
.word-form {
font-size: 16px;
color: #64748b;
background-color: #f1f5f9;
padding: 6px 14px;
border-radius: 20px;
font-weight: 500;
animation: slideIn 0.8s ease-out;
}
.word-pronunciation {
font-family: monospace;
color: #64748b;
font-size: 16px;
background-color: #f1f5f9;
padding: 6px 14px;
border-radius: 20px;
}
.word-meanings {
margin-bottom: 25px;
animation: fadeInUp 1s ease-out;
}
.meaning-row {
display: flex;
margin-bottom: 15px;
}
.meaning-label {
width: 100px;
font-weight: 600;
color: #334155;
}
.meaning-content {
flex: 1;
color: #475569;
line-height: 1.6;
font-size: 16px;
}
.section-title {
font-size: 18px;
font-weight: 600;
color: var(--primary-color, #2c3e50);
margin-bottom: 12px;
position: relative;
padding-left: 15px;
}
.section-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 18px;
width: 4px;
background-color: var(--secondary-color, #3498db);
border-radius: 2px;
}
.word-examples, .word-family, .collocations, .word-relationships, .learning-tips {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #f1f5f9;
animation: fadeInUp 1.3s ease-out;
}
.example-item {
background-color: #f8fafc;
border-radius: 10px;
padding: 15px 20px;
margin-bottom: 15px;
border-left: 4px solid var(--secondary-color, #3498db);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.example-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.example-english {
color: #334155;
margin-bottom: 8px;
font-weight: 500;
font-size: 16px;
}
.example-chinese {
color: #64748b;
font-size: 15px;
}
.word-family-items, .collocation-items {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.word-family-item, .collocation-item {
background-color: #eef2ff;
color: #4338ca;
padding: 8px 14px;
border-radius: 6px;
font-size: 15px;
transition: transform 0.2s, background-color 0.2s;
}
.word-family-item:hover, .collocation-item:hover {
background-color: #4338ca;
color: white;
transform: translateY(-2px);
}
.word-relationships {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 968px) {
.word-relationships {
flex-direction: row;
}
.synonyms, .antonyms {
width: 50%;
}
}
.synonym-items, .antonym-items {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.synonym-container, .antonym-container {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
background-color: #f8fafc;
border-radius: 8px;
transition: transform 0.2s ease;
}
.synonym-container:hover, .antonym-container:hover {
transform: translateX(5px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.synonym-word, .antonym-word {
font-weight: 600;
color: #334155;
}
.synonym-def, .antonym-def {
color: #64748b;
font-size: 14px;
}
.learning-tips {
background-color: #ecfdf5;
border-left: 4px solid #10b981;
padding: 18px 20px;
border-radius: 8px;
margin-top: 20px;
}
.tip-content {
color: #065f46;
line-height: 1.6;
font-size: 15px;
}
.error-message {
background-color: #fee2e2;
border-left: 4px solid #ef4444;
padding: 20px;
border-radius: 10px;
color: #b91c1c;
text-align: center;
width: 100%;
max-width: 800px;
margin: 40px auto;
}
/* Navigation buttons styling to match the site theme */
.nav-button {
background-color: #f1f5f9;
color: #64748b;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 18px;
}
.nav-button:hover:not(:disabled) {
background-color: var(--secondary-color, #3498db);
color: white;
transform: scale(1.1);
}
.nav-button:active:not(:disabled) {
transform: scale(0.95);
}
.nav-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
#word-counter {
font-size: 16px;
color: #64748b;
font-weight: 500;
margin: 0 15px;
}
/* Add loading spinner for the load button */
.loading-spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.8s linear infinite;
margin-right: 8px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.vocabulary-header {
flex-direction: column;
align-items: flex-start; /* Align items to start for better stacking */
gap: 15px;
}
/* Ensure buttons take appropriate width on mobile if needed */
.vocabulary-header h2 {
margin-bottom: 5px; /* Add some space below the title */
}
.vocabulary-load-btn {
width: auto; /* Allow buttons to size naturally */
align-self: flex-start; /* Align buttons to the start */
margin-left: 0; /* Remove left margin when stacked */
}
.word-card {
padding: 25px;
min-height: 400px;
}
.word-english {
font-size: 30px;
}
.meaning-row {
flex-direction: column;
}
.meaning-label {
width: 100%;
margin-bottom: 5px;
}
.word-details {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* Add styles for the vocabulary loading message */
.loading-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
text-align: center;
}
.vocabulary-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(52, 152, 219, 0.2);
border-radius: 50%;
border-top-color: var(--secondary-color, #3498db);
animation: spin 1s ease-in-out infinite;
margin-bottom: 20px;
}
.loading-message p {
color: #64748b;
font-size: 18px;
margin: 5px 0;
}
.loading-message p:last-child {
color: #94a3b8;
font-size: 16px;
font-style: italic;
}
.error-message {
color: #dc3545;
}
.navigation-controls {
position: fixed;
bottom: 20px;
left: calc(50% + (var(--sidebar-width) / 2));
transform: translateX(-50%);
background: var(--card-bg);
padding: 15px 30px;
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
border-top: 1px solid var(--border-color);
margin-top: 20px;
z-index: 100;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
border-radius: 12px;
width: 90%;
max-width: 600px;
min-width: 300px;
transition: left var(--transition-speed) ease;
}
#vocabulary-container {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex: 1;
min-height: 200px;
padding-bottom: 20px;
}
.related-phrases {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 12px;
}
.phrase-item {
background-color: #f8fafc;
border-radius: 10px;
padding: 15px 20px;
border-left: 4px solid var(--secondary-color, #3498db);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.phrase-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.phrase-english {
color: #334155;
margin-bottom: 8px;
font-weight: 500;
font-size: 16px;
}
.phrase-chinese {
color: #64748b;
font-size: 15px;
margin-bottom: 8px;
}
.phrase-usage {
color: #475569;
font-size: 14px;
font-style: italic;
padding-top: 8px;
border-top: 1px solid #e2e8f0;
}
/* Add responsive adjustments for navigation controls */
@media (max-width: 768px) {
.navigation-controls {
width: 95%;
padding: 15px 20px;
gap: 20px;
min-width: 250px;
}
}
/* Improve layout for wider screens */
@media (min-width: 1200px) {
.word-meanings {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-bottom: 25px;
}
.word-relationships {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.synonyms, .antonyms {
width: 100%;
}
.related-phrases {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* Adjust for medium screens */
@media (min-width: 768px) and (max-width: 1199px) {
.vocabulary-container {
max-width: 1000px;
}
.word-card {
max-width: 900px;
}
}
/* Adjust for mobile screens */
@media (max-width: 767px) {
.vocabulary-container {
padding: 10px;
}
.word-card {
padding: 20px;
}
.word-meanings, .word-relationships, .related-phrases {
display: flex;
flex-direction: column;
}
}
/* Math formatting for answer section */
.answer-container {
background-color: #f8f9fa;
border-radius: 6px;
padding: 1.5rem 2rem;
margin-bottom: 1.5rem;
border-left: 4px solid var(--secondary-color);
}
.answer-container .math-inline {
display: inline-block;
margin: 0 0.2em;
vertical-align: middle;
font-size: 1.1em;
color: inherit;
padding: 0 0.2em;
font-family: 'KaTeX_Math', 'Times New Roman', serif;
}
.answer-container .math-display {
display: block;
margin: 1.2em 0;
text-align: center;
overflow-x: auto;
padding: 1em;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* Improve MathJax/KaTeX rendering in answer section */
.answer-container .MathJax,
.answer-container .katex {
font-size: 1.1em !important;
margin: 0 0.2em;
}
.answer-container .MathJax_Display,
.answer-container .katex-display {
margin: 1em 0 !important;
padding: 0.8em;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
overflow-x: auto;
max-width: 100%;
}
/* Add scrollbar styling for overflow math content in answer section */
.answer-container .math-display::-webkit-scrollbar {
height: 6px;
}
.answer-container .math-display::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.answer-container .math-display::-webkit-scrollbar-thumb {
background: #cbd5e0;
border-radius: 3px;
}
.answer-container .math-display::-webkit-scrollbar-thumb:hover {
background: #a0aec0;
}
/* Ensure proper spacing around math in answer explanation */
.answer-explanation {
line-height: 1.6;
color: var(--text-color);
}
.answer-explanation p {
margin: 0.8em 0;
}
.answer-explanation .math-inline {
background-color: rgba(248, 250, 252, 0.5);
border-radius: 4px;
padding: 0.1em 0.3em;
}
.answer-explanation .math-display {
margin: 1.2em 0;
background-color: #fff;
padding: 1em;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* Add responsive adjustments for math in answer section */
@media (max-width: 768px) {
.answer-container {
padding: 1rem 1.5rem;
}
.answer-container .math-display {
padding: 0.8em;
font-size: 1em;
}
.answer-explanation .math-display {
padding: 0.8em;
margin: 1em 0;
}
}
/* Add these new Ghibli theme elements after the left-panel styling */
.ghibli-header {
text-align: center;
padding: 15px 10px;
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #87CEEB, var(--ghibli-light-blue));
/*border-bottom: 3px dashed rgba(255, 255, 255, 0.4);*/
}
.ghibli-clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
animation: cloudMove 60s linear infinite;
}
@keyframes cloudMove {
from { background-position: 0 0; }
to { background-position: -220px 0; }
}
.ghibli-title {
font-size: 1.3rem;
font-weight: bold;
color: #fff;
margin: 5px 0;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
.ghibli-icon-qa,
.ghibli-icon-quiz,
.ghibli-icon-poetry,
.ghibli-icon-english {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
position: relative;
top: 4px;
}
.ghibli-icon-qa::before {
content: "🔎";
}
.ghibli-icon-quiz::before {
content: "📝";
}
.ghibli-icon-poetry::before {
content: "🖋️";
}
.ghibli-icon-english::before {
content: "🌎";
}
.ghibli-character {
margin: 20px auto;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.totoro-character {
width: 100px;
height: 100px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
transition: transform 0.5s ease;
}
.totoro-character:hover {
transform: scale(1.1) rotate(5deg);
}
.ghibli-grass {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 15px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
}
/* Update panel-buttons to accommodate new elements */
.panel-buttons {
display: flex;
flex-direction: column;
padding: 0.8rem;
flex-grow: 1;
position: relative;
}
/* Update panel footer for positioning */
.panel-footer {
width: 100%;
padding: 12px;
font-size: 0.8rem;
color: rgba(0, 0, 0, 0.7);
text-align: center;
line-height: 1.5;
margin-top: auto;
/* Remove background color */
background-color: transparent;
}
/* Floating elements for Ghibli atmosphere */
.ghibli-floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.ghibli-floating-elements::before {
content: "";
position: absolute;
width: 30px;
height: 30px;
background-image: url('data:image/svg+xml;utf8,');
top: 10%;
left: 10%;
animation: float 25s infinite alternate ease-in-out;
}
.ghibli-floating-elements::after {
content: "";
position: absolute;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml;utf8,');
top: 40%;
right: 15%;
animation: float 30s 5s infinite alternate-reverse ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(10px, 20px) rotate(5deg); }
50% { transform: translate(20px, 10px) rotate(0deg); }
75% { transform: translate(10px, -10px) rotate(-5deg); }
100% { transform: translate(-10px, 10px) rotate(0deg); }
}
/* Ghibli icons for buttons */
.ghibli-icon-welcome::before {
content: "🌱";
margin-right: 8px;
}
.ghibli-icon-optimize::before {
content: "✨";
}
.ghibli-icon-submit::before {
content: "📝";
}
/* Modify the container to accommodate the new design */
#qa-container {
position: relative;
background-color: var(--ghibli-cream);
border-radius: 15px;
box-shadow: 0 5px 0 var(--ghibli-brown), 0 5px 20px rgba(0,0,0,0.1);
padding: 20px;
overflow: hidden;
}
#qa-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--ghibli-yellow), var(--ghibli-accent), var(--ghibli-yellow));
z-index: 1;
}
/* Vocabulary Container Ghibli Style */
#vocabulary-content {
position: relative;
overflow: visible;
}
#vocabulary-content::before {
content: "";
position: absolute;
top: -30px;
right: 30px;
width: 80px;
height: 80px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
pointer-events: none;
z-index: 1;
}
.vocabulary-container {
background-color: var(--ghibli-cream);
border-radius: 15px;
box-shadow: 0 5px 0 var(--ghibli-brown), 0 5px 20px rgba(0,0,0,0.1);
padding: 20px;
position: relative;
overflow: hidden;
}
.vocabulary-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--ghibli-yellow), var(--ghibli-accent), var(--ghibli-yellow));
z-index: 1;
}
.vocabulary-card-container {
position: relative;
z-index: 1;
}
/* Vocabulary Header */
.vocabulary-header {
background: linear-gradient(to right, var(--ghibli-light-blue), var(--ghibli-blue));
border-radius: 12px;
padding: 15px 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
box-shadow: 0 3px 0 rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
}
.vocabulary-header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--ghibli-accent), transparent, var(--ghibli-accent));
}
.vocabulary-header h2 {
color: white;
margin: 0;
font-size: 1.3rem;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
position: relative;
}
.vocabulary-header h2::before {
content: "🌱";
margin-right: 8px;
}
.vocabulary-load-btn {
background-color: white;
color: var(--ghibli-blue);
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 3px 0 rgba(0,0,0,0.1);
text-decoration: none;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
}
.vocabulary-load-btn::before {
content: "🔤";
margin-right: 6px;
font-size: 1rem;
}
#load-sentences-btn::before {
content: "📚";
}
.vocabulary-load-btn:hover {
background-color: var(--ghibli-yellow);
transform: translateY(-2px);
box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}
.vocabulary-load-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 0 rgba(0,0,0,0.1);
}
/* Navigation controls */
#vocabulary-content .navigation-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin: 20px 0;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 30px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
position: relative;
z-index: 2;
}
#vocabulary-content .nav-button {
background-color: var(--ghibli-light-blue);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 3px 0 rgba(0,0,0,0.1);
}
#vocabulary-content .nav-button:hover:not(:disabled) {
background-color: var(--ghibli-blue);
transform: translateY(-2px);
box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}
#vocabulary-content .nav-button:disabled {
background-color: #d1d1d1;
cursor: not-allowed;
opacity: 0.7;
box-shadow: none;
}
#word-counter {
background-color: white;
padding: 6px 15px;
border-radius: 15px;
font-weight: 500;
color: var(--ghibli-brown);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
font-size: 0.9rem;
}
/* Vocabulary Content */
#vocabulary-container {
background-color: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 3px 0 var(--ghibli-light-green), 0 3px 10px rgba(0,0,0,0.05);
position: relative;
min-height: 350px;
}
.initial-message {
text-align: center;
padding: 30px;
color: var(--ghibli-brown);
font-size: 1.1rem;
line-height: 1.6;
background-color: rgba(253, 246, 227, 0.7);
border-radius: 10px;
position: relative;
}
.initial-message::before {
content: "👋";
display: block;
font-size: 2.5rem;
margin-bottom: 15px;
}
/* Word Card Styling */
.word-card {
background-color: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
animation: cardEntrance 0.6s ease-out;
border: 2px dashed rgba(93, 158, 122, 0.2);
}
.word-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--ghibli-light-green), var(--ghibli-light-blue));
}
.word-header {
margin-bottom: 20px;
position: relative;
padding-bottom: 15px;
border-bottom: 2px solid rgba(93, 158, 122, 0.1);
}
.word-english {
font-size: 2rem;
color: var(--ghibli-blue);
font-weight: bold;
margin: 0 0 10px 0;
display: flex;
align-items: center;
}
.word-english::before {
content: "🔤";
font-size: 1.2rem;
margin-right: 10px;
opacity: 0.7;
}
.word-pronunciation {
color: var(--ghibli-brown);
font-style: italic;
margin: 5px 0;
padding: 5px 10px;
background: rgba(253, 246, 227, 0.5);
border-radius: 5px;
display: inline-block;
}
.word-pronunciation::before {
content: "🔊";
margin-right: 5px;
font-size: 0.9rem;
}
.section-title {
color: var(--ghibli-blue);
margin: 20px 0 10px 0;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
position: relative;
padding-left: 15px;
}
.section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 18px;
background-color: var(--ghibli-accent);
border-radius: 3px;
}
.meaning-row {
margin-bottom: 15px;
padding-left: 10px;
position: relative;
}
.meaning-label {
color: white;
background-color: var(--ghibli-green);
padding: 3px 8px;
border-radius: 10px;
font-size: 0.8rem;
display: inline-block;
margin-right: 10px;
}
.meaning-content {
margin-top: 5px;
line-height: 1.5;
color: #333;
padding: 5px 0 5px 15px;
border-left: 3px solid rgba(93, 158, 122, 0.2);
}
/* Example items */
.example-item {
margin: 10px 0;
padding: 10px 15px;
background-color: rgba(253, 246, 227, 0.5);
border-radius: 8px;
position: relative;
transition: all 0.3s ease;
}
.example-item:hover {
background-color: rgba(253, 246, 227, 0.8);
transform: translateY(-2px);
}
.example-english {
color: var(--ghibli-blue);
font-weight: 500;
margin-bottom: 5px;
}
.example-chinese {
color: var(--ghibli-brown);
font-size: 0.95rem;
}
/* Word family and Collocations */
.word-family-items, .collocation-items {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.word-family-item, .collocation-item {
background-color: rgba(147, 194, 239, 0.2);
padding: 5px 12px;
border-radius: 15px;
font-size: 0.9rem;
color: var(--ghibli-blue);
transition: all 0.3s ease;
border: 1px solid rgba(74, 137, 220, 0.1);
}
.word-family-item:hover, .collocation-item:hover {
background-color: rgba(147, 194, 239, 0.4);
transform: translateY(-2px);
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* Synonyms and Antonyms */
.word-relationships {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 15px;
}
@media (min-width: 768px) {
.word-relationships {
grid-template-columns: 1fr 1fr;
}
}
.synonyms, .antonyms {
position: relative;
}
.synonym-items, .antonym-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
margin-top: 10px;
}
.synonym-container, .antonym-container {
background-color: rgba(253, 246, 227, 0.5);
padding: 10px;
border-radius: 8px;
transition: all 0.3s ease;
border-left: 3px solid;
}
.synonym-container {
border-left-color: var(--ghibli-green);
}
.antonym-container {
border-left-color: var(--ghibli-accent);
}
.synonym-container:hover, .antonym-container:hover {
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
.synonym-word, .antonym-word {
font-weight: 600;
color: var(--ghibli-blue);
margin-bottom: 3px;
}
.synonym-def, .antonym-def {
font-size: 0.85rem;
color: #666;
}
/* Learning Tips */
.learning-tips {
background-color: rgba(147, 194, 239, 0.15);
padding: 15px;
border-radius: 10px;
margin-top: 20px;
position: relative;
border-left: 4px solid var(--ghibli-yellow);
}
.learning-tips h4 {
color: var(--ghibli-brown);
margin-top: 0;
margin-bottom: 10px;
}
.learning-tips h4::before {
content: "💡";
margin-right: 8px;
}
.tip-content {
color: #333;
line-height: 1.6;
}
/* Loading and Error States */
.loading-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
}
.vocabulary-spinner {
width: 80px;
height: 80px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
animation: spin 2s infinite linear;
margin-bottom: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-message p {
color: var(--ghibli-blue);
font-size: 1.1rem;
margin: 0 0 5px 0;
}
.error-message {
background-color: rgba(231, 109, 111, 0.1);
border-left: 4px solid var(--ghibli-accent);
padding: 15px;
border-radius: 8px;
color: #333;
line-height: 1.5;
}
.error-message::before {
content: "⚠️";
margin-right: 10px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.vocabulary-header {
flex-direction: column;
align-items: flex-start;
}
.word-english {
font-size: 1.6rem;
}
.word-relationships {
grid-template-columns: 1fr;
}
.synonym-items, .antonym-items {
grid-template-columns: 1fr;
}
#vocabulary-content .navigation-controls {
padding: 8px;
}
#vocabulary-content .nav-button {
width: 36px;
height: 36px;
}
}
/* Additional Ghibli elements for vocabulary page */
.ghibli-floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.ghibli-floating-elements::before {
content: "";
position: absolute;
width: 30px;
height: 30px;
background-image: url('data:image/svg+xml;utf8,');
top: 10%;
left: 10%;
animation: float 25s infinite alternate ease-in-out;
}
.ghibli-floating-elements::after {
content: "";
position: absolute;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml;utf8,');
top: 40%;
right: 15%;
animation: float 30s 5s infinite alternate-reverse ease-in-out;
}
.vocabulary-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.ghibli-grass-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
z-index: 1;
}
/* Poetry Container Ghibli Style */
#poetry-container {
position: relative;
background-color: var(--ghibli-cream);
border-radius: 15px;
box-shadow: 0 5px 0 var(--ghibli-brown), 0 5px 20px rgba(0,0,0,0.1);
padding: 20px;
overflow: hidden;
}
#poetry-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--ghibli-yellow), var(--ghibli-accent), var(--ghibli-yellow));
z-index: 1;
}
#poetry-container::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
}
/* Poetry Header */
.poetry-header {
background: linear-gradient(to right, var(--ghibli-light-blue), var(--ghibli-blue));
border-radius: 12px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 4px 0 rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
z-index: 1;
}
.poetry-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0.3;
z-index: -1;
}
.poetry-controls {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
z-index: 2;
}
.poetry-selectors {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
width: 100%;
}
.selector-group {
display: flex;
flex-direction: column;
position: relative;
min-width: 120px;
}
.selector-group label {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
margin-bottom: 5px;
font-weight: 500;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.poetry-select {
padding: 8px 12px;
border-radius: 20px;
border: 2px solid white;
background-color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.poetry-select:hover {
border-color: var(--ghibli-yellow);
transform: translateY(-2px);
}
.poetry-select:focus {
outline: none;
border-color: var(--ghibli-accent);
}
.poetry-button {
background-color: var(--ghibli-green);
color: white;
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
margin-left: auto;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
}
.poetry-button::before {
content: "🌸";
margin-right: 6px;
}
.poetry-button:hover {
background-color: var(--ghibli-accent);
transform: translateY(-2px);
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1);
}
.poetry-button:active {
transform: translateY(1px);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
/* Poetry Content */
.poetry-content {
min-height: 300px;
position: relative;
z-index: 1;
}
/* Empty State */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 300px;
padding: 30px 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 12px;
margin-top: 20px;
position: relative;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
border: 2px dashed rgba(93, 158, 122, 0.2);
}
.empty-state::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
z-index: -1;
}
.empty-state h3 {
color: var(--ghibli-blue);
margin-bottom: 10px;
font-size: 1.3rem;
}
.empty-state p {
color: var(--ghibli-brown);
font-size: 1rem;
line-height: 1.6;
max-width: 500px;
}
/* Poem navigation */
.poem-navigation {
display: flex;
align-items: center;
justify-content: center;
margin: 15px 0;
gap: 20px;
}
.poem-nav-button {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--ghibli-light-blue);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}
.poem-nav-button:hover:not(:disabled) {
background-color: var(--ghibli-blue);
transform: translateY(-2px);
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1);
}
.poem-nav-button:disabled {
background-color: #d1d1d1;
cursor: not-allowed;
opacity: 0.7;
box-shadow: none;
}
.poem-counter {
font-size: 0.9rem;
color: var(--ghibli-brown);
background-color: rgba(255, 255, 255, 0.7);
padding: 5px 15px;
border-radius: 20px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* Poem Display */
.poem-display {
background-color: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
margin-top: 20px;
position: relative;
overflow: hidden;
border: 2px dashed rgba(93, 158, 122, 0.2);
animation: fadeIn 0.5s ease;
}
.poem-display::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background: linear-gradient(180deg, rgba(244, 244, 244, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
z-index: 0;
pointer-events: none;
}
.poem-title {
color: var(--ghibli-blue);
font-size: 1.6rem;
margin-bottom: 5px;
text-align: center;
position: relative;
z-index: 1;
}
.poem-title::after {
content: "";
display: block;
width: 60px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--ghibli-accent), transparent);
margin: 10px auto;
}
.poem-author {
color: var(--ghibli-brown);
font-size: 1rem;
text-align: center;
margin-bottom: 20px;
font-style: italic;
position: relative;
z-index: 1;
}
.poem-content {
font-size: 1.1rem;
line-height: 2;
margin: 20px 0;
padding: 15px;
background-color: rgba(253, 246, 227, 0.5);
border-radius: 10px;
position: relative;
z-index: 1;
text-align: center;
}
.poem-section {
margin-top: 25px;
position: relative;
border-radius: 10px;
background-color: white;
padding: 15px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease;
border-left: 4px solid var(--ghibli-light-blue);
}
.poem-section:hover {
transform: translateY(-2px);
}
.poem-section h3 {
color: var(--ghibli-blue);
font-size: 1.1rem;
margin-top: 0;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.poem-section h3::before {
content: "✦";
margin-right: 8px;
color: var(--ghibli-accent);
font-size: 1rem;
}
.poem-background, .poem-explanation {
color: #333;
line-height: 1.7;
font-size: 0.95rem;
}
.poem-line {
margin: 8px 0;
position: relative;
transition: transform 0.2s ease;
}
.poem-line:hover {
transform: translateX(5px);
color: var(--ghibli-blue);
}
/* Loading state */
#poetry-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
}
#poetry-loading .spinner {
width: 70px;
height: 70px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
animation: spin 3s infinite linear;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Add floating elements for Ghibli atmosphere */
.poetry-floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.poetry-floating-elements::before {
content: "";
position: absolute;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml;utf8,');
top: 20%;
left: 15%;
animation: floatPoem 20s infinite alternate ease-in-out;
}
.poetry-floating-elements::after {
content: "";
position: absolute;
width: 25px;
height: 25px;
background-image: url('data:image/svg+xml;utf8,');
top: 40%;
right: 20%;
animation: floatPoem 25s 5s infinite alternate-reverse ease-in-out;
}
@keyframes floatPoem {
0% { transform: translate(0, 0) rotate(0deg); }
20% { transform: translate(10px, -10px) rotate(5deg); }
40% { transform: translate(15px, 5px) rotate(0deg); }
60% { transform: translate(5px, 10px) rotate(-5deg); }
80% { transform: translate(-5px, 5px) rotate(0deg); }
100% { transform: translate(-10px, -5px) rotate(5deg); }
}
/* Responsive adjustments */
@media (max-width: 768px) {
.selector-group {
min-width: 100px;
}
.poetry-selectors {
gap: 8px;
}
.poetry-button {
margin-top: 10px;
width: 100%;
justify-content: center;
}
.poem-title {
font-size: 1.3rem;
}
.poem-content {
font-size: 1rem;
padding: 10px;
}
}
/* Create Container Ghibli Style */
#create-container {
position: relative;
background-color: var(--ghibli-cream);
border-radius: 15px;
box-shadow: 0 5px 0 var(--ghibli-brown), 0 5px 20px rgba(0,0,0,0.1);
padding: 20px;
overflow: hidden;
}
#create-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--ghibli-yellow), var(--ghibli-accent), var(--ghibli-yellow));
z-index: 1;
}
/* Control Panel Styling */
.control-panel {
background: linear-gradient(to right, var(--ghibli-light-blue), var(--ghibli-blue));
border-radius: 12px;
padding: 15px 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
box-shadow: 0 4px 0 rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
}
.control-panel::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--ghibli-accent), transparent, var(--ghibli-accent));
}
.control-panel label {
color: white;
font-size: 0.9rem;
margin-right: 8px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.control-panel select {
padding: 8px 12px;
border-radius: 20px;
border: 2px solid white;
background-color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
min-width: 120px;
transition: all 0.3s ease;
}
.control-panel select:hover {
border-color: var(--ghibli-yellow);
transform: translateY(-2px);
box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}
.control-panel select:focus {
outline: none;
border-color: var(--ghibli-accent);
}
/* Generate and Evaluate Buttons */
#generate-btn, #evaluate-btn {
background-color: var(--ghibli-green);
color: white;
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 3px 0 rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 6px;
}
#generate-btn::before {
content: "📝";
}
#evaluate-btn::before {
content: "✨";
}
#generate-btn:hover, #evaluate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}
#generate-btn:hover {
background-color: var(--ghibli-accent);
}
#evaluate-btn:hover {
background-color: var(--ghibli-blue);
}
#generate-btn:disabled, #evaluate-btn:disabled {
background-color: #d1d1d1;
cursor: not-allowed;
transform: none;
box-shadow: none;
opacity: 0.7;
}
/* Questions Display Container */
.questions-display-container {
background-color: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 3px 0 var(--ghibli-light-green), 0 3px 10px rgba(0,0,0,0.05);
position: relative;
min-height: 300px;
border: 2px dashed rgba(93, 158, 122, 0.2);
}
/* Empty State */
.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--ghibli-brown);
}
.empty-state-icon {
font-size: 3rem;
color: var(--ghibli-light-blue);
margin-bottom: 15px;
animation: float 3s infinite ease-in-out alternate;
}
.empty-state h3 {
color: var(--ghibli-blue);
margin-bottom: 10px;
font-size: 1.3rem;
}
.empty-state p {
color: var(--ghibli-brown);
font-size: 1rem;
line-height: 1.6;
max-width: 500px;
margin: 0 auto;
}
/* Question Display */
.question-counter {
text-align: center;
color: var(--ghibli-brown);
font-size: 0.9rem;
margin-bottom: 15px;
background-color: rgba(253, 246, 227, 0.5);
padding: 5px 15px;
border-radius: 20px;
display: inline-block;
}
.question-text {
background-color: rgba(144, 207, 176, 0.15);
border-left: 3px solid var(--ghibli-green);
padding: 15px;
margin: 15px 0;
border-radius: 0 8px 8px 0;
font-size: 1.1rem;
line-height: 1.6;
}
/* Choices Container */
.choices-container {
display: flex;
flex-direction: column;
gap: 10px;
margin: 20px 0;
}
.choice-item {
position: relative;
padding: 12px 15px;
margin-bottom: 10px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
display: flex;
align-items: flex-start;
}
.choice-item:hover {
transform: translateY(-2px);
border-color: var(--ghibli-blue);
box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
.choice-item.selected {
background-color: var(--ghibli-light-green);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-left: 3px solid var(--ghibli-green);
}
/* Ensure choice content is properly contained */
.choice-item .choice-content {
width: 100%;
overflow: hidden; /* Prevent content overflow */
}
/* Hide answer content that might be in choices */
.choice-item .answer-content,
.choice-item .explanation-content {
display: none !important;
}
/* Answer Container */
.answer-container {
background-color: rgba(253, 246, 227, 0.7);
border-radius: 12px;
padding: 15px;
margin-top: 20px;
border-left: 4px solid var(--ghibli-accent);
}
.answer-result {
font-weight: 500;
color: var(--ghibli-blue);
margin-bottom: 10px;
}
.answer-result.correct {
color: var(--ghibli-green);
}
.answer-result.incorrect {
color: var(--ghibli-accent);
}
.answer-explanation {
color: var(--ghibli-brown);
line-height: 1.6;
font-size: 0.95rem;
}
/* Navigation Controls */
.navigation-controls {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10px;
margin: 15px 0;
position: relative;
width: 100%;
}
.nav-button {
position: relative;
width: 40px;
height: 40px;
background-color: var(--ghibli-light-green);
color: var(--ghibli-dark-green);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.2rem;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.nav-button:hover:not(:disabled) {
background-color: var(--ghibli-blue);
transform: translateY(-2px);
box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}
.nav-button:disabled {
background-color: #d1d1d1;
cursor: not-allowed;
box-shadow: none;
opacity: 0.7;
}
/* Loading State */
.loading-indicator {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
}
.loading-spinner {
width: 60px;
height: 60px;
background-image: url('data:image/svg+xml;utf8,');
animation: spin 2s infinite linear;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.control-panel {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.control-panel select {
width: 100%;
}
#generate-btn, #evaluate-btn {
width: 100%;
justify-content: center;
}
.question-text {
font-size: 1rem;
}
.choices-container {
gap: 8px;
}
}
/* Make sure poetry-display is hidden by default */
#poetry-display {
display: none;
opacity: 0;
transition: opacity 0.5s ease;
}
/* Make sure empty-state is visible by default */
#poetry-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
}
/* Show loading element when needed */
#poetry-loading {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
}
/* When poetry-display needs to be shown */
#poetry-display.active {
display: block;
opacity: 1;
animation: fadeIn 0.8s ease;
}
/* Add Ghibli-styled modal styles */
.about-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--ghibli-cream);
padding: 25px;
border-radius: 15px;
max-width: 500px;
width: 90%;
z-index: 1000;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.about-modal.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.about-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--ghibli-yellow),
var(--ghibli-accent),
var(--ghibli-yellow)
);
border-radius: 15px 15px 0 0;
}
.about-modal-header {
text-align: center;
margin-bottom: 20px;
position: relative;
}
.about-modal-header h2 {
color: var(--ghibli-dark-green);
font-size: 1.8em;
margin-bottom: 10px;
}
.about-modal-content {
line-height: 1.6;
color: #555;
margin-bottom: 20px;
position: relative;
padding: 15px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
}
.about-modal-content p {
margin-bottom: 15px;
}
.about-modal-close {
position: absolute;
top: -10px;
right: -10px;
width: 30px;
height: 30px;
background-color: var(--ghibli-light-green);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--ghibli-dark-green);
font-size: 1.2em;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.about-modal-close:hover {
background-color: var(--ghibli-green);
color: white;
transform: rotate(90deg);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.about-modal-footer {
text-align: center;
color: var(--ghibli-dark-green);
font-size: 0.9em;
margin-top: 20px;
}
/* Add floating elements to modal */
.about-modal-decorations {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
border-radius: 15px;
}
.about-modal-decorations::before,
.about-modal-decorations::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
animation: modalFloat 6s ease-in-out infinite;
}
.about-modal-decorations::before {
top: 20px;
left: 20px;
background-image: url('path-to-your-leaf-image.png');
}
.about-modal-decorations::after {
bottom: 20px;
right: 20px;
background-image: url('path-to-your-flower-image.png');
animation-delay: -3s;
}
@keyframes modalFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(5deg);
}
}
@media (max-width: 768px) {
.about-modal {
width: 95%;
padding: 20px;
}
.about-modal-header h2 {
font-size: 1.5em;
}
}
/* Update modal styling with Ghibli theme */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
.about-modal {
background-color: var(--ghibli-cream);
padding: 30px;
border-radius: 15px;
max-width: 500px;
width: 90%;
position: relative;
transform: translateY(20px) scale(0.95);
opacity: 0;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.about-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--ghibli-yellow),
var(--ghibli-accent),
var(--ghibli-yellow)
);
border-radius: 15px 15px 0 0;
}
.about-modal.active {
transform: translateY(0) scale(1);
opacity: 1;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.about-modal-header {
text-align: center;
margin-bottom: 20px;
}
.about-modal-header h2 {
color: var(--ghibli-dark-green);
font-size: 1.8em;
margin: 0;
padding-bottom: 10px;
position: relative;
}
.about-modal-content {
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
border-radius: 10px;
margin: 15px 0;
line-height: 1.6;
}
.about-modal-content ul {
list-style: none;
padding-left: 20px;
}
.about-modal-content ul li {
position: relative;
padding: 5px 0;
}
.about-modal-content ul li::before {
content: '•';
color: var(--ghibli-accent);
position: absolute;
left: -15px;
top: 5px;
}
.about-modal-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background-color: var(--ghibli-light-green);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--ghibli-dark-green);
font-size: 1.2em;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.about-modal-close:hover {
background-color: var(--ghibli-green);
color: white;
transform: rotate(90deg);
}
.about-modal-footer {
text-align: center;
color: var(--ghibli-dark-green);
font-size: 0.9em;
margin-top: 20px;
opacity: 0.8;
}
/* Add floating decorative elements */
.about-modal-decorations {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.about-modal-decorations::before,
.about-modal-decorations::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.1;
animation: modalFloat 6s ease-in-out infinite;
}
@keyframes modalFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(5deg);
}
}
@media (max-width: 768px) {
.about-modal {
width: 95%;
padding: 20px;
}
.about-modal-header h2 {
font-size: 1.5em;
}
}
/* Update navigation controls layout */
#vocabulary-content .navigation-controls {
position: relative;
width: 100%;
height: 0; /* Remove height to prevent space taking */
margin: 0;
padding: 0;
}
/* Style for side navigation buttons */
#vocabulary-content .nav-button {
position: absolute;
top: 300px; /* Position vertically at mid-page */
width: 40px;
height: 40px;
background-color: var(--ghibli-cream);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 100;
}
/* Position previous button to the left */
#vocabulary-content .nav-button:first-child {
left: 20px;
}
/* Position next button to the right */
#vocabulary-content .nav-button:last-child {
right: 20px;
}
/* Update word counter position to the center of header */
#word-counter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.9rem;
color: var(--ghibli-dark-green);
background-color: var(--ghibli-cream);
padding: 8px 15px;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 10;
}
/* Make sure the vocabulary header is properly positioned for the counter */
.vocabulary-header {
position: relative;
}
/* Media query for mobile responsiveness */
@media (max-width: 768px) {
#vocabulary-content .nav-button {
width: 35px;
height: 35px;
top: 200px; /* Adjust for mobile */
}
#vocabulary-content .nav-button:first-child {
left: 10px;
}
#vocabulary-content .nav-button:last-child {
right: 10px;
}
#word-counter {
font-size: 0.8rem;
padding: 6px 12px;
}
}
/* Hide navigation controls and word counter */
#vocabulary-content .navigation-controls {
display: none;
}
#vocabulary-content .nav-button {
display: none;
}
#word-counter {
display: none;
}
/* Make sure no space is allocated for these elements */
.vocabulary-header {
position: relative;
padding-right: 0;
}
/* Adjust the vocabulary container to account for removed navigation */
.vocabulary-container {
width: 100%;
margin: 0 auto;
}
/* Ensure the word cards flow properly without navigation buttons */
.vocabulary-card-container {
width: 100%;
padding: 0;
}
/* 1. Center qa-container and make it wider */
#qa-container {
width: 95%;
max-width: 1400px;
margin: 20px auto;
background-color: var(--ghibli-cream);
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
padding: 25px;
overflow: hidden;
position: relative;
transition: all 0.3s ease;
}
/* Ensure qa-container is centered regardless of sidebar state */
.left-panel.hidden + .content-area #qa-container {
margin: 20px auto;
}
/* 2. Redesign poetry-header to be more compact */
.poetry-selectors {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-bottom: 15px;
}
.selector-group {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 200px;
max-width: 300px;
}
.selector-group label {
font-size: 0.95rem;
color: var(--ghibli-dark-green);
font-weight: 600;
margin-right: 8px;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.3s ease;
}
.poetry-select {
flex: 1;
padding: 8px 12px;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
color: var(--ghibli-dark-green);
appearance: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* Make poetry container responsive */
.poetry-header {
padding: 15px;
background: linear-gradient(135deg, var(--ghibli-light-blue), var(--ghibli-blue));
border-radius: 12px 12px 0 0;
color: white;
position: relative;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}
.poetry-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0.1;
pointer-events: none;
}
.poetry-controls {
display: flex;
flex-direction: column;
gap: 10px;
}
.poetry-selectors {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-items: center;
}
.selector-group {
display: flex;
align-items: center;
gap: 6px;
min-width: unset;
max-width: unset;
flex: 0 1 auto;
}
.selector-group label {
font-size: 0.85rem;
color: white;
font-weight: 600;
margin: 0;
white-space: nowrap;
}
.poetry-select {
padding: 6px 10px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.2);
font-size: 0.85rem;
color: white;
appearance: none;
cursor: pointer;
transition: all 0.3s ease;
min-width: 120px;
}
.poetry-select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.poetry-button {
margin-top: 5px;
padding: 8px 15px;
background-color: var(--ghibli-green);
color: white;
border: none;
border-radius: 20px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
align-self: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.poetry-button:hover {
background-color: var(--ghibli-dark-green);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Responsive adjustments for mobile */
@media (max-width: 768px) {
#qa-container {
width: 95%;
padding: 15px;
margin: 10px auto;
}
.poetry-selectors {
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.selector-group {
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.selector-group label {
font-size: 0.8rem;
width: 30%;
text-align: left;
}
.poetry-select {
width: 68%;
min-width: unset;
}
.poetry-button {
width: 100%;
margin-top: 10px;
}
}
/* For tablets */
@media (min-width: 769px) and (max-width: 1024px) {
.poetry-selectors {
flex-wrap: wrap;
justify-content: space-between;
}
.selector-group {
flex: 0 0 48%;
}
.poetry-button {
margin-top: 10px;
}
}
/* Side navigation buttons for vocabulary */
.vocabulary-side-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
.vocabulary-side-nav-prev {
left: calc(var(--sidebar-width) + 20px);
transition: left var(--transition-speed) ease;
}
.left-panel.hidden ~ .content-area .vocabulary-side-nav-prev {
left: 20px;
}
.vocabulary-side-nav-next {
right: 20px;
}
.vocabulary-side-nav button {
width: 44px;
height: 44px;
background-color: var(--ghibli-cream);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
font-size: 1.5rem;
color: var(--ghibli-dark-green);
}
.vocabulary-side-nav button:hover:not(:disabled) {
background-color: var(--ghibli-light-green);
transform: scale(1.1);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}
.vocabulary-side-nav button:active:not(:disabled) {
transform: scale(0.95);
}
.vocabulary-side-nav button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Hide original navigation controls */
#vocabulary-content .navigation-controls {
display: none;
}
@media (max-width: 768px) {
.vocabulary-side-nav-prev {
left: 10px;
}
.left-panel.hidden ~ .content-area .vocabulary-side-nav-prev {
left: 10px;
}
.vocabulary-side-nav-next {
right: 10px;
}
.vocabulary-side-nav button {
width: 36px;
height: 36px;
font-size: 1.2rem;
}
}
/* Add animation styles for poem sections */
.poem-section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
margin-bottom: 20px;
}
.poem-section.animate-in {
opacity: 1;
transform: translateY(0);
}
.poem-line {
display: block;
opacity: 0;
transform: translateY(10px);
animation: fadeInUp 0.5s ease forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Add staggered delay to poem lines */
.poem-line:nth-child(1) { animation-delay: 0.1s; }
.poem-line:nth-child(2) { animation-delay: 0.2s; }
.poem-line:nth-child(3) { animation-delay: 0.3s; }
.poem-line:nth-child(4) { animation-delay: 0.4s; }
.poem-line:nth-child(5) { animation-delay: 0.5s; }
.poem-line:nth-child(6) { animation-delay: 0.6s; }
.poem-line:nth-child(7) { animation-delay: 0.7s; }
.poem-line:nth-child(8) { animation-delay: 0.8s; }
.poem-line:nth-child(9) { animation-delay: 0.9s; }
.poem-line:nth-child(10) { animation-delay: 1.0s; }
.poem-line:nth-child(n+11) { animation-delay: 1.1s; }
/* 1. Center poetry container regardless of sidebar state */
#poetry-container {
width: 90%;
max-width: 1200px;
margin: 20px auto;
background-color: var(--ghibli-cream);
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
/* Make sure container is centered even when sidebar is collapsed */
.left-panel.hidden + .content-area #poetry-container {
margin: 20px auto;
}
/* 2. Change dropdown font color to black in poetry header */
.poetry-select {
color: #000; /* Set font color to black */
background-color: rgba(255, 255, 255, 0.7); /* Slightly more opaque background for better contrast */
border: 1px solid rgba(255, 255, 255, 0.8);
padding: 8px 12px;
border-radius: 8px;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Make sure the dropdown options are also black */
.poetry-select option {
color: #000;
background-color: white;
}
/* Make sure the dropdown is still clearly interactive */
.poetry-select:hover, .poetry-select:focus {
border-color: var(--ghibli-light-green);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
background-color: white;
}
/* Re-arrange labels and dropdowns in poetry header */
.poetry-header {
padding: 15px;
background: linear-gradient(135deg, var(--ghibli-light-blue), var(--ghibli-blue));
border-radius: 12px 12px 0 0;
color: white;
position: relative;
overflow: hidden;
}
.poetry-selectors {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
.selector-group {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 200px;
max-width: 300px;
}
.selector-group label {
font-size: 0.9rem;
color: white;
font-weight: 600;
margin: 0;
white-space: nowrap;
flex: 0 0 auto;
width: auto;
text-align: right;
}
.poetry-select {
flex: 1;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.7);
color: #000;
font-size: 0.9rem;
appearance: none;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.poetry-select:hover, .poetry-select:focus {
border-color: var(--ghibli-light-green);
background-color: white;
}
.poetry-button {
margin-top: 10px;
padding: 8px 20px;
align-self: center;
}
/* Adjust responsive layout */
@media (max-width: 768px) {
.selector-group {
flex-direction: row;
width: 100%;
max-width: 100%;
}
.selector-group label {
width: 30%;
text-align: right;
font-size: 0.85rem;
}
.poetry-select {
width: 70%;
}
}
/* Center create-container regardless of sidebar state */
#create-container {
width: 90%;
max-width: 1200px;
margin: 20px auto;
background-color: var(--ghibli-cream);
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
/* Ensure create container is centered when sidebar is collapsed */
.left-panel.hidden + .content-area #create-container {
margin: 20px auto;
}
/* Center navigation controls bar */
.navigation-controls {
width: 100%;
max-width: 1000px;
margin: 15px auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
position: relative;
background-color: var(--ghibli-light-blue);
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Position question counter in center */
.question-counter {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: var(--ghibli-cream);
color: var(--ghibli-dark-green);
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 2;
}
/* Style navigation buttons */
.nav-button {
background-color: var(--ghibli-light-green);
color: var(--ghibli-dark-green);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 1;
}
.nav-button:hover:not(:disabled) {
background-color: var(--ghibli-green);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.nav-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Responsive adjustments */
@media (max-width: 768px) {
#create-container {
width: 95%;
margin: 10px auto;
}
.navigation-controls {
padding: 8px 15px;
}
.question-counter {
font-size: 0.8rem;
padding: 6px 12px;
}
}
/* Center navigation-controls within create-container */
.navigation-controls {
width: 90%;
max-width: 1000px;
margin: 15px auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
position: relative;
background-color: var(--ghibli-light-blue);
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
left: 0;
right: 0;
}
/* Fix create-container to ensure proper centering */
#create-container {
width: 90%;
max-width: 1200px;
margin: 20px auto;
background-color: var(--ghibli-cream);
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
padding: 20px;
transition: all 0.3s ease;
}
/* Ensure create container is centered when sidebar is collapsed */
.left-panel.hidden + .content-area #create-container {
margin: 20px auto;
}
/* Style question counter in center */
.question-counter {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: var(--ghibli-cream);
color: var(--ghibli-dark-green);
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 2;
}
/* Responsive adjustments */
@media (max-width: 768px) {
#create-container {
width: 95%;
padding: 15px;
margin: 10px auto;
}
.navigation-controls {
width: 95%;
padding: 8px 15px;
margin: 10px auto;
}
.question-counter {
font-size: 0.8rem;
padding: 6px 12px;
}
}
/* Add a more specific selector for create container navigation controls */
#create-container .navigation-controls {
width: 90%;
max-width: 1200px;
margin: 15px auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
position: relative;
/*background-color: var(--ghibli-light-blue);*/
background-color: transparent;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/* Remove any absolute positioning or offsets */
left: auto;
right: auto;
top: auto;
bottom: auto;
transform: none;
/* Prevent inheritance from other navigation-controls selectors */
float: none;
}
/* Make sure create container has proper positioning context */
#create-container {
width: 90%;
max-width: 1200px;
margin: 20px auto;
background-color: var(--ghibli-cream);
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
/* Important for child positioning */
position: relative;
/* Ensure proper containment of children */
overflow: visible;
padding: 20px;
transition: all 0.3s ease;
/* Make sure it's centered regardless of sidebar */
left: 0;
right: 0;
}
/* Specificity override for any conflicting rules */
html body .content-area #create-container .navigation-controls {
margin-left: auto !important;
margin-right: auto !important;
left: 0 !important;
right: 0 !important;
position: relative !important;
}
/* Ensure create container is centered when sidebar is collapsed */
.left-panel.hidden + .content-area #create-container {
margin: 20px auto;
}
/* Center question counter in navigation controls */
#create-container .question-counter {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: var(--ghibli-cream);
color: var(--ghibli-dark-green);
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 2;
}
/* Responsive adjustments */
@media (max-width: 768px) {
#create-container {
width: 95%;
padding: 15px;
margin: 10px auto;
}
#create-container .navigation-controls {
width: 95%;
padding: 8px 15px;
margin: 10px auto;
}
}
.navigation-controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.question-counter {
margin: 0 15px;
font-weight: bold;
}