/* ============================================================
VALLE TERA — valletera.css
Fuentes: Playfair Display (títulos) + Source Sans 3 (cuerpo)
Para cargar en Django: {% load static %}
============================================================ */
/* Google Fonts — añadir en base.html ANTES de este CSS:
*/
/* ── Variables ─────────────────────────────────────────────── */
:root {
--vt-green: #2d5a27;
--vt-green-mid: #4a7c42;
--vt-green-lite: #e8f0e6;
--vt-stone: #8b7355;
--vt-cream: #f7f4ef;
--vt-dark: #1a1f1a;
--vt-text: #2e342e;
--vt-muted: #6b7560;
--vt-accent: #c0392b;
--vt-nav-bg: #2d5a27;
--vt-nav-height: 64px;
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--shadow-soft: 0 4px 24px rgba(0,0,0,.10);
--shadow-card: 0 2px 12px rgba(0,0,0,.08);
--transition: .25s ease;
}
/* ── Reset / Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-weight: 400;
color: var(--vt-text);
background: var(--vt-cream);
line-height: 1.75;
font-size: 1.05rem;
}
img { max-width: 100%; height: auto; }
a {
color: var(--vt-green);
text-decoration: none;
transition: color var(--transition);
}
a:hover { color: var(--vt-accent); }
/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--vt-dark);
line-height: 1.25;
margin-bottom: .6em;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 400; font-style: italic; }
p { margin-bottom: 1.15rem; }
article h1 {
position: relative;
padding-bottom: .5rem;
margin-top: 2.5rem;
margin-bottom: 1.2rem;
}
article h1::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 56px; height: 3px;
background: var(--vt-green);
border-radius: 2px;
}
/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
background-color: var(--vt-nav-bg) !important;
min-height: var(--vt-nav-height);
padding-top: 0; padding-bottom: 0;
box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.navbar-brand {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
color: #fff !important;
letter-spacing: .02em;
}
.navbar-brand img { border-radius: var(--radius-sm); }
.navbar .nav-link {
font-family: var(--font-body);
font-weight: 600;
font-size: .88rem;
text-transform: uppercase;
letter-spacing: .06em;
color: rgba(255,255,255,.88) !important;
padding: .5rem .8rem;
transition: color var(--transition);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: #fff !important; }
.navbar .dropdown-menu {
background: #fff;
border: none;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
padding: .5rem 0;
min-width: 210px;
}
.navbar .dropdown-item {
font-size: .9rem;
padding: .5rem 1.2rem;
color: var(--vt-text);
transition: background var(--transition), color var(--transition);
}
.navbar .dropdown-item:hover {
background: var(--vt-green-lite);
color: var(--vt-green);
}
.navbar .dropdown-item.disabled { opacity: .45; }
/* ── Hero / Jumbotron ───────────────────────────────────────── */
.jumbotron {
position: relative;
padding: 5rem 3rem;
border-radius: var(--radius-lg);
overflow: hidden;
background-color: var(--vt-green);
background-size: cover;
background-position: center;
margin-bottom: 2rem;
}
.jumbotron::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(20,45,18,.72) 0%,
rgba(20,45,18,.35) 60%,
rgba(20,45,18,.55) 100%);
}
.jumbotron > * { position: relative; z-index: 1; }
.jumbotron .display-4 {
font-family: var(--font-display);
color: #fff;
text-shadow: 0 2px 20px rgba(0,0,0,.4);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
}
.jumbotron .lead {
color: rgba(255,255,255,.9);
font-size: 1.2rem;
font-style: italic;
font-family: var(--font-display);
}
.jumbotron p { color: rgba(255,255,255,.9); }
.jumbotron hr { border-color: rgba(255,255,255,.3); }
/* Pills nav inside jumbotron */
.jumbotron .nav-pills .nav-link {
background: rgba(255,255,255,.18);
backdrop-filter: blur(8px);
color: #fff;
border-radius: 50px;
font-size: .82rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
padding: .4rem 1rem;
border: 1px solid rgba(255,255,255,.25);
transition: background var(--transition), border-color var(--transition);
white-space: nowrap;
}
.jumbotron .nav-pills .nav-link:hover,
.jumbotron .nav-pills .nav-link.active {
background: rgba(255,255,255,.35);
border-color: rgba(255,255,255,.6);
}
/* ── Carousel ───────────────────────────────────────────────── */
.carousel {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.carousel-item img {
height: 480px;
object-fit: cover;
width: 100%;
}
.carousel-caption {
background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
bottom: 0; left: 0; right: 0;
padding: 2rem 2rem 1.5rem;
text-align: left;
}
.carousel-caption h4 {
font-family: var(--font-display);
font-size: 1.3rem;
color: #fff;
margin-bottom: .25rem;
}
.carousel-caption p {
color: rgba(255,255,255,.8);
font-size: .9rem;
margin: 0;
}
.carousel-indicators [data-bs-slide-to] {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(255,255,255,.5);
border: none;
}
.carousel-indicators .active { background: #fff; }
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
/* ── Article / Content ──────────────────────────────────────── */
article {
padding: 2rem 0;
border-bottom: 1px solid #ddd5c8;
}
article:last-of-type { border-bottom: none; }
article p img {
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
max-width: 220px;
}
article p img.float-start { margin: 0 1.5rem 1rem 0; }
article p img.float-end { margin: 0 0 1rem 1.5rem; }
article strong { color: var(--vt-green); }
/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar-card {
background: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: 1rem;
margin-bottom: 1.5rem;
}
.sidebar-card .nav-link.active {
background: var(--vt-green);
border-radius: var(--radius-sm);
font-size: .82rem;
font-weight: 600;
}
/* ── iframes (PDFs) ─────────────────────────────────────────── */
.pdf-section {
margin: 2rem 0;
}
.pdf-section h1 {
font-size: 1.4rem;
margin-bottom: .6rem;
}
.pdf-section iframe {
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
border: none;
width: 100%;
min-height: 500px;
}
/* ── Footer ─────────────────────────────────────────────────── */
#footer-bar {
background: var(--vt-green);
color: rgba(255,255,255,.85);
padding: 1rem 2rem;
font-size: .85rem;
}
#footer-bar a { color: rgba(255,255,255,.75); }
#footer-bar a:hover { color: #fff; }
#footer-bar .tagline {
font-family: var(--font-display);
font-style: italic;
font-size: .95rem;
color: rgba(255,255,255,.6);
}
/* ── Layout columns ─────────────────────────────────────────── */
.main-content { padding: 0 1.5rem; }
@media (max-width: 991px) {
.main-content { padding: 0 .5rem; }
.jumbotron { padding: 3rem 1.5rem; }
article p img { max-width: 140px; }
.carousel-item img { height: 280px; }
}
@media (max-width: 575px) {
.jumbotron { border-radius: var(--radius-md); padding: 2.5rem 1rem; }
article p img { float: none !important; display: block; margin: 0 auto 1rem; max-width: 100%; }
.carousel-item img { height: 220px; }
}
/* ── Utility ────────────────────────────────────────────────── */
.text-green { color: var(--vt-green) !important; }
.bg-cream { background-color: var(--vt-cream) !important; }
.badge-vt {
background: var(--vt-green-lite);
color: var(--vt-green);
font-size: .78rem;
font-weight: 600;
padding: .3em .75em;
border-radius: 50px;
letter-spacing: .04em;
}
.gallery-item {
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}