:root { --accent-dark: #8b0000; /* darkred */ --accent-dark-hover: #6a0000; --btn-shadow: rgba(0, 0, 0, 0.18); --header-grad-left: #4a4a4a; --header-grad-right: #cfcfcf; --nav-grad-left: #0d47a1; --nav-grad-right: #64b5f6; --max-width: 1400px; --container-pad: 16px; --bar-h: clamp(24px, 8vw, 54px); } body { font-family: Georgia, serif; background-color: #fdfdfd; color: #333; margin: 0; padding: 0; } /* Fundal: alege una din clasele de pe body: .bg-gradient sau .bg-image */ body.bg-gradient { background: linear-gradient(90deg, var(--grad-start), var(--grad-end)); } body.bg-image { /* Layer 1: overlay subtil pentru lizibilitate; Layer 2: imagine */ background-image: linear-gradient(90deg, color-mix(in srgb, var(--grad-start) 40%, transparent), color-mix(in srgb, var(--grad-end) 40%, transparent)), var(--bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; } :root { /* Culori gradient implicite: roșu deschis -> galben (stânga -> dreapta) */ --grad-start: #a1c4fd; --grad-end: #c2e9fb; /* Suport imagine de fundal (setezi pe ) */ --bg-image: none; /* Stilizare nume */ --name-color: #1b1b1b; --name-shadow: 0 8px 30px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .15); --name-stroke: rgba(255, 255, 255, .55); } main { /* Va asigura un spațiu de 2rem deasupra întregului conținut principal */ padding-top: 2rem; } /* ----- HEADER ----- */ .site-header { background-color: #F5EACD; width: 100%; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--max-width); /* Limitează lățimea pe ecrane mari */ margin: 0 auto; /* Centrează-l */ padding-inline: clamp(12px, 4vw, 24px); /* Fluid padding */ padding-block: 15px; /* Păstrăm padding-ul vertical */ } .brand { display: flex; align-items: center; } .logo { width: 140px; height: auto; /* Foarte important, asigură scalarea corectă */ } /* Conținut: istorioare + galerie */ .content, .panel--timeline { backdrop-filter: blur(2px); background: color-mix(in srgb, #ffffff 50%, transparent); border-radius: 16px; margin: 0 auto 2rem; padding: clamp(16px, 3vw, 28px); width: min(1350px, 92vw); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); } .content h2, .panel--timeline h2 { font-family: "Amoresa", serif; margin: 0 0 1.5rem; font-size: clamp(1.6rem, 3.2vw, 2.4rem); } .panel { display: grid; grid-template-rows: auto 2fr; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, #ffffff 50%, transparent); border: 1px solid #ffffff88; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); max-block-size: calc(100dvh - var(--bar-h) - 2rem); min-block-size: min(70dvh, 800px); padding: clamp(16px, 3vw, 28px); } .panel__header h2 { font-family: 'Pacifico', "Amoresa", "Playfair Display", serif; margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.4rem) } .panel__scroller { overflow: auto; overscroll-behavior: auto; scrollbar-gutter: stable; } /* Compensăm spațiul lăsat liber de secțiunea "hero" */ .panel--timeline { margin-top: 2rem; } .panel--contact .form-group { margin-bottom: 15px; } .panel--contact .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .panel--contact .form-group input, .panel--contact .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } .panel--contact .form-group textarea { resize: vertical; } /* Adăugăm stiluri specifice pentru Timeline */ .timeline { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 1rem; } .timeline-event { padding: 1rem 1.2rem; background: #ffffffcc; border: 1px solid #ffffff88; border-radius: 12px; box-shadow: 0 6px 14px rgba(0, 0, 0, .08); } .timeline-event h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--accent-dark); } .timeline-event p { margin: 0; line-height: 1.5; } .stories { display: grid; gap: 1rem; margin: 1rem 0 2rem; } .split { width: min(1400px, 92vw); margin: 0 auto 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2.5vw, 24px) } .story { padding: 1rem 1.2rem; background: #ffffffcc; border: 1px solid #ffffff88; border-radius: 12px; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .gallery img { position: relative; width: 100%; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 14px rgba(0, 0, 0, .12); transition: transform .2s ease, box-shadow .2s ease; cursor: zoom-in; } .gallery img:hover { transform: scale(1.03); box-shadow: 0 12px 24px rgba(0, 0, 0, .18); } .gallery img::after { content: attr(data-caption); position: absolute; bottom: 6px; left: 6px; right: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.85rem; padding: 4px 6px; border-radius: 6px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .gallery img:hover::after { opacity: 1; } .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .82); display: none; align-items: center; justify-content: center; z-index: 1000; } .lightbox.open { display: flex; } .lightbox__content { position: relative; max-width: 92vw; max-height: 86vh; display: grid; grid-template-rows: 1fr auto auto; gap: .6rem; text-align: center; } .lightbox__img { max-width: 92vw; max-height: 80vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: transform 0.3s ease; } .lightbox__caption { color: #f3f3f3; text-align: center; font: 500 .95rem/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; opacity: .95; margin-top: 0.5rem; } .lightbox__img:hover { transform: scale(1.05); transition: transform 0.3s ease; } .lightbox__indicator { color: #ccc; font-size: 0.85rem; } .lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; background: #ffffff22; color: #fff; border: 1px solid #ffffff44; backdrop-filter: blur(4px); width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; } .lightbox__close { top: 12px; right: 12px; } .lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); } .lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); } .lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: #ffffff33; } /* Stil pentru numele din bara de navigare */ .nav-name { font-family: "Last Chronicle", serif; font-size: clamp(2.2rem, 6vw, 2.9rem); color: yellow; text-shadow: var(--name-shadow); -webkit-text-stroke: 6px var(--name-stroke); margin: 0; letter-spacing: 0.10em; flex: 2; /* Ocupă mai mult spațiu decât butoanele */ text-align: center; } /* Stil pentru titlu, care se va redimensiona automat */ .site-title { text-align: center; flex: 1; /* Permite titlului să ocupe spațiul disponibil */ white-space: nowrap; /* Împiedică "Zece frați, Zece destine" să se rupă pe mai multe linii */ min-width: 0; /* Permite titlului să se micșoreze sub conținutul său */ padding: 0 10px; } .site-title h1, .site-title .main-heading { font-family: 'Akronim', cursive; font-size: clamp(2.9em, 8vw, 3.9em); /* Folosim clamp() pentru a redimensiona fontul fluid */ margin: 0; /* Am șters margin: 10px */ letter-spacing: 0.20em; color: darkred; } .site-title h2, h3 { font-size: clamp(1.2em, 3vw, 2.0em); /* Se va micșora proporțional */ margin: 0; color: darkred; text-shadow: var(--name-shadow); -webkit-text-stroke: 6px var(--name-stroke); letter-spacing: 0.16em; } /*-----------------*/ .name-bar { position: sticky; top: max(0px, env(safe-area-inset-top)); z-index: 998; height: var(--bar-h); display: grid; align-items: center; background: color-mix(in srgb, #ffffff 85%, transparent); backdrop-filter: blur(.6px); border-bottom: 1px solid #00000014; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); transition: opacity .2s ease, transform .2s ease; } .name-bar__inner { width: 100%; display: grid; place-items: center; padding: 0 clamp(12px, 3vw, 24px) } .name-bar__text { font-family: "Akronim", "Playfair Display", serif; font-size: clamp(2.6rem, 4vw, 3.3rem); font-weight: bold; line-height: 1.21; letter-spacing: .08em; margin-top: 20px; color: var(--name-color); text-shadow: var(--name-shadow); -webkit-text-stroke: 1px var(--name-stroke) } body.at-top .name-bar { opacity: 0; transform: translateY(-8px); pointer-events: none } /*-----------------------------*/ /* ----- NAV ----- */ nav.top-nav { position: sticky; top: 0; left: 0; width: 100%; background: linear-gradient(to right, var(--nav-grad-left), var(--nav-grad-right)); border-bottom: 2px solid rgba(0, 0, 0, 0.1); z-index: 999; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--max-width); /* Limitează lățimea */ margin: 0 auto; /* Centrează-l */ padding-inline: clamp(12px, 4vw, 24px); /* Fluid padding */ padding-block: 10px; /* Păstrăm padding-ul vertical */ } /* Corectăm problema cu butoanele care nu se micșorează */ .nav-links { flex: 1; display: flex; gap: 20px; /* Reducem spațiul */ list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; justify-content: flex-start; } /* Linkurile la stânga */ .nav-links li { position: relative; } .nav-links li a { display: block; background: var(--accent-dark); color: yellow; padding: 5px 15px; border-radius: 8px; text-decoration: none; font-family: 'Akronim', sans-serif; font-size: 28px; font-weight: 700; box-shadow: 0 6px 12px var(--btn-shadow); transition: transform .12s ease, background-color .2s ease; min-width: 100px; text-align: center; min-width: auto; /* Anulăm min-width pentru a le permite să se micșoreze */ white-space: nowrap; /* Asigură că textul nu se rupe pe mai multe linii */ } .nav-links li a:hover { background: var(--accent-dark-hover); transform: scale(1.04); } .submenu { display: none; position: absolute; top: 100%; left: 0; background: #fff; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); padding: 8px 0; list-style: none; min-width: 160px; z-index: 1001; } .submenu li a { background: #fff; color: #333; padding: 10px 16px; display: block; text-align: left; min-width: 140px; box-shadow: none; transition: background-color 0.2s ease; } .submenu li a:hover { background-color: #fff; color: var(--accent-dark); transform: none; } .has-submenu:hover > .submenu { display: block; } .submenu-level2 { display: none; position: absolute; top: 0; left: 100%; background: #fff; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); padding: 8px 0; list-style: none; min-width: 160px; z-index: 1002; } .has-submenu-level2:hover > .submenu-level2 { display: block; } /* Search box în mijloc */ .search-box { flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; } .search-box input { padding: 8px 12px; border-radius: 8px; border: 0; outline: 0; min-width: 200px; } .search-box button { background: var(--accent-dark); color: #fff; border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer; box-shadow: 0 6px 12px var(--btn-shadow); transition: transform .12s ease; } .search-box button:active { transform: scale(0.96); } /* Selector limbă în dreapta */ .language-selector { flex: 1; display: flex; justify-content: flex-end; } .language-selector select { padding: 8px 12px; border-radius: 8px; border: 1px solid #ccc; font-size: 14px; } .version-switcher { display: inline-flex; justify-content: flex-start; align-items: center; gap: 6px; font-size: 0.9rem; color: #333; } .version-switcher select { padding: 4px 8px; border-radius: 4px; border: 1px solid #ccc; background: #fff; cursor: pointer; } .version-switcher select:focus { outline: 2px solid #007bff; /* sau culoarea brandului tău */ } /* Stiluri pentru butonul "Adaugă o istorioară" */ .panel__actions { padding-top: 1rem; text-align: center; } .add-story-btn { background-color: var(--accent-dark); color: yellow; padding: 10px 20px; border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 12px var(--btn-shadow); transition: transform .12s ease, background-color .2s ease; } .add-story-btn:hover { background-color: var(--accent-dark-hover); transform: scale(1.05); } /* Stiluri pentru modal (pop-up) */ .story-modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; } .story-modal-content { background-color: #fff; padding: 30px; border-radius: 12px; width: min(90%, 600px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); position: relative; animation: fadeIn 0.3s ease-out; } .story-modal-close { color: #aaa; position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; cursor: pointer; } .story-modal-close:hover { color: #333; } .story-modal h2 { font-family: "Amoresa", serif; font-size: 2rem; margin-bottom: 20px; text-align: center; } /* Stiluri pentru titlul istorioarei din formularul adăugat */ .story h3 { font-size: clamp(0.3rem, 1.3vw, 1.0rem); /* Ajustează dimensiunea titlului */ font-family: 'Georgia', serif; /* Alege un font mai simplu, în ton cu restul textului */ margin-bottom: 0.5rem; /* Adaugă un spațiu mai mic sub titlu */ color: #444; /* Îl faci un pic mai deschis pentru a nu fi la fel de "agresiv" ca textul */ text-align: left; /* Aliniază-l la stânga, pentru o citire mai naturală */ } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } .form-group textarea { resize: vertical; } .submit-story-btn { width: 100%; padding: 12px; background-color: var(--accent-dark); color: yellow; border: none; border-radius: 8px; font-size: 18px; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, transform 0.12s ease; } .submit-story-btn:hover { background-color: var(--accent-dark-hover); transform: scale(1.02); } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* MOBILE MENU BUTTON */ .mobile-toggle { display: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 8px; color: #fff } .scrolled nav.top-nav { background: rgba(13, 71, 161, 0.9); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } @media (max-width: 980px) { .mobile-toggle { display: inline-block; } .nav-inner { flex-direction: column; gap: 10px; } .nav-links { display: none; order: 2; text-align: center; flex-direction: row; } .language-selector { order: 4; } .news-ticker { order: 3; width: 100%; margin-top: 10px; } .nav-links li { width: 100%; text-align: center; flex-direction: column; } .submenu { position: static; width: 100%; margin-top: 8px; } } /* Stiluri pentru a nu mai suprapune logo-urile pe mobil */ @media (max-width: 768px) { .header-inner { flex-direction: column; /* Pe ecrane mici, elementele se așează pe verticală */ } .site-title { order: -1; /* Mută titlul în partea de sus pe mobil */ } .logo { width: 100px; /* Logo-uri mai mici pe mobil */ } } footer { background-color: #ccc; text-align: center; padding: 10px; font-size: 1.1em; flex-direction: row; }