/* ============================================ Three Day Weekend — blog styles Loads AFTER ../css/style.css and reuses its tokens (fonts, colours, header, footer, buttons). Each post page sets a theme class on : .theme-wine dark, moody (wine bg, lime + fuchsia accents) .theme-olive earthy, calm (olive bg, lime + magenta accents) .theme-apricot warm, friendly (apricot bg, wine + orange accents) New posts: copy a template, swap the theme class, write the content. That's the whole CMS. ============================================ */ /* ---- theme variables ---- */ .theme-wine { --post-hero-bg: var(--wine); --post-hero-ink: var(--beige); --post-hero-title: var(--fuchsia); --post-kicker: var(--lime); --post-accent: var(--lime); --post-accent-ink: var(--wine); --post-shadow: var(--fuchsia); --post-link: var(--wine); --post-deco-a: var(--lime); --post-deco-b: var(--fuchsia); } .theme-olive { --post-hero-bg: var(--olive); --post-hero-ink: var(--beige); --post-hero-title: var(--lime); --post-kicker: var(--magenta); --post-accent: var(--lime); --post-accent-ink: var(--wine); --post-shadow: var(--olive); --post-link: var(--olive); --post-deco-a: var(--magenta); --post-deco-b: var(--lime); } .theme-apricot { --post-hero-bg: #F6A890; --post-hero-ink: var(--wine); --post-hero-title: var(--wine); --post-kicker: var(--wine); --post-accent: var(--orange); --post-accent-ink: #fff; --post-shadow: var(--orange); --post-link: var(--orange); --post-deco-a: var(--beige); --post-deco-b: var(--wine); } .theme-fuchsia { --post-hero-bg: var(--fuchsia); --post-hero-ink: var(--wine); --post-hero-title: var(--wine); --post-kicker: var(--wine); --post-accent: var(--lime); --post-accent-ink: var(--wine); --post-shadow: var(--wine); --post-link: var(--wine); --post-deco-a: var(--lime); --post-deco-b: var(--wine); } .theme-lime { --post-hero-bg: var(--lime); --post-hero-ink: var(--wine); --post-hero-title: var(--wine); --post-kicker: var(--wine); --post-accent: var(--fuchsia); --post-accent-ink: var(--wine); --post-shadow: var(--fuchsia); --post-link: var(--wine); --post-deco-a: var(--fuchsia); --post-deco-b: var(--olive); } .theme-wine-deep { --post-hero-bg: var(--wine-deep); --post-hero-ink: var(--beige); --post-hero-title: var(--lime); --post-kicker: var(--fuchsia); --post-accent: var(--fuchsia); --post-accent-ink: var(--wine); --post-shadow: var(--lime); --post-link: var(--wine); --post-deco-a: var(--fuchsia); --post-deco-b: var(--lime); } .theme-magenta { --post-hero-bg: var(--magenta); --post-hero-ink: var(--wine); --post-hero-title: var(--wine); --post-kicker: var(--olive); --post-accent: var(--olive); --post-accent-ink: var(--beige); --post-shadow: var(--olive); --post-link: var(--olive); --post-deco-a: var(--olive); --post-deco-b: var(--wine); } .theme-orange { --post-hero-bg: var(--orange); --post-hero-ink: var(--wine); --post-hero-title: var(--wine); --post-kicker: var(--wine); --post-accent: var(--lime); --post-accent-ink: var(--wine); --post-shadow: var(--wine); --post-link: var(--wine); --post-deco-a: var(--lime); --post-deco-b: var(--beige); } /* ---- header tweaks (no JS on blog pages: keep the nav visible, hide the burger) ---- */ .menu-toggle { display: none !important; } .site-nav { display: flex !important; } /* keep in step with .logo-mark in css/staging.css so the mark is the same size sitewide */ .logo-mark { display: block; width: 58px; height: auto; } @media (max-width: 620px) { .site-nav { gap: 16px; } .site-nav a { font-size: 13px; } .site-nav .nav-cta { padding: 10px 14px; font-size: 11px; } } /* ---- post hero ---- */ .post-hero { background: var(--post-hero-bg); color: var(--post-hero-ink); padding: 90px 0 70px; border-bottom: 3px solid var(--ink); position: relative; isolation: isolate; overflow: hidden; } .post-hero .wrap { max-width: 860px; position: relative; z-index: 2; } /* hero shapes — any sprite (squiggle / coil / spark / blob), colours follow the theme. --tr sits top-right, --bl bottom-left; add --stroke for line shapes (squiggle, coil). */ .post-deco { position: absolute; z-index: 0; pointer-events: none; } .post-deco--tr { top: 14%; right: 3%; stroke: var(--post-deco-a); fill: var(--post-deco-a); } .post-deco--bl { bottom: 10%; left: 2.5%; stroke: var(--post-deco-b); fill: var(--post-deco-b); } .post-deco--stroke { fill: none; stroke-width: 7; stroke-linecap: round; } @media (max-width: 900px) { .post-deco { transform: scale(.45); } .post-deco--tr { top: 1%; right: -7%; } .post-deco--bl { bottom: 0; left: -6%; } } .post-kicker { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--post-kicker); margin: 0 0 16px; } .post-title { font-family: var(--font-display); color: var(--post-hero-title); font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; margin: 0 0 20px; } .post-lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.45; margin: 0 0 30px; max-width: 34em; } .post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; font-weight: 600; } .post-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--post-accent); color: var(--post-accent-ink); font-family: var(--font-display); font-size: 13px; border: 2px solid var(--ink); flex-shrink: 0; } .post-meta .dot { opacity: .6; } /* ---- article body ---- */ .post-body { padding: 70px 0 30px; } .post-body .wrap { max-width: 760px; } .post-body p { font-size: 1.06rem; line-height: 1.75; margin: 0 0 26px; } .post-body h2 { font-family: var(--font-display); color: var(--wine); font-size: clamp(1.4rem, 2.6vw, 1.8rem); line-height: 1.2; margin: 44px 0 18px; } .post-body a { color: var(--post-link); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .post-body ul, .post-body ol { margin: 0 0 26px; padding-left: 24px; } .post-body li { margin-bottom: 10px; line-height: 1.6; } .post-highlight { background: var(--post-accent); color: var(--post-accent-ink); padding: 0 .18em; } /* TL;DR / callout card */ .post-callout { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 26px 28px; margin: 0 0 40px; box-shadow: 6px 6px 0 var(--post-shadow); } .post-callout-label { display: inline-block; font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--post-accent-ink); background: var(--post-accent); padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; } .post-callout p:last-child { margin-bottom: 0; } /* pull quote */ .post-pullquote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 1.7rem); line-height: 1.4; color: var(--wine); border-left: 6px solid var(--post-accent); padding: 6px 0 6px 26px; margin: 40px 0; } /* checklist */ .post-checklist { list-style: none; padding-left: 0 !important; } .post-checklist li { position: relative; padding-left: 34px; margin-bottom: 12px; } .post-checklist li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--post-accent); color: var(--post-accent-ink); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); } /* stat cards */ .post-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 40px; } .post-stat { background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 20px 18px; text-align: center; box-shadow: 5px 5px 0 var(--post-shadow); } .post-stat strong { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--wine); margin-bottom: 6px; } .post-stat span { font-size: .85rem; opacity: .8; line-height: 1.4; display: block; } @media (max-width: 620px) { .post-stats { grid-template-columns: 1fr; } } /* tags */ .post-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 44px 0 0; } .post-tag { font-size: .8rem; font-weight: 700; border: 2px solid var(--ink); border-radius: 100px; padding: 6px 14px; background: #fff; } /* end-of-post CTA banner */ .post-cta { margin: 70px 0 90px; } .post-cta .wrap { max-width: 760px; } .post-cta-card { background: var(--post-hero-bg); color: var(--post-hero-ink); border: 3px solid var(--ink); border-radius: 20px; padding: 40px 36px; box-shadow: 8px 8px 0 var(--post-shadow); text-align: center; } .post-cta-card h2 { font-family: var(--font-display); color: var(--post-hero-title); font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin: 0 0 12px; } .post-cta-card p { margin: 0 0 24px; opacity: .95; } /* On the dark hero themes the wine button vanishes into the dark card — flip it to lime so it pops. The light themes (apricot, fuchsia, lime, magenta, orange) keep the default wine button, which already contrasts against their bright cards. */ .theme-wine .post-cta-card .btn-primary, .theme-olive .post-cta-card .btn-primary, .theme-wine-deep .post-cta-card .btn-primary { background: var(--lime); color: var(--wine); border-color: var(--ink); box-shadow: 5px 5px 0 var(--ink); } .theme-wine .post-cta-card .btn-primary:hover, .theme-olive .post-cta-card .btn-primary:hover, .theme-wine-deep .post-cta-card .btn-primary:hover { background: var(--lime-dark); box-shadow: 7px 7px 0 var(--ink); } /* ---- prev / next post navigation (injected by blog.js) ---- */ .post-nav { margin: 56px 0 0; } .post-nav-inner { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; } .post-nav-link { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--post-shadow); text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; } .post-nav-link:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--post-shadow); } .post-nav-next { text-align: right; align-items: flex-end; } .post-nav-dir { font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--post-link); } .post-nav-title { font-weight: 700; line-height: 1.3; font-size: 1.02rem; } @media (max-width: 620px) { .post-nav-inner { grid-template-columns: 1fr; } .post-nav-next { text-align: left; align-items: flex-start; } .post-nav-slot { display: none; } } /* ============================================ Blog index (listing) ============================================ */ .blog-hero { background: var(--beige); padding: 80px 0 30px; isolation: isolate; overflow: hidden; } .blog-hero .wrap { position: relative; z-index: 2; } .blog-hero .section-title { max-width: 640px; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .blog-card { display: flex; flex-direction: column; background: #fff; border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 6px 6px 0 var(--card-shadow, var(--wine)); transition: transform .2s ease, box-shadow .2s ease; } .blog-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--card-shadow, var(--wine)); } .blog-card-band { background: var(--card-band, var(--wine)); color: var(--card-band-ink, var(--beige)); padding: 22px 24px; border-bottom: 3px solid var(--ink); } .blog-card-band .cat { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; display: block; margin-bottom: 10px; color: var(--card-cat, inherit); } .blog-card-band h3 { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; } .blog-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; } .blog-card-body p { margin: 0; font-size: .95rem; opacity: .85; flex-grow: 1; } .blog-card-meta { font-size: .8rem; font-weight: 600; opacity: .65; } @media (max-width: 940px) { .blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }