/* ============================================================================ pages.css — Layout modules for the standalone content pages (blog.html, about.html, volunteering.html) ---------------------------------------------------------------------------- Built on the existing Webflow tokens (Inter Tight, --black-85/40/15, .container, ._1-1-grid, .block-gap) and re-uses the case-study.css modules (.cs-eyebrow, .cs-tag, .cs-stat, .cs-card, .cs-ph) where they fit. Anything specific to these three pages lives here so jonashapp.webflow.css stays untouched. Module index: 1. Page hero + lead 2. Scroll reveal (fails open: visible without JS) 3. Blog: full LinkedIn grid 4. About: skill groups + contact card 5. Volunteering: timeline (scrollytelling), feature blocks, org grid ========================================================================== */ /* ── 1. Page hero + lead ─────────────────────────────────────────────────── */ .page-hero { grid-row-gap: 24px; } .page-hero .page-lead { font-family: 'Inter Tight', sans-serif; font-size: 22px; line-height: 150%; color: var(--black-40); max-width: 60ch; } .page-hero h1 { max-width: 14ch; } /* A back-link row that matches .container.back-to-homepage but for nav pages */ .page-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ── 2. Scroll reveal ────────────────────────────────────────────────────── */ /* Default = visible. Only once page-reveal.js confirms JS + motion is wanted does it add `.reveal-on` to , which arms the hidden start state. This guarantees content is never stuck invisible if JS fails or is disabled. */ html.reveal-on [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity, transform; } html.reveal-on [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { html.reveal-on [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ── 3. Blog: full LinkedIn grid ─────────────────────────────────────────── */ .blog-feed { width: 100%; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; width: 100%; } .blog-embed { display: block; width: 100%; height: 640px; border: 1px solid var(--black-15); border-radius: 10px; background: #fff; } .blog-card--placeholder { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 280px; padding: 32px; text-align: center; border: 1.5px dashed var(--black-15); border-radius: 10px; color: var(--black-40); } .blog-card--placeholder svg { width: 36px; height: 36px; opacity: 0.45; } .blog-note { font-family: 'Inter Tight', sans-serif; font-size: 14px; color: var(--black-40); } /* ── 4. About: skill groups + contact card ───────────────────────────────── */ .skill-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; width: 100%; } .skill-group { display: flex; flex-direction: column; gap: 12px; } .skill-group-title { font-family: 'Inter Tight', sans-serif; font-size: 16px; font-weight: 500; color: var(--black-85); } .skill-group .cs-tags { gap: 8px; } /* A clean CV row used on the About page */ .cv-list { display: flex; flex-direction: column; gap: 32px; width: 100%; } .cv-item { display: flex; flex-direction: column; gap: 4px; } .cv-item-period { font-family: 'Inter Tight', sans-serif; font-size: 14px; color: var(--black-40); } .contact-card { display: flex; flex-direction: column; gap: 20px; padding: 40px; border: 1px solid var(--black-15); border-radius: 16px; background: #fff; } .contact-card .large-text { color: var(--black-85); } .contact-rows { display: flex; flex-direction: column; gap: 10px; } .contact-row { font-family: 'Inter Tight', sans-serif; font-size: 16px; color: var(--black-85); } .contact-row a { color: var(--black-85); text-decoration: none; border-bottom: 1px solid var(--black-15); } .contact-row a:hover { color: var(--black-40); } /* ── 5. Volunteering ─────────────────────────────────────────────────────── */ :root { --v-accent: #2d9c4c; } /* Timeline (scrollytelling): a vertical track with a fill that grows as you scroll, plus alternating cards on desktop. */ .vtl { position: relative; width: 100%; padding: 8px 0; } .vtl-track { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--black-15); border-radius: 2px; } .vtl-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: linear-gradient(to bottom, var(--v-accent), #5fc77f); border-radius: 2px; transition: height 0.1s linear; } .vtl-items { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; } .vtl-item { position: relative; width: 50%; padding: 24px 48px; box-sizing: border-box; } .vtl-item:nth-child(odd) { left: 0; text-align: right; } .vtl-item:nth-child(even) { left: 50%; text-align: left; } .vtl-dot { position: absolute; top: 32px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--v-accent); z-index: 1; } .vtl-item:nth-child(odd) .vtl-dot { right: -8px; } .vtl-item:nth-child(even) .vtl-dot { left: -8px; } .vtl-year { font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.12em; color: var(--v-accent); margin-bottom: 6px; } .vtl-card { display: inline-flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--black-15); border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 6px 22px rgba(150, 163, 181, 0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; } .vtl-card:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(150, 163, 181, 0.2); } .vtl-org { font-family: 'Inter Tight', sans-serif; font-size: 19px; font-weight: 500; line-height: 125%; color: var(--black-85); } .vtl-role { font-family: 'Inter Tight', sans-serif; font-size: 14px; color: var(--v-accent); } .vtl-text { font-family: 'Inter Tight', sans-serif; font-size: 15px; line-height: 145%; color: var(--black-40); max-width: 42ch; } /* Featured org block: big two-column highlight */ .v-feature { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; padding: 40px; border: 1px solid var(--black-15); border-radius: 20px; background: #fff; } .v-feature.is-reverse { grid-template-columns: 0.9fr 1.1fr; } .v-feature.is-reverse .v-feature-media { order: -1; } .v-feature-body { display: flex; flex-direction: column; gap: 16px; } .v-feature-media { width: 100%; } .v-feature-media .cs-ph { border-radius: 16px; overflow: hidden; } .v-feature-tag { align-self: flex-start; font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-accent); padding: 6px 12px; border: 1px solid var(--v-accent); border-radius: 100px; } /* Podcast strip inside the Fulbright feature */ .v-podcast { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--black-15); border-radius: 14px; background: #f6f7f9; } .v-podcast-icon { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--v-accent); color: #fff; } .v-podcast-icon svg { width: 22px; height: 22px; } .v-podcast-body { display: flex; flex-direction: column; gap: 2px; } .v-podcast-title { font-family: 'Inter Tight', sans-serif; font-size: 16px; font-weight: 500; color: var(--black-85); } .v-podcast-sub { font-family: 'Inter Tight', sans-serif; font-size: 14px; color: var(--black-40); } /* Memberships / Vereine grid */ .v-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; width: 100%; list-style: none; margin: 0; padding: 0; } .v-org { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--black-15); border-radius: 14px; background: #fff; transition: border-color 0.2s ease, transform 0.2s ease; } .v-org:hover { border-color: var(--v-accent); transform: translateY(-2px); } .v-org-name { font-family: 'Inter Tight', sans-serif; font-size: 16px; font-weight: 500; color: var(--black-85); } .v-org-meta { font-family: 'Inter Tight', sans-serif; font-size: 13px; color: var(--black-40); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media screen and (max-width: 991px) { .v-feature, .v-feature.is-reverse { grid-template-columns: 1fr; gap: 24px; } .v-feature.is-reverse .v-feature-media { order: 0; } } @media screen and (max-width: 767px) { .page-hero .page-lead { font-size: 18px; } .blog-embed { height: 600px; } /* Timeline collapses to a single left rail */ .vtl-track { left: 7px; } .vtl-fill { background: linear-gradient(to bottom, var(--v-accent), #5fc77f); } .vtl-item, .vtl-item:nth-child(odd), .vtl-item:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 16px 0 16px 36px; } .vtl-item:nth-child(odd) .vtl-dot, .vtl-item:nth-child(even) .vtl-dot { left: 0; right: auto; } .v-feature { padding: 24px; } .contact-card { padding: 28px; } }