/* ========================================================================== Casa Mia RD B&B — Blog Estende i token di css/style.css (colori, font, spaziature). Non ridefinisce :root — va sempre caricato DOPO style.css. ========================================================================== */ /* ---------- Breadcrumb ---------- */ .blog-breadcrumb { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: #6b6049; /* Solo padding-top (non lo shorthand "padding"): .container fornisce già il padding orizzontale (0 1.5rem) e qui va preservato -- uno shorthand "padding: 6.2rem 0 0" lo azzererebbe (left/right a 0), incollando il breadcrumb al bordo dello schermo. */ padding-top: 6.2rem; } .blog-breadcrumb a { color: var(--jade); text-decoration: none; border-bottom: 1px dotted var(--jade); } .blog-breadcrumb a:hover { color: var(--clay); border-color: var(--clay); } /* ---------- Blog hero (index page) ---------- */ /* Every blog page (index + articles, IT/EN/ES) carries . Unlike the homepage — whose header is deliberately transparent over a photo hero and only turns solid once .scrolled is added by JS — blog pages have a plain cream/paper background right under the header from the first frame, so the header needs a permanent solid background here, not just on scroll. */ body.blog-page .site-header { background: rgba(21, 48, 42, 0.92); backdrop-filter: blur(6px); padding: 0.8rem 0; box-shadow: 0 4px 18px rgba(0,0,0,0.15); } .blog-hero { padding: 2.4rem 0 var(--space-4); background: var(--paper); } .blog-hero .eyebrow { color: var(--jade); } .blog-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.08; max-width: 18ch; margin-bottom: 0.5em; } .blog-hero p { color: #54493a; font-size: 1.05rem; max-width: 56ch; } /* ---------- Category filter pills ---------- */ .blog-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.8rem 0 0; } .blog-filters a { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: var(--ink); border: 1px solid var(--paper-line); background: var(--cream); padding: 0.5em 1em; border-radius: 999px; transition: background .18s ease, color .18s ease, border-color .18s ease; } .blog-filters a:hover, .blog-filters a.active { background: var(--jade); border-color: var(--jade); color: var(--cream); } /* ---------- Post grid / cards ---------- */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; padding: var(--space-4) 0 var(--space-5); } .post-card { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; } .post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(42,38,32,0.10); } .post-card-media { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--jade), var(--deep)); position: relative; display: flex; align-items: center; justify-content: center; } .post-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .post-card-media .play-badge { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: rgba(21,48,42,0.55); border: 1px solid rgba(246,241,228,0.6); display: flex; align-items: center; justify-content: center; transition: transform .18s ease, background .18s ease; } /* card thumbnails with a real video: playable inline, without leaving the page */ .post-card-media[data-yt] { cursor: pointer; } .post-card-media[data-yt]:hover .play-badge { transform: scale(1.08); background: rgba(194,96,60,0.85); } .post-card-media[data-yt]:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; } .post-card-media.is-playing { cursor: default; } .post-card-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .post-card-media .play-badge svg { width: 16px; height: 16px; color: var(--cream); } .post-card-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; } .post-card-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); display: inline-flex; align-items: center; gap: .4em; } .post-card h3 { font-size: 1.2rem; line-height: 1.2; margin: 0; } .post-card p { font-size: 0.92rem; color: #5a4f3d; margin: 0; flex-grow: 1; } .post-card-meta { font-family: var(--font-mono); font-size: 0.7rem; color: #8c8064; margin-top: 0.4rem; } @media (max-width: 980px) { .blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } } /* ---------- Blog pages: IT/EN/ES language switch (plain links, not JS-driven) ---------- */ .lang-switch a { background: none; border: 1px solid rgba(244,239,226,0.35); color: var(--cream-dim); padding: 0.25em 0.55em; border-radius: 3px; text-decoration: none; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; } .lang-switch a.active { background: var(--gold); border-color: var(--gold); color: var(--deep-2); font-weight: 600; } .lang-switch a:hover:not(.active) { border-color: var(--gold); color: var(--gold); } /* ---------- Prominent "Blog" entry in the main site nav ---------- */ .nav-blog-link { display: inline-block; background: var(--gold) !important; color: var(--deep-2) !important; font-weight: 600; padding: 0.4em 0.9em; border-radius: 999px; text-align: center; transition: transform .18s ease, background .18s ease; } .nav-blog-link:hover { background: #eebd76 !important; transform: translateY(-1px); } @media (max-width: 880px) { .nav-blog-link { display: inline-block; padding: 0.5em 1em; } } /* ---------- Persistent "Blog & video" quick link on the mobile header ---------- */ /* .nav-blog-link normally lives inside .main-nav, which slides off-canvas below 880px (see .main-nav in style.css) and is only reachable once the hamburger menu is opened. A second, compact copy — same class, plus this one — sits in .nav-right instead, so the quick link to the blog stays visible in the header even with the menu closed. Hidden on desktop, where the in-nav version above already does the job; hidden by default so it never doubles up if .nav-right is ever restyled without the media query kicking in first. */ .nav-blog-link-mobile { display: none; } @media (max-width: 880px) { .nav-blog-link-mobile { display: inline-flex; align-items: center; font-size: 0.78rem; padding: 0.4em 0.8em; } } /* ---------- Homepage "dal blog" teaser ---------- */ .blog-teaser { padding: var(--space-5) 0; background: var(--paper); } .blog-teaser .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; max-width: none; } .blog-teaser .section-head-link { white-space: nowrap; background: var(--gold); border-color: var(--gold); color: var(--deep-2); font-weight: 700; font-style: italic; text-transform: none; letter-spacing: 0; } .blog-teaser .section-head-link:hover { background: #eebd76; border-color: #eebd76; } .blog-teaser .blog-grid { padding: 0; } /* ---------- Single article ---------- */ .post-hero { padding: 1.6rem 0 var(--space-4); background: var(--paper); } .post-hero .post-card-tag { margin-bottom: 0.8rem; } .post-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; max-width: 22ch; } .post-hero .post-meta { font-family: var(--font-mono); font-size: 0.78rem; color: #6b6049; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1.2rem; } .video-embed { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: var(--deep-2); border-radius: var(--radius); overflow: hidden; margin: 0 0 var(--space-4); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-embed-placeholder { border: 1.5px dashed rgba(246,241,228,0.35); display: flex; align-items: center; justify-content: center; } .video-placeholder-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1.5rem; text-align: center; } .video-placeholder-inner p:first-child { font-size: 1.6rem; margin: 0; } .video-placeholder-inner p:last-child { font-family: var(--font-mono); font-size: 0.78rem; color: var(--cream-dim); max-width: 42ch; margin: 0; } .post-body { padding: 0 0 var(--space-5); background: var(--paper); } .post-body-inner { max-width: 720px; margin: 0 auto; } .post-body-inner h2 { font-size: 1.6rem; margin: 2em 0 0.6em; } .post-body-inner h3 { font-size: 1.25rem; margin: 1.6em 0 0.5em; } .post-body-inner p { font-size: 1.05rem; color: #443c2e; margin-bottom: 1.2em; } .post-body-inner ul, .post-body-inner ol { margin: 0 0 1.4em; padding-left: 1.4em; list-style: disc; } .post-body-inner ol { list-style: decimal; } .post-body-inner li { font-size: 1.02rem; color: #443c2e; margin-bottom: 0.5em; } .post-body-inner blockquote { margin: 1.8em 0; padding: 1rem 1.4rem; border-left: 3px solid var(--jade); background: var(--cream); font-family: var(--font-display); font-style: italic; font-size: 1.1rem; } .post-body-inner figure { margin: 1.8em 0; } .post-body-inner figcaption { font-family: var(--font-mono); font-size: 0.76rem; color: #8c8064; margin-top: 0.5em; } .post-body-inner .info-box { background: var(--paper-dim); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 1.3rem 1.5rem; margin: 1.8em 0; } .post-body-inner .info-box h3 { margin-top: 0; font-size: 1.05rem; } .post-body-inner .info-box ul { margin-bottom: 0; } /* ---------- In-article booking CTA ---------- */ .post-cta { max-width: 720px; margin: var(--space-4) auto 0; background: var(--deep); color: var(--cream); border-radius: var(--radius); padding: 1.8rem 2rem; text-align: center; } .post-cta h3 { font-size: 1.3rem; margin-bottom: 0.5em; } .post-cta p { color: var(--cream-dim); font-size: 0.98rem; margin-bottom: 1.2em; } /* ---------- Related posts ---------- */ .post-related { padding: 0 0 var(--space-5); background: var(--paper); } .post-related h2 { font-size: 1.4rem; margin-bottom: 1.4rem; } /* ---------- In-article FAQ (visible answers for AEO) ---------- */ .post-body-inner .faq-list { margin: 0.4em 0 1.8em; } .post-body-inner .faq-item { border-bottom: 1px solid var(--paper-line); padding: 1rem 0; } .post-body-inner .faq-item summary { cursor: pointer; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; list-style: none; color: var(--ink); } .post-body-inner .faq-item summary::-webkit-details-marker { display: none; } .post-body-inner .faq-item summary::after { content: "+"; float: right; color: var(--jade); font-family: var(--font-mono); } .post-body-inner .faq-item[open] summary::after { content: "\2212"; } .post-body-inner .faq-item p { margin: 0.6em 0 0; color: #5a4f3d; font-size: 1rem; } /* ---------- Footer social icons (match homepage sizing) ---------- */ .footer-social { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .footer-social a { display: inline-flex; align-items: center; gap: 6px; } .footer-social a svg { width: 20px; height: 20px; flex-shrink: 0; } /* ---------- Draft / template marker ---------- */ .draft-banner { background: var(--gold); color: var(--deep-2); font-family: var(--font-mono); font-size: 0.8rem; padding: 0.8rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.6rem; text-align: center; } /* ---------- Card / hero media without a real video: icon on gradient ---------- */ /* Text-only articles (no video): a distinct warm gold/clay treatment — deliberately NOT the jade circular "play" badge used for video cards, so it never reads as "this has a video" at a glance. */ .post-card-media-static { background: linear-gradient(135deg, var(--gold), var(--clay)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; } .post-card-media-static .media-icon { display: flex; align-items: center; gap: 0.5rem; } .post-card-media-static .media-icon svg { width: 38px; height: 38px; color: rgba(21,48,42,0.75); } .post-card-media-static .media-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep-2); background: rgba(246,241,228,0.55); padding: 0.3em 0.8em; border-radius: 999px; } /* ---------- Audio narration cue on card thumbnails ---------- */ /* Some text-only articles also have a spoken narration (currently IT only). Those cards carry data-audio="URL_MP3" directly on .post-card-media(-static) — same interaction pattern as the video play button (click/Enter/Space plays inline, without leaving the page; .post-card-media[data-yt] does the same for video). Stack order top to bottom: content-type icon (e.g. the column for a history piece), then this speaker/pause cue, then the "Solo articolo" label — a plain flex item like the others, not a floating corner badge. */ .post-card-media-static[data-audio] { cursor: pointer; } .post-card-media-static[data-audio]:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; } .post-card-media-static.is-playing { box-shadow: inset 0 0 0 2px rgba(21,48,42,0.35); } .audio-cue { width: 33px; height: 33px; border-radius: 50%; background: rgba(21,48,42,0.55); border: 1px solid rgba(246,241,228,0.6); display: flex; align-items: center; justify-content: center; transition: transform .18s ease, background .18s ease; } .post-card-media-static[data-audio]:hover .audio-cue { transform: scale(1.1); background: rgba(194,96,60,0.85); } .post-card-media-static.is-playing .audio-cue { background: var(--clay); } .audio-cue svg { width: 17px; height: 17px; color: var(--cream); display: block; } .audio-cue .icon-pause { display: none; } .post-card-media-static.is-playing .audio-cue .icon-speaker { display: none; } .post-card-media-static.is-playing .audio-cue .icon-pause { display: block; } /* ---------- Audio narration player on the article page ---------- */ .post-audio { background: var(--paper-dim); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 0 0 var(--space-4); } /* Small icon inline right before the label text — deliberately NOT a big badge: width/height are capped both here and as attributes on the