/* Fonts carregades amb al de cada pàgina (no per @import, que bloqueja el render) */ /* ─── Tokens ─────────────────────────────── */ :root { /* Brand colours (from logo) */ --teal: #2BB5A0; --teal-dark: #1E8F7D; --teal-light: #52CDB8; --teal-subtle: rgba(43,181,160,0.08); --orange: #D4714E; --orange-dark: #B05A3C; --orange-light:#E8956F; --orange-subtle: rgba(212,113,78,0.08); /* Neutrals */ --cream: #F7F3ED; --sand: #EDE7DD; --ink: #111111; --ink-soft: #282828; --muted: #7A746C; --line: #E2DAD0; --white: #FFFFFF; --f-display: 'Playfair Display', Georgia, serif; --f-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --f-literary:'Lora', Georgia, serif; --w-full: 1200px; --w-read: 720px; --nav-h: 56px; --nav-top: 1rem; --r: 6px; --r-lg: 12px; --r-pill: 999px; /* radi unic per a botons i controls */ --sh-sm: 0 1px 4px rgba(0,0,0,0.06); --sh-md: 0 4px 20px rgba(0,0,0,0.1); --sh-lg: 0 20px 60px rgba(0,0,0,0.18); --sh-nav: 0 8px 32px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.18); --ease: cubic-bezier(0.4,0,0.2,1); } /* ─── Reset ──────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--nav-top) + 1.5rem); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--f-body); color: var(--ink-soft); background: var(--white); line-height: 1.7; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: var(--orange-dark); text-decoration: none; transition: color .2s; } a:hover { color: var(--orange); } /* ─── Typography ─────────────────────────── */ h1,h2,h3,h4 { font-family: var(--f-display); line-height: 1.08; color: var(--ink); letter-spacing: -0.02em; } h1 { font-size: clamp(2.8rem,6vw,5rem); font-weight: 900; } h2 { font-size: clamp(2rem,4vw,3rem); font-weight: 700; } h3 { font-size: clamp(1.15rem,2vw,1.45rem); font-weight: 700; } h4 { font-size: 1rem; font-weight: 600; letter-spacing: 0; } p { margin-bottom: 1rem; } .text-orange { color: var(--orange); } .text-muted { color: var(--muted); } .text-center { text-align: center; } .literary-quote { position: relative; isolation: isolate; overflow: hidden; font-family: var(--f-literary); font-style: italic; font-size: 1.25rem; line-height: 1.75; color: var(--ink-soft); background: var(--cream); padding: 2.6rem 2.4rem 1.8rem; margin: 2.5rem 0; border-radius: var(--r-lg); box-shadow: var(--sh-sm); } .literary-quote::before { content: '\201D'; /* cometa de tancament com a filigrana */ position: absolute; z-index: -1; top: -1.6rem; left: .9rem; font-family: var(--f-display); font-size: 10rem; line-height: 1; color: var(--orange); opacity: .12; pointer-events: none; } .literary-quote cite { display: block; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .8rem; font-style: normal; color: var(--muted); font-family: var(--f-body); } @media (max-width: 640px) { .literary-quote { font-size: 1.1rem; padding: 2rem 1.4rem 1.4rem; } .literary-quote::before { font-size: 7rem; top: -1.1rem; } } /* ─── Quote grid · citacions (masonry per columnes) ─── */ .quote-grid { column-width: 300px; column-gap: 1.4rem; max-width: 1000px; margin: 0 auto; } .quote-card { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 1.4rem; background: var(--white); border-left: 3px solid var(--orange); border-radius: var(--r-lg); padding: 1.4rem 1.5rem; font-family: var(--f-literary); font-style: italic; color: var(--ink-soft); line-height: 1.6; box-shadow: var(--sh-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .quote-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); } .quote-card cite { display: block; margin-top: .8rem; font-style: normal; font-size: .8rem; color: var(--muted); letter-spacing: .3px; } /* ─── Article (prosa) ────────────────────── */ .article-body { font-family: var(--f-literary); font-size: 1.1rem; line-height: 1.85; color: var(--ink-soft); } .article-body p { margin-bottom: 1.2rem; } .article-body h2 { margin: 2.2rem 0 1rem; } .article-body blockquote { border-left: 2px solid var(--orange); padding: .4rem 1.4rem; margin: 1.6rem 0; color: var(--muted); font-style: italic; } .article-credit { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .95rem; color: var(--muted); } /* ─── Layout ─────────────────────────────── */ .container { max-width: var(--w-full); margin: 0 auto; padding: 0 2rem; } .container--narrow { max-width: var(--w-read); margin: 0 auto; padding: 0 2rem; } .section { padding: 6rem 0; } .section--cream { background: var(--cream); position: relative; overflow: hidden; } .section--white { background: var(--white); } .section--dark { background: var(--ink); color: var(--cream); } .section--dark h2, .section--dark h3 { color: var(--white); } /* Subtle grain on cream sections */ .section--cream::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.022; pointer-events: none; z-index: 0; } .section--cream > * { position: relative; z-index: 1; } /* ─── Navigation — Transparent over hero, frosted on scroll ─── */ .nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 92px; background: transparent; border-bottom: 1px solid transparent; z-index: 1000; transition: background .35s var(--ease), border-color .35s, box-shadow .35s, backdrop-filter .35s; } .nav.scrolled { background: rgba(247,243,237,0.82); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-bottom-color: rgba(0,0,0,0.06); box-shadow: 0 1px 24px rgba(0,0,0,0.04); } .nav__inner { max-width: var(--w-full); margin: 0 auto; padding: 0 2rem; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Logo image */ .nav__logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; height: 100%; } .nav__logo:hover { color: inherit; } .nav__logo-img { height: 64px; width: auto; display: block; /* Subtle white drop-shadow for legibility against dark hero overlay */ filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)) drop-shadow(0 0 10px rgba(255,255,255,0.2)); transition: filter .35s var(--ease); } .nav.scrolled .nav__logo-img { filter: none; } .nav__links { display: flex; list-style: none; gap: 0; align-items: center; } .nav__links a { position: relative; display: block; font-size: .82rem; font-weight: 500; letter-spacing: .2px; color: rgba(255,255,255,0.82); padding: .4rem .15rem; margin: 0 .75rem; white-space: nowrap; transition: color .25s var(--ease); } /* Subratllat animat (indicador de marca) en lloc de píndola */ .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--orange); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .3s var(--ease); } .nav__links a:hover { color: var(--white); } .nav__links a:hover::after { transform: scaleX(1); } .nav__links a.active { color: var(--white); font-weight: 600; } .nav__links a.active::after { transform: scaleX(1); } .nav__cta { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; letter-spacing: .2px; color: var(--white); background: var(--orange); padding: .55rem 1.25rem; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; transition: background .2s, transform .2s, box-shadow .2s; } .nav__cta:hover { background: var(--orange-dark); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(176,90,60,0.3); } /* Scrolled state — dark text over frosted cream */ .nav.scrolled .nav__links a { color: var(--muted); } .nav.scrolled .nav__links a:hover { color: var(--ink); } .nav.scrolled .nav__links a.active { color: var(--ink); } .nav__hamburger { display: none; background: rgba(255,255,255,0.1); border: none; border-radius: 8px; cursor: pointer; padding: .45rem .55rem; gap: 4px; flex-direction: column; align-items: center; flex-shrink: 0; } .nav.scrolled .nav__hamburger { background: rgba(0,0,0,0.05); } .nav__hamburger span { display: block; width: 18px; height: 1.5px; background: var(--white); border-radius: 2px; transition: .22s var(--ease); } .nav.scrolled .nav__hamburger span { background: var(--ink); } /* ─── Hero ───────────────────────────────── */ .hero { position: relative; min-height: 100svh; min-height: 100vh; display: flex; align-items: flex-end; justify-content: flex-start; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(0.42) sepia(18%); transform-origin: center; animation: kenburns 26s ease-in-out infinite alternate; } @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 175deg, rgba(8,8,8,0.18) 0%, rgba(8,8,8,0.55) 45%, rgba(8,8,8,0.88) 100% ); z-index: 1; } .hero__content { position: relative; z-index: 2; text-align: left; padding: 7rem 6vw; max-width: min(720px, 90vw); width: 100%; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .68rem; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 1.8rem; } .hero__eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--orange); opacity: .8; } .hero h1 { color: var(--white); font-size: clamp(3.2rem,8vw,6.5rem); margin-bottom: .5rem; text-shadow: 0 2px 32px rgba(0,0,0,0.5); line-height: 0.96; } .hero__subtitle { font-family: var(--f-literary); font-style: italic; color: rgba(255,255,255,0.55); font-size: clamp(1rem,2vw,1.2rem); margin-bottom: 2.8rem; margin-top: .6rem; } .hero__quote { font-family: var(--f-literary); font-style: italic; color: rgba(255,255,255,0.6); font-size: clamp(.88rem,1.6vw,1rem); line-height: 1.85; max-width: 480px; margin: 0 0 2.8rem; padding: 1.2rem 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); } .hero__quote cite { display: block; margin-top: .6rem; font-style: normal; font-family: var(--f-body); font-size: .7rem; color: var(--orange-light); letter-spacing: 1.5px; text-transform: uppercase; } .hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; } .hero__scroll { position: absolute; bottom: 2.5rem; left: 6vw; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; color: rgba(255,255,255,0.3); font-size: .62rem; letter-spacing: 3px; text-transform: uppercase; font-family: var(--f-body); } .hero__scroll-line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--orange), transparent); animation: scrollpulse 2.2s ease-in-out infinite; } @keyframes scrollpulse { 0%,100% { opacity: .35; transform: scaleY(1); } 50% { opacity: .85; transform: scaleY(1.12); } } /* ─── Section Header ─────────────────────── */ .section-header { text-align: center; margin-bottom: 4rem; } .section-header__label { display: inline-flex; align-items: center; gap: .5rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--muted); margin-bottom: 1.2rem; } .section-header__label::before, .section-header__label::after { content: ''; display: block; width: 22px; height: 1px; background: var(--line); } .section--dark .section-header__label { color: rgba(255,255,255,0.35); } .section--dark .section-header__label::before, .section--dark .section-header__label::after { background: rgba(255,255,255,0.12); } .section-header h2 { margin-bottom: .75rem; } .section-header p { color: var(--muted); max-width: 500px; margin: 0 auto; font-size: .95rem; } .section-header__line { width: 32px; height: 2px; background: var(--orange); margin: 1.2rem auto 0; border-radius: 2px; } /* ─── Cards — Editorial Overlay ─────────── */ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .cards-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; } .cards-grid--4 .card { height: 380px; } .cards-grid--4 .card__title { font-size: 1.1rem; } .cards-grid--4 .card__text { font-size: .82rem; } .card { position: relative; border-radius: var(--r-lg); overflow: hidden; height: 420px; background: var(--ink); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); } .card__num { position: absolute; top: 1.2rem; left: 1.4rem; z-index: 2; font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 1px; line-height: 1; background: rgba(0,0,0,0.3); padding: .25rem .5rem; border-radius: 4px; backdrop-filter: blur(4px); transition: color .3s; } .card:hover .card__num { color: rgba(255,255,255,0.75); } .card__img-wrap { position: absolute; inset: 0; overflow: hidden; margin: 0; border-radius: 0; aspect-ratio: unset; } .card__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) brightness(0.72); transition: filter .55s var(--ease), transform .55s var(--ease); } .card:hover .card__img { filter: grayscale(0%) brightness(0.65); transform: scale(1.06); } /* Gradient overlay from bottom */ .card__img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 30%, rgba(8,8,8,0.5) 60%, rgba(8,8,8,0.92) 100% ); } .card__body { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.6rem 1.6rem 1.8rem; z-index: 1; display: flex; flex-direction: column; } .card__tag { display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--orange-light); margin-bottom: .55rem; } .card__title { font-size: 1.2rem; margin-bottom: .45rem; line-height: 1.2; color: var(--white); } .card__text { font-size: .84rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 0; } .card__link { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1rem; transition: gap .2s var(--ease), color .2s; } .card__link:hover { gap: .6rem; color: var(--white); } .card__link .arrow { transition: transform .2s; } .card__link:hover .arrow { transform: translateX(3px); } /* ─── Article list ───────────────────────── */ .articles-list { display: grid; gap: 1.25rem; } .article-card { display: grid; grid-template-columns: 220px 1fr; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .3s, border-color .3s, transform .3s; } .article-card:hover { box-shadow: var(--sh-md); border-color: var(--line); transform: translateY(-2px); } .article-card__img-wrap { overflow: hidden; } .article-card__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(25%); transition: filter .4s, transform .4s; } .article-card:hover .article-card__img { filter: grayscale(0%); transform: scale(1.05); } .article-card__body { padding: 1.8rem; display: flex; flex-direction: column; justify-content: center; } .article-card__date { font-size: .7rem; color: var(--muted); margin-bottom: .5rem; letter-spacing: .3px; } .article-card__title { font-size: 1.1rem; margin-bottom: .6rem; line-height: 1.25; } .article-card__title a { color: var(--ink); } .article-card__title a:hover { color: var(--orange); } .article-card__desc { font-size: .86rem; color: var(--muted); flex: 1; line-height: 1.6; } .article-card__link { display: inline-flex; align-items: center; gap: .35rem; font-size: .79rem; font-weight: 600; color: var(--orange); margin-top: .9rem; transition: gap .2s; } .article-card__link:hover { gap: .6rem; color: var(--orange-dark); } /* ─── Photo Frame ─────────────────────────── */ .photo-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); } .photo-frame img { width: 100%; display: block; transition: transform .5s var(--ease); } .photo-frame:hover img { transform: scale(1.04); } .photo-frame__caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.72)); color: var(--white); padding: 2.5rem 1.4rem 1.2rem; font-size: .78rem; letter-spacing: .5px; } /* ─── Intro block ─────────────────────────── */ .intro-block { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .intro-block__text p { color: var(--muted); font-size: .95rem; } /* ─── Page Header (inner pages) ──────────── */ .page-header { position: relative; padding: 9rem 0 5rem; background: var(--ink); color: var(--cream); text-align: center; overflow: hidden; } .page-header__bg { position: absolute; inset: 0; z-index: 0; } .page-header__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(0.32) sepia(12%); } .page-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(175deg, rgba(8,8,8,0.2) 0%, rgba(8,8,8,0.72) 100%); z-index: 1; } .page-header > *:not(.page-header__bg) { position: relative; z-index: 2; } .page-header__breadcrumb { font-size: .7rem; color: rgba(255,255,255,0.35); margin-bottom: 1.2rem; letter-spacing: .5px; } .page-header__breadcrumb a { color: rgba(255,255,255,0.55); } .page-header__breadcrumb a:hover { color: var(--white); } .page-header h1 { color: var(--white); margin-bottom: .6rem; } .page-header p { color: rgba(255,255,255,0.5); font-size: 1rem; max-width: 560px; margin: .5rem auto 0; } /* ─── Program cards (Lletres a les aules) ─── */ .program-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .program-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2.2rem 2rem; transition: box-shadow .3s, border-color .3s, transform .3s; display: flex; flex-direction: column; } .program-card:hover { box-shadow: var(--sh-md); border-color: var(--orange-light); transform: translateY(-3px); } .program-card__header { margin-bottom: 1rem; } .program-card__tag { display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--orange-dark); background: var(--orange-subtle); padding: .25rem .6rem; border-radius: 4px; margin-bottom: .8rem; } .program-card h3 { font-size: 1.4rem; margin: 0; line-height: 1.2; } .program-card__lead { font-size: .95rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 1.2rem; } .program-card__list { list-style: none; padding: 0; margin: 0; } .program-card__list li { font-size: .87rem; color: var(--muted); padding: .55rem 0; border-top: 1px solid var(--line); line-height: 1.55; } .program-card__list li:first-child { border-top: none; padding-top: 0; } .program-card__list li strong { color: var(--ink); font-weight: 600; } /* ─── Timeline ────────────────────────────── */ .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 3rem; } .timeline__step { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem 1.4rem; position: relative; transition: box-shadow .3s, transform .3s; } .timeline__step:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } .timeline__num { font-family: var(--f-display); font-size: 2.2rem; font-weight: 900; color: var(--orange-light); line-height: 1; margin-bottom: .8rem; letter-spacing: -0.02em; } .timeline__step h3 { font-family: var(--f-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; letter-spacing: -0.01em; text-transform: none; } .timeline__step p { font-size: .85rem; color: var(--muted); line-height: 1.55; margin-bottom: .6rem; } .timeline__step p:last-child { margin-bottom: 0; } .timeline__when { font-size: .76rem !important; color: var(--orange-dark) !important; margin-top: .8rem !important; padding-top: .8rem; border-top: 1px solid var(--line); } .timeline__when strong { color: var(--ink) !important; font-weight: 600; } .cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ─── Pàgina legal ─── */ .legal-box { background: var(--cream); border-left: 3px solid var(--orange); border-radius: var(--r); padding: 1.5rem 1.8rem; margin: 1.5rem 0 2rem; } .legal-box ul { list-style: none; margin: 0; padding: 0; font-family: var(--f-body); font-size: .92rem; line-height: 1.7; } .legal-box li { padding: .25rem 0; color: var(--ink-soft); } .legal-box li strong { color: var(--orange-dark); font-weight: 600; } .article-content h2 { font-family: var(--f-display); font-size: 1.55rem; margin: 2.8rem 0 1rem; color: var(--ink); } .legal-footer { margin-top: 3rem !important; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; } /* ─── Punts de la ruta literària ─── */ .route-list { display: grid; gap: 1.25rem; max-width: 920px; margin: 0 auto; } .route-point { display: grid; grid-template-columns: 80px 1fr; gap: 1.5rem; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--r-lg); padding: 1.6rem 2rem 1.8rem 1.6rem; transition: box-shadow .3s, border-left-color .3s, transform .3s; } .route-point:hover { box-shadow: var(--sh-md); border-left-color: var(--orange); transform: translateX(4px); } .route-point__num { font-family: var(--f-display); font-size: 3rem; font-weight: 900; color: var(--orange); line-height: 1; letter-spacing: -0.03em; padding-top: .2rem; } .route-point__body { display: flex; flex-direction: column; } .route-point__title { font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-bottom: .2rem; line-height: 1.25; } .route-point__subtitle { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--orange-dark); margin-bottom: 1rem; } .route-point__quote { font-family: var(--f-literary); font-style: italic; font-size: .95rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 .9rem; padding-left: 1rem; border-left: 2px solid var(--line); } .route-point__quote p { margin: 0 0 .85rem; } .route-point__quote p:last-child { margin-bottom: 0; } .route-point__cite { font-size: .8rem; color: var(--muted); font-style: normal; letter-spacing: .3px; } /* Desplegable del fragment literari sencer (natiu, sense JS) */ .route-point__frag { margin: 0 0 .9rem; } .route-point__frag > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .45rem; font-family: var(--f-body); font-size: .78rem; font-weight: 600; letter-spacing: .3px; color: var(--orange); padding: .35rem 0; transition: color .2s; } .route-point__frag > summary:hover { color: var(--orange-dark); } .route-point__frag > summary::-webkit-details-marker { display: none; } .route-point__frag > summary::after { content: "↓"; font-size: .9em; transition: transform .25s var(--ease); } .route-point__frag[open] > summary::after { transform: rotate(180deg); } .route-point__frag .lbl-open { display: none; } .route-point__frag[open] .lbl-open { display: inline; } .route-point__frag[open] .lbl-closed { display: none; } .route-point__frag .route-point__quote { margin-top: .8rem; } /* ─── Persones (junta directiva) ─── */ .people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 760px; margin: 0 auto; } .person-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.4rem; text-align: center; transition: box-shadow .3s, border-color .3s, transform .3s; } .person-card:hover { box-shadow: var(--sh-md); border-color: var(--orange-light); transform: translateY(-3px); } .person-card__role { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--orange-dark); margin-bottom: .5rem; } .person-card__name { font-family: var(--f-display); font-size: 1.2rem; color: var(--ink); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } /* ─── Contacte cards (associació) ─── */ .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem 1.8rem; transition: box-shadow .3s, transform .3s; display: flex; flex-direction: column; } .contact-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); } .contact-card__icon { font-size: 1.8rem; display: block; margin-bottom: .9rem; opacity: .7; } .contact-card h3 { font-family: var(--f-display); font-size: 1.3rem; margin-bottom: .8rem; color: var(--ink); } .contact-card p { font-size: .9rem; color: var(--muted); line-height: 1.65; margin-bottom: .4rem; } .contact-card p strong { color: var(--ink); font-weight: 600; } .contact-card__meta { font-size: .75rem !important; color: var(--orange-dark) !important; font-style: italic; letter-spacing: .3px; padding-top: .8rem; border-top: 1px solid var(--line); } .contact-card .btn { align-self: flex-start; } /* ─── Biografia · Fitxa breu ─── */ /* ─── Botó tornar amunt ────────────────────── */ .to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--orange); color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: var(--sh-md); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s; z-index: 90; } .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .to-top:hover { background: var(--orange-dark); transform: translateY(-3px); } .to-top:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } @media (max-width: 600px) { .to-top { right: 1rem; bottom: 1rem; width: 42px; height: 42px; } } @media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s; } } /* ─── FAQ (preguntes freqüents) ────────────── */ .faq { max-width: 760px; margin: 0 auto; } .faq__item { border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: .8rem; background: var(--white); overflow: hidden; } .faq__item[open] { border-color: var(--orange-light); } .faq__q { cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-family: var(--f-display); font-size: 1.08rem; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: "+"; color: var(--orange); font-size: 1.5rem; font-weight: 400; transition: transform .25s var(--ease); } .faq__item[open] .faq__q::after { transform: rotate(45deg); } .faq__a { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); line-height: 1.65; font-size: .95rem; } /* ─── Efemèrides anuals ────────────────────── */ .ephem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .ephem { display: flex; align-items: center; gap: 1rem; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--r-lg); padding: 1.2rem 1.3rem; transition: box-shadow .3s, transform .3s; } .ephem:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } .ephem--round { border-left-color: var(--teal); background: var(--teal-subtle); } .ephem__num { font-family: var(--f-display); font-size: 2.4rem; font-weight: 700; line-height: .9; color: var(--orange); display: flex; flex-direction: column; align-items: center; min-width: 64px; } .ephem__num span { font-family: var(--f-body); font-size: .62rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: .25rem; } .ephem--round .ephem__num { color: var(--teal-dark); } .ephem__tag { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--orange-dark); } .ephem--round .ephem__tag { color: var(--teal-dark); } .ephem__text { margin: .3rem 0 0; font-size: .9rem; line-height: 1.4; color: var(--ink); } @media (max-width: 860px) { .ephem-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .ephem-grid { grid-template-columns: 1fr; } } /* ─── Galeria de fotos ─────────────────────── */ .photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .photo-gallery__wide { grid-column: 1 / -1; } .photo-gallery figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--sand); } .photo-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .5s var(--ease); filter: saturate(.92); } .photo-gallery figure:not(.photo-gallery__wide) img { aspect-ratio: 4 / 3; } .photo-gallery__wide img { aspect-ratio: 21 / 9; } .photo-gallery figure:hover img { transform: scale(1.05); filter: saturate(1.05); } .photo-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .9rem .7rem; font-size: .72rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.65)); opacity: 0; transition: opacity .35s var(--ease); } .photo-gallery figure:hover figcaption, .photo-gallery figure:focus-within figcaption { opacity: 1; } .photo-gallery figcaption a { color: #fff; text-decoration: underline; } @media (max-width: 760px) { .photo-gallery { grid-template-columns: 1fr 1fr; } .photo-gallery figcaption { opacity: 1; } /* sense hover al mòbil */ } .bio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .bio-grid--3 { grid-template-columns: repeat(3, 1fr); } .bio-fact { background: var(--cream); padding: 1.5rem 1.4rem; border-radius: var(--r-lg); border-left: 3px solid var(--orange); display: flex; flex-direction: column; gap: .35rem; } .bio-fact__label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); } .bio-fact__value { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; } .bio-fact__detail { font-size: .8rem; color: var(--muted); font-style: italic; } /* ─── Biografia · Etapes ─── */ .bio-stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .bio-stage { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem 1.8rem 2rem; position: relative; transition: box-shadow .35s, transform .35s, border-color .35s; } .bio-stage:hover { box-shadow: var(--sh-md); border-color: var(--orange-light); transform: translateY(-3px); } .bio-stage__years { font-family: var(--f-display); font-weight: 900; font-size: 2.4rem; color: var(--orange); line-height: 1; margin-bottom: .4rem; letter-spacing: -0.02em; } .bio-stage h3 { font-family: var(--f-display); font-size: 1.6rem; margin-bottom: 1rem; color: var(--ink); } .bio-stage p { font-size: .92rem; color: var(--ink-soft); line-height: 1.7; margin: 0; } .bio-stage p strong { color: var(--orange-dark); font-weight: 600; } /* ─── Bibliografia ─── */ .biblio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.2rem; } .biblio-block { background: var(--cream); border-radius: var(--r-lg); padding: 1.8rem 1.8rem 2rem; border-top: 4px solid var(--orange); } .biblio-block__title { font-family: var(--f-display); font-size: 1.4rem; color: var(--ink); margin-bottom: .25rem; } .biblio-block__subtitle { font-size: .82rem; color: var(--muted); font-style: italic; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .biblio-list { list-style: none; padding: 0; margin: 0; } .biblio-list li { position: relative; padding: .55rem 0 .55rem 56px; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; border-bottom: 1px solid rgba(0,0,0,0.05); } .biblio-list li:last-child { border-bottom: none; } .biblio-list li em { font-style: italic; } .biblio-list li strong em { color: var(--orange-dark); font-weight: 700; } .biblio-year { position: absolute; left: 0; top: .55rem; font-family: var(--f-display); font-weight: 700; color: var(--orange-dark); font-size: .92rem; letter-spacing: -0.01em; } .biblio-note { display: block; margin-top: .1rem; font-size: .76rem; font-style: normal; color: var(--muted); line-height: 1.35; } .biblio-year.highlight { color: var(--orange); } /* ─── Premis ─── */ .awards-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .award { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.2rem; text-align: center; display: flex; flex-direction: column; gap: .4rem; transition: box-shadow .3s, border-color .3s; } .award:hover { box-shadow: var(--sh-md); border-color: var(--orange-light); } .award__name { font-family: var(--f-display); font-size: 1.05rem; color: var(--ink); font-weight: 700; line-height: 1.25; } .award__year { font-size: .85rem; font-weight: 600; color: var(--orange); letter-spacing: 1px; } .award__work { font-size: .82rem; color: var(--muted); font-style: italic; } /* ─── Sources cards (fonts validades) ─── */ .sources-list { display: flex; flex-direction: column; gap: 1rem; } .source-card { display: flex; flex-direction: column; gap: .4rem; padding: 1.3rem 1.5rem; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.08); border-left: 3px solid var(--orange); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); transition: background .25s, border-left-color .25s, transform .25s; } .source-card:hover { background: var(--orange-subtle); border-left-color: var(--orange-dark); color: var(--ink); transform: translateX(4px); } .source-card strong { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); font-weight: 700; } .source-card__meta { font-size: .82rem; color: var(--muted); font-style: italic; } .source-card__link { font-size: .78rem; font-weight: 600; color: var(--orange-dark); letter-spacing: .3px; margin-top: .2rem; } .source-card:hover .source-card__link { color: var(--orange-dark); } /* Variant per a seccions fosques (p. ex. biografia · fonts validades) */ .section--dark .source-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); color: var(--white); } .section--dark .source-card:hover { background: rgba(255,255,255,0.1); color: var(--white); } .section--dark .source-card strong { color: var(--white); } .section--dark .source-card__meta { color: rgba(255,255,255,0.55); } .section--dark .source-card__link { color: var(--orange-light); } .section--dark .source-card:hover .source-card__link { color: var(--white); } /* ─── Quote cards (l'autor en primera persona) ─── */ .quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .quote-card { position: relative; background: var(--cream); border-radius: var(--r-lg); padding: 3rem 1.8rem 1.8rem; border-left: 3px solid var(--orange); transition: transform .35s, box-shadow .35s; } .quote-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); } .quote-card__mark { position: absolute; top: -.5rem; left: 1.2rem; font-family: var(--f-display); font-size: 5rem; font-weight: 900; color: var(--orange); line-height: 1; opacity: .35; pointer-events: none; } .quote-card blockquote { font-family: var(--f-literary); font-style: italic; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1.2rem; quotes: none; } .quote-card figcaption { font-family: var(--f-body); font-size: .75rem; color: var(--muted); letter-spacing: .3px; padding-top: 1rem; border-top: 1px solid var(--line); text-transform: uppercase; letter-spacing: 1.5px; } .quote-card figcaption strong { color: var(--orange-dark); font-weight: 700; font-style: normal; } /* ─── Resource cards (docents) ───────────── */ .resource-list { display: grid; gap: 1.25rem; } .resource-card { display: block; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--r-lg); padding: 1.8rem 2rem; text-decoration: none; color: inherit; transition: box-shadow .3s, border-left-color .3s, transform .3s; } .resource-card:hover { box-shadow: var(--sh-md); border-left-color: var(--orange); transform: translateY(-3px); color: inherit; } .resource-card__meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: .9rem; } .resource-card__type { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--orange-dark); background: var(--orange-subtle); padding: .28rem .65rem; border-radius: 4px; } .resource-card__source { font-size: .75rem; color: var(--muted); letter-spacing: .3px; } .resource-card__title { font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); margin: 0 0 .6rem; line-height: 1.25; letter-spacing: -0.01em; } .resource-card:hover .resource-card__title { color: var(--orange-dark); } .resource-card__desc { font-size: .92rem; color: var(--muted); line-height: 1.65; margin-bottom: 1.1rem; } .resource-card__desc em { color: var(--ink-soft); font-style: italic; } .resource-card__cta { display: flex; justify-content: space-between; align-items: center; padding-top: .9rem; border-top: 1px solid var(--line); flex-wrap: wrap; gap: .6rem; } .resource-card__format { font-size: .72rem; color: var(--muted); letter-spacing: .3px; } .resource-card__link { font-size: .82rem; font-weight: 600; color: var(--orange); transition: color .2s; } .resource-card:hover .resource-card__link { color: var(--orange-dark); } /* ─── Coming soon ─────────────────────────── */ .coming-soon { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: 5rem 2rem; border: 1px dashed var(--line); border-radius: var(--r-lg); background: rgba(255,255,255,0.5); } .coming-soon::after { content: '\201D'; position: absolute; z-index: -1; top: -3rem; right: 1.5rem; font-family: var(--f-display); font-size: 15rem; line-height: 1; color: var(--orange); opacity: .06; pointer-events: none; } .coming-soon__icon { font-size: 2.5rem; margin-bottom: 1rem; opacity: .5; } .coming-soon h3 { color: var(--muted); font-size: .95rem; font-weight: 600; margin-bottom: .5rem; font-family: var(--f-body); } .coming-soon p { color: var(--muted); font-size: .85rem; max-width: 300px; margin: 0 auto; } /* ─── Map ─────────────────────────────────── */ #map { height: 500px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); border: 1px solid var(--line); } /* ─── Buttons ─────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .72rem 1.6rem; border-radius: var(--r-pill); font-family: var(--f-body); font-size: .84rem; font-weight: 600; cursor: pointer; border: none; transition: all .2s var(--ease); } .btn--primary { background: var(--orange); color: var(--white); letter-spacing: .2px; box-shadow: 0 1px 3px rgba(176,90,60,0.25); } .btn--primary:hover { background: var(--orange-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(176,90,60,0.32); } .btn--outline { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.22); } .btn--outline:hover { background: rgba(255,255,255,0.08); color: var(--white); border-color: rgba(255,255,255,0.5); } .btn--ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); } .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--white); } .btn--dark { background: var(--ink); color: var(--white); } .btn--dark:hover { background: var(--ink-soft); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); } /* ─── Dark section (quote) ───────────────── */ .section--dark .literary-quote { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.86); text-align: left; } .section--dark .literary-quote::before { opacity: .2; } .section--dark .literary-quote cite { border-top-color: rgba(255,255,255,0.16); } .section--dark .section-header__line { background: var(--orange); } /* ─── Footer ──────────────────────────────── */ .footer { position: relative; background: linear-gradient(180deg, #161514 0%, var(--ink) 60%); color: rgba(255,255,255,0.42); padding: 4.75rem 0 2.25rem; overflow: hidden; } /* Fil d'accent superior amb els colors de marca */ .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--orange-light) 25%, var(--orange) 50%, var(--orange-light) 75%, transparent 100%); opacity: .8; } /* Resplendor ambiental subtil */ .footer::after { content: ""; position: absolute; bottom: -45%; left: 50%; width: 70%; height: 90%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(43,181,160,0.07), transparent 68%); pointer-events: none; } .footer .container { position: relative; z-index: 1; } .footer__inner { position: relative; display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 3rem; margin-bottom: 2rem; padding-bottom: 1.5rem; } .footer__partners { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; margin-bottom: 2.5rem; } .footer__partners .footer__support { margin-top: 0; flex: 1; min-width: 0; } .footer__collab { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .footer__collab .footer__support-label { width: 100%; flex-direction: row-reverse; } .footer__collab .footer__support-label::after { background: linear-gradient(270deg, rgba(255,255,255,0.12), transparent); } .footer__brand p { font-family: var(--f-literary); font-style: italic; font-size: .92rem; line-height: 1.7; max-width: 270px; color: rgba(255,255,255,0.5); } .footer__logo-img { width: 190px; height: auto; display: block; margin-bottom: 1.5rem; filter: brightness(1.05) drop-shadow(0 0 12px rgba(255,255,255,0.08)); } .footer h4 { display: flex; align-items: center; gap: .55rem; color: var(--white); font-family: var(--f-body); font-size: .64rem; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 1.4rem; font-weight: 700; } .footer h4::before { content: ""; width: 14px; height: 2px; background: var(--orange); flex: none; } .footer__links { list-style: none; } .footer__links li { margin-bottom: .6rem; } .footer__links a { position: relative; display: inline-block; color: rgba(255,255,255,0.4); font-size: .83rem; padding-left: 0; transition: color .25s var(--ease), padding-left .25s var(--ease); } .footer__links a:hover { color: var(--white); padding-left: .35rem; } /* Suport institucional — integrat a la columna de marca */ .footer__support { margin-top: 2.25rem; } .footer__support-label { display: flex; align-items: center; gap: .7rem; font-size: .58rem; text-transform: uppercase; letter-spacing: 2.5px; color: rgba(255,255,255,0.38); margin-bottom: 1rem; } .footer__support-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent); } .footer__support img { height: 54px; width: auto; opacity: .82; transition: opacity .25s var(--ease), transform .25s var(--ease); } .footer__support a:hover img { opacity: 1; transform: translateY(-2px); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: rgba(255,255,255,0.32); } .footer__bottom-links { display: flex; gap: 1.4rem; } .footer__bottom-links a { color: rgba(255,255,255,0.3); transition: color .2s; } .footer__bottom-links a:hover { color: var(--orange-light); } .footer__license { display: inline-flex; align-items: center; gap: .45rem; font-size: .7rem; letter-spacing: .2px; color: rgba(255,255,255,0.38); transition: color .2s; } .footer__license img { height: 17px; width: 17px; opacity: .68; transition: opacity .2s; } .footer__license:hover { color: rgba(255,255,255,0.7); } .footer__license:hover img { opacity: 1; } /* ─── Animations ──────────────────────────── */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ─── Article content ─────────────────────── */ .article-content { font-family: var(--f-literary); font-size: 1.08rem; line-height: 1.9; } .article-content h2 { margin: 2.5rem 0 1rem; font-size: 1.55rem; } .article-content p { margin-bottom: 1.3rem; color: var(--ink-soft); } /* ─── Leaflet overrides ──────────────────── */ .leaflet-popup-content-wrapper { border-radius: var(--r-lg); box-shadow: var(--sh-lg); } .map-popup__img { width:100%; height:120px; object-fit:cover; border-radius:var(--r); margin-bottom:.5rem; } /* ─── Logo (footer) ───────────────────────── */ .logo-img { display: inline-block; object-fit: contain; } .logo-img--footer { height: 52px; width: auto; opacity: .7; } /* ─── Responsive ──────────────────────────── */ @media (max-width: 960px) { .nav__links { display: none; } .nav__cta { display: none; } .nav__wordmark-sub { display: none; } .nav__hamburger { display: flex; } .nav__links.open { display: flex; flex-direction: column; position: absolute; top: calc(100% - 4px); left: 1rem; right: 1rem; background: rgba(247,243,237,0.97); backdrop-filter: blur(20px); padding: .65rem; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.06); gap: .15rem; } .nav__links.open a { color: var(--ink-soft); padding: .7rem 1rem; margin: 0; border-radius: 8px; border-left: 2px solid transparent; } .nav__links.open a::after { display: none; } .nav__links.open a:hover { background: rgba(0,0,0,0.04); color: var(--ink); } .nav__links.open a.active { background: rgba(212,113,78,0.1); border-left-color: var(--orange); color: var(--orange-dark); font-weight: 600; } .cards-grid { grid-template-columns: 1fr; } .cards-grid--4 { grid-template-columns: repeat(2, 1fr); } .card { height: 360px; } .cards-grid--4 .card { height: 340px; } .program-grid { grid-template-columns: 1fr; } .quotes-grid { grid-template-columns: 1fr; } .bio-grid { grid-template-columns: repeat(2, 1fr); } .bio-stages { grid-template-columns: 1fr; } .biblio-grid { grid-template-columns: 1fr; } .awards-list { grid-template-columns: repeat(2, 1fr); } .people-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .route-point { grid-template-columns: 60px 1fr; padding: 1.2rem 1.4rem 1.4rem 1.2rem; gap: 1rem; } .route-point__num { font-size: 2.2rem; } .nav__links a { font-size: .8rem; } .timeline { grid-template-columns: repeat(2, 1fr); } .intro-block { grid-template-columns: 1fr; gap: 2.5rem; } .footer__inner { grid-template-columns: 1fr; gap: 2rem; } .footer__partners { flex-direction: column; align-items: flex-start; gap: 1.75rem; } .footer__collab { align-items: flex-start; text-align: left; } .footer__collab .footer__support-label { flex-direction: row; } .footer__collab .footer__support-label::after { background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent); } .article-card { grid-template-columns: 1fr; } .article-card__img-wrap { height: 200px; } .hero h1 { font-size: clamp(2.6rem,10vw,4rem); } .hero__content { max-width: 100%; padding-left: 2rem; padding-right: 2rem; } .hero__scroll { left: 2rem; } } @media (max-width: 640px) { .nav { height: 72px; } .nav__logo-img { height: 48px; } .nav__inner { padding: 0 1.25rem; } .nav__wordmark { font-size: 1.25rem; } .container, .container--narrow { padding: 0 1.25rem; } .section { padding: 4rem 0; } .hero__actions { flex-direction: column; align-items: flex-start; } .footer__bottom { flex-direction: column; gap: 1rem; text-align: center; } .coming-soon { padding: 3.5rem 1.5rem; } .cards-grid { gap: 1rem; } .timeline { grid-template-columns: 1fr; } .bio-grid { grid-template-columns: 1fr; } .awards-list { grid-template-columns: 1fr; } .cta-row { flex-direction: column; align-items: stretch; } .cta-row .btn { justify-content: center; } .resso-card { grid-template-columns: 1fr; } .resso-card__img-wrap { height: 190px; } .resso-toolbar { flex-direction: column; align-items: stretch; } .resso-search { max-width: none; } } /* ─── Logo institucional (suport) ──────────── */ .institution-logo { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: 2rem auto 0; } .institution-logo__label { font-size: .7rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); } .institution-logo img { height: 48px; width: auto; transition: opacity .2s; } .institution-logo a:hover img { opacity: .75; } /* ─── Ressò · cercador, filtres i llista ───── */ .resso-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 860px; margin: 0 auto 2rem; } .resso-search { position: relative; flex: 1 1 280px; max-width: 420px; } .resso-search input { width: 100%; font-family: var(--f-body); font-size: .9rem; color: var(--ink); padding: .7rem 1rem .7rem 2.5rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); transition: border-color .2s, box-shadow .2s; } .resso-search input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(212,113,78,.12); } .resso-search__icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--muted); pointer-events: none; } .resso-filters { display: flex; flex-wrap: wrap; gap: .5rem; } .resso-chip { font-family: var(--f-body); font-size: .78rem; font-weight: 500; letter-spacing: .2px; color: var(--muted); padding: .45rem .85rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); cursor: pointer; transition: all .2s; } .resso-chip:hover { border-color: var(--orange-light); color: var(--orange-dark); } .resso-chip.is-active { background: var(--orange); border-color: var(--orange); color: var(--white); } .resso-list { display: grid; gap: 1.1rem; max-width: 860px; margin: 0 auto; } .resso-card { display: grid; grid-template-columns: 210px 1fr; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .3s, transform .3s, border-color .3s; } .resso-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } .resso-card[hidden] { display: none; } .resso-card__img-wrap { overflow: hidden; background: var(--sand); position: relative; } /* Tint de colors corporatius damunt la foto, alternant terracota / teal, s'aclareix al hover */ .resso-card__img-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(212,113,78,0.55), rgba(176,90,60,0.30)); /* terracota */ mix-blend-mode: multiply; opacity: .92; transition: opacity .4s var(--ease); pointer-events: none; } .resso-card:nth-of-type(3n+2) .resso-card__img-wrap::after { background: linear-gradient(150deg, rgba(43,181,160,0.55), rgba(30,143,125,0.30)); /* teal */ } .resso-card:nth-of-type(3n+3) .resso-card__img-wrap::after { background: linear-gradient(150deg, rgba(212,113,78,0.50), rgba(30,143,125,0.40)); /* terracota → teal */ } .resso-card:hover .resso-card__img-wrap::after { opacity: .3; } .resso-card__img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; filter: grayscale(35%); transition: filter .4s var(--ease), transform .4s var(--ease); } .resso-card:hover .resso-card__img { filter: grayscale(0%); transform: scale(1.05); } .resso-card__meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; } .resso-card__cat { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--orange-dark); } .resso-card__origin { font-size: .62rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; } .resso-card__origin--propi { background: rgba(212,113,78,.14); color: var(--orange-dark); } .resso-card__origin--extern { background: rgba(122,116,108,.12); color: var(--muted); } .resso-card__body { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; } .resso-card__date { font-size: .72rem; color: var(--muted); margin-bottom: .4rem; letter-spacing: .3px; } .resso-card__title { font-size: 1.08rem; line-height: 1.3; margin-bottom: .5rem; } .resso-card__title a { color: var(--ink); } .resso-card__title a:hover { color: var(--orange); } .resso-card__desc { font-size: .84rem; color: var(--muted); line-height: 1.6; flex: 1; } .resso-card__link { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--orange); margin-top: .9rem; transition: gap .2s, color .2s; } .resso-card__link:hover { gap: .6rem; color: var(--orange-dark); } .resso-empty { text-align: center; color: var(--muted); padding: 3rem 1rem; font-size: .95rem; } .resso-empty[hidden] { display: none; } .resso-pagination { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 2.5rem; flex-wrap: wrap; } .resso-pagination[hidden] { display: none; } .resso-page-btn { font-family: var(--f-body); font-size: .82rem; font-weight: 600; min-width: 2.2rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink-soft); cursor: pointer; transition: all .2s; } .resso-page-btn:hover:not(:disabled) { border-color: var(--orange); color: var(--orange-dark); } .resso-page-btn.is-active { background: var(--orange); border-color: var(--orange); color: var(--white); cursor: default; } .resso-page-btn:disabled { opacity: .4; cursor: not-allowed; } .resso-count { text-align: center; font-size: .8rem; color: var(--muted); margin-bottom: 1.5rem; } /* ─── Polish & accessibilitat ──────────────── */ /* Selecció de text amb color de marca */ ::selection { background: var(--orange); color: var(--white); } ::-moz-selection { background: var(--orange); color: var(--white); } /* Focus visible per a navegació amb teclat (a11y) */ a:focus-visible, button:focus-visible, input:focus-visible, .btn:focus-visible, .resso-chip:focus-visible, .resso-page-btn:focus-visible, .article-card:focus-within { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; } /* Sobre el footer fosc, focus en clar */ .footer a:focus-visible { outline-color: var(--orange-light); } /* Respecta qui prefereix menys moviment */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .hero__bg img { animation: none; transform: none; } .fade-in { opacity: 1 !important; transform: none !important; } } /* ─── Gra subtil · textura d'arxiu (tot el lloc) ── */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { body::after { display: none; } } /* ─── Caplletra editorial als articles ─────── */ .article-body > p:first-of-type::first-letter { float: left; font-family: var(--f-display); font-weight: 900; font-size: 3.7rem; line-height: .78; color: var(--orange); margin: .4rem .65rem -.1rem 0; } /* ─── Cronologia sinòptica (vida · història · literatura) ─── */ .synoptic-wrap { max-width: 1080px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); box-shadow: var(--sh-sm); } .synoptic { width: 100%; min-width: 760px; border-collapse: collapse; background: var(--white); font-family: var(--f-body); font-size: .88rem; } .synoptic thead th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--muted); background: var(--cream); padding: .85rem 1.1rem; border-bottom: 2px solid var(--line); position: sticky; top: 0; z-index: 1; } .synoptic td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; color: var(--ink-soft); } .synoptic tbody tr:last-child td { border-bottom: none; } .synoptic tbody tr:hover td { background: var(--orange-subtle); } .syn-year { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--orange); white-space: nowrap; } .syn-jpf { font-weight: 600; color: var(--ink); border-left: 3px solid var(--orange); } .synoptic td em { color: var(--ink); font-style: italic; } .synoptic td small { color: var(--muted); font-size: .82em; } .synoptic__hint { text-align: center; font-size: .76rem; color: var(--muted); margin-top: 1rem; } @media (max-width: 640px) { .synoptic { font-size: .82rem; } .synoptic td, .synoptic thead th { padding: .65rem .8rem; } } /* ─── Vídeo incrustat (responsiu 16:9) ─────── */ .video-embed { position: relative; width: 100%; max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); background: #000; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-caption { max-width: 720px; margin: 1rem auto 0; text-align: center; font-size: .82rem; color: var(--muted); } /* ─── Carrusel de citacions ────────────────── */ .quote-carousel { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; } .quote-carousel__viewport { order: 2; } .quote-carousel__controls { order: 1; } .quote-carousel__viewport { position: relative; } .quote-slide { display: none; margin: 0; position: relative; isolation: isolate; overflow: hidden; background: var(--white); border-left: 3px solid var(--orange); border-radius: var(--r-lg); padding: 2.6rem 2.8rem 2.2rem; font-family: var(--f-literary); font-style: italic; font-size: 1.35rem; line-height: 1.72; color: var(--ink-soft); box-shadow: var(--sh-sm); text-align: left; } .quote-slide.is-active { display: block; animation: quoteFade .5s var(--ease); } @keyframes quoteFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .quote-slide::before { content: '\201D'; position: absolute; z-index: -1; top: -1.4rem; right: 1rem; font-family: var(--f-display); font-size: 8rem; line-height: 1; color: var(--orange); opacity: .08; pointer-events: none; } .quote-slide cite { display: block; margin-top: 1.3rem; font-style: normal; font-size: .82rem; color: var(--muted); letter-spacing: .3px; } .quote-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.8rem; } .quote-carousel__btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--orange); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s, transform .2s; } .quote-carousel__btn:hover { background: var(--orange); color: var(--white); border-color: var(--orange); transform: translateY(-1px); } .quote-carousel__counter { font-family: var(--f-display); font-size: 1rem; color: var(--muted); min-width: 76px; text-align: center; letter-spacing: 1px; } .quote-carousel__counter b { color: var(--orange); font-weight: 700; } @media (max-width: 640px) { .quote-slide { font-size: 1.15rem; padding: 2rem 1.6rem 1.6rem; } } /* ─── Targetes d'actualitat al mòbil: imatge a dalt, text a tota amplada ─── (cal que vagi DESPRÉS de la definició base .resso-card per guanyar en ordre) */ @media (max-width: 700px) { .resso-card { grid-template-columns: 1fr; } .resso-card__img-wrap { height: 200px; width: 100%; } .resso-card__img { min-height: 200px; } .resso-card__body { padding: 1.5rem 1.4rem 1.6rem; } } /* ═══════════════════════════════════════════════════════════════ MODE FOSC — s'activa automàticament amb la preferència del SO ═══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { /* ── Tokens semàntics ────────────────────── */ :root { --cream: #1E1B18; /* fons de seccions crema / targetes */ --sand: #252118; /* fons lleugerament més clar */ --ink: #EDE8E0; /* encapçalaments i text fosc → ara clar */ --ink-soft: #C8C1B8; /* text de cos */ --muted: #8A837B; /* metadades / text secundari */ --line: #2C2824; /* separadors */ --sh-sm: 0 1px 4px rgba(0,0,0,0.5); --sh-md: 0 4px 20px rgba(0,0,0,0.6); --sh-lg: 0 20px 60px rgba(0,0,0,0.8); } /* ── Base ───────────────────────────────── */ body { background: #141210; color: var(--ink-soft); } /* ── Nav ────────────────────────────────── */ .nav.scrolled { background: rgba(20,18,16,0.9); border-bottom-color: rgba(255,255,255,0.06); } .nav.scrolled .nav__links a { color: var(--muted); } .nav.scrolled .nav__links a:hover, .nav.scrolled .nav__links a.active { color: var(--ink); } .nav.scrolled .nav__hamburger { background: rgba(255,255,255,0.06); } .nav.scrolled .nav__hamburger span { background: var(--ink); } /* Menú desplegable mòbil — fons fosc i text clar (abans quedava il·legible) */ .nav__links.open { background: rgba(28,25,22,0.97); border-color: rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,0.5); } .nav__links.open a:hover { background: rgba(255,255,255,0.06); color: var(--ink); } .nav__links.open a.active { background: rgba(212,113,78,0.18); color: var(--orange-light); } /* ── Seccions ───────────────────────────── */ /* section--cream usa var(--cream) → ja és fosc per token */ .section--white { background: #141210; } /* section--dark usava var(--ink) com a fons (ara és clar) → forçar fosc */ .section--dark { background: #0C0A08; color: var(--cream); } .section--dark h2, .section--dark h3 { color: var(--ink); } /* ── Targetes i quadres fons blanc → fosc ── */ .faq__item, .ephem:not(.ephem--round), .program-card, .timeline__step, .route-point, .quote-slide, .quote-carousel__btn, .resso-card, .article-card, .person-card, .contact-card, .bio-stage, .award, .resource-card, .resso-search input, .resso-page-btn, .resso-chip, .synoptic { background: var(--cream); border-color: var(--line); } /* ── Botons de filtre actius ─────────────── */ .resso-chip:hover { border-color: var(--orange-light); } .resso-chip.is-active { background: var(--orange); border-color: var(--orange); color: var(--white); } /* ── Input de cerca ─────────────────────── */ .resso-search input { color: var(--ink-soft); } .resso-search input::placeholder { color: var(--muted); } /* ── Botons (els que usaven --ink com a fons) ── */ .btn--dark { background: #2A2520; color: var(--ink); } .btn--dark:hover { background: #332E28; color: var(--ink); } .btn--ghost:hover { background: #2A2520; color: var(--ink); border-color: var(--line); } /* ── Botó "Veure tota l'actualitat" (btn--outline sobre fons neutre) ─── */ .section--cream .btn--outline, .section--white .btn--outline { color: var(--ink-soft); border-color: var(--line); } .section--cream .btn--outline:hover, .section--white .btn--outline:hover { background: var(--line); color: var(--ink); } /* ── Taula sinòptica ────────────────────── */ .synoptic thead th { background: var(--sand); } .synoptic tbody tr:hover td { background: rgba(212,113,78,0.12); } .quote-carousel__btn { color: var(--orange); } /* ── Efemèride destacada (aniversari rodó) ── */ .ephem--round { background: rgba(43,181,160,0.14); border-color: var(--teal-dark); } /* ── Source cards (fons transparent lleuger) ── */ .source-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } .source-card:hover { background: rgba(255,255,255,0.07); } /* ── Footer (gradient hardcoded) ───────── */ .footer { background: linear-gradient(180deg, #0C0A08 0%, #161514 60%); } /* ── Biblio: capçalera enganxada (sticky) ── */ .biblio-year { background: var(--cream); } /* ── Legal ──────────────────────────────── */ .legal-box { background: var(--cream); } /* ── Logo Generalitat (versió blanca en fosc) ── */ .logo-gencat { content: url('../img/logo/generalitat-blanc.png'); } /* ── Galeria de fotos ───────────────────── */ .photo-gallery__caption { background: rgba(0,0,0,0.7); } /* ── Mapa Leaflet ───────────────────────── Només s'inverteixen les tiles del mapa de fons. Els marcadors (pins taronja) i els popups (amb foto real) es deixen intactes perquè conserven els seus colors. */ .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.9); } }