:root { --green-dark: #013914; --green-light: #77b72b; --green-mid: #74c69d; --text-dark: #040404; --muted: #3d5a49; --bg: #ffffff; --panel-bg: #f7fbf8; --accent-contrast: #ffffff; --glass: rgba(255,255,255,0.6); --shadow-strong: 0 28px 60px rgba(6,20,10,0.14); --shadow-soft: 0 10px 30px rgba(6,20,10,0.06); --radius: 16px; --ease: cubic-bezier(.2,.9,.25,1); --card-width-desktop: 420px; --card-width-tablet: 360px; --card-width-mobile: 86vw; --nav-width: 92%; --desktop-width: 80vw; --desktop-height: 80vh; } :root { --font-head: "Merriweather", Georgia, serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } h1,h2,h3 { font-family: var(--font-head); font-weight:700; } body, p, a, li { font-family: var(--font-body); font-weight:400; } /* Dark mode variables (applied by .dark on or ) */ .dark { --bg: #07120f; --text-dark: #dfeee6; --muted: #9bb6a8; --panel-bg: #0b1a18; --accent-contrast: #0b221a; --glass: rgba(10,15,13,0.45); --shadow: 0 18px 40px rgba(0,0,0,0.6); } * { box-sizing: border-box; } html { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; background: var(--bg); color: var(--text-dark); } body { margin: 0; line-height: 1.5; background: var(--bg); color: var(--text-dark); } /* GDPR design general beginning here till */ /* Consent modal */ .consent-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 98; } .consent-backdrop.active { opacity: 1; pointer-events: auto; } .consent-modal { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%) translateY(24px); width: min(760px, 92vw); max-height: 80vh; overflow: auto; background: var(--bg); color: var(--text-dark); border: 1px solid rgba(11,34,26,0.08); border-radius: 14px; box-shadow: 0 20px 60px rgba(10,30,20,0.18); z-index: 99; opacity: 0; pointer-events: none; transition: transform .26s cubic-bezier(.2,.9,.3,1), opacity .22s ease; } .consent-modal.active { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .consent-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1rem; background: var(--panel-bg); border-bottom: 1px solid rgba(11,34,26,0.08); } .consent-title { margin: 0; color: var(--green-dark); } .consent-body { padding: 1rem; display: grid; gap: 0.9rem; } .consent-categories { display: grid; gap: 0.9rem; } .consent-item { border: 1px solid rgba(11,34,26,0.08); border-radius: 10px; background: var(--panel-bg); padding: 0.8rem 0.9rem; } .consent-item-head { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; } .consent-chip { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 999px; background: #f0f7f3; color: var(--green-dark); font-size: 0.8rem; border: 1px solid rgba(11,34,26,0.08); } .consent-toggle { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; } .consent-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; padding: 0.9rem 1rem 1.1rem; border-top: 1px solid rgba(11,34,26,0.08); } .btn-ghost { background: transparent; color: var(--green-dark); border: 1px solid rgba(11,34,26,0.08); } .btn-accent { background: var(--green-dark); color: var(--accent-contrast); } .visually-hidden { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 520px) { .consent-actions { grid-template-columns: 1fr; } } /* ---- Loader v2 ---- */ #page-loader { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 9999; transition: opacity .45s ease, visibility .45s ease; opacity: 1; visibility: visible; } #page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* inner */ .loader-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; text-align: center; } .loader-logo { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,250,246,0.98)); box-shadow: 0 10px 30px rgba(10,30,20,0.12); } /* ring baseline: rotate so stroke draws clockwise */ .loader-ring { transform: rotate(-90deg); } /* background stroke */ .ring-bg { transition: opacity .25s ease; } /* animated arc - we'll animate dashoffset / dasharray from JS */ .ring-bar { transform-origin: 60px 60px; transition: stroke-dashoffset .9s linear, stroke-dasharray .45s ease; } /* text */ .loader-text { font-size: .95rem; color: var(--muted); font-weight: 600; } /* subtle pop */ @keyframes loader-pop { 0% { transform: translateY(6px) scale(.98); opacity: 0 } 60% { transform: translateY(-4px) scale(1.02); opacity: 1 } 100% { transform: translateY(0) scale(1); } } .loader-inner { animation: loader-pop .6s cubic-bezier(.2,.9,.3,1); } /* reduced motion */ @media (prefers-reduced-motion: reduce) { .loader-inner { animation: none; } .ring-bar { transition: none; } } /* Layout helpers */ .container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; display: fle; background-attachment: fixed; border-radius: 8px; } .section { padding: 3rem 0; background-color:; } @media (min-width: 768px) { .section { padding: 6rem 0; } } .section-title { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 1rem; color: var(--green-dark); } .muted { color: var(--muted); } /* Reset */ /* Site shell */ .site{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:48px 24px} /* Brand */ .brand{display:flex;align-items:center;gap:14px;z-index:1;pointer-events:none} .brand svg{width:96px;height:96px;display:block} .brand h1{margin:0;font-size:20px;letter-spacing:0.6px;color:var(--green-dark);font-weight:700;pointer-events:auto} /* Hamburger */ .hamburger{position:fixed;z-index:60;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.65));box-shadow:var(--shadow);backdrop-filter:blur(6px);border:1px solid rgba(10,30,20,0.06);cursor:pointer;transition:transform .28s var(--ease),right .28s var(--ease),top .28s var(--ease)} .hamburger:focus{outline:3px solid rgba(119,183,43,0.14)} .hamburger .lines{width:28px;height:18px;position:relative} .hamburger .lines span{position:absolute;left:0;right:0;height:2px;background:var(--green-dark);display:block;border-radius:2px;transition:transform .28s var(--ease),opacity .18s var(--ease)} .hamburger .lines span:nth-child(1){top:0} .hamburger .lines span:nth-child(2){top:8px} .hamburger .lines span:nth-child(3){top:16px} /* Mobile hamburger bottom-right */ .hamburger.mobile{right:18px;bottom:18px;top:auto;width:64px;height:64px;border-radius:18px} /* Desktop hamburger top-right */ .hamburger.desktop{right:28px;top:28px;bottom:auto;width:56px;height:56px;border-radius:12px} /* Overlay */ .menu-overlay{position:fixed;inset:0;z-index:50;pointer-events:none} /* --------------------------- MOBILE PANEL (default) two-column: left updates, right nav --------------------------- */ .menu-panel{ position:fixed; left: 0; bottom:3vh; top:auto; height:80vh; width: 90vH; max-width: 820px; transform:translateX(110%); transition:transform .48s var(--ease), opacity .28s var(--ease); display:grid; grid-template-columns: 1fr 260px; /* left updates (wider), right nav (compact) */ gap:18px; pointer-events:auto; z-index:55; padding:18px; } /* panel visual */ .panel-inner{ width:100%; height:100%; display:flex; gap:0; border-radius:18px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.18)); border:1px solid rgba(10,30,20,0.06); box-shadow:var(--shadow); backdrop-filter: blur(8px); padding:0; } /* LEFT: updates (use space, less crowded) */ .updates{ padding:20px; display:flex; flex-direction:column; gap:14px; min-width:0; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)); } .updates h3{margin:0;font-size:13px;color:var(--muted);font-weight:700;letter-spacing:0.6px} .update-list{display:flex;flex-direction:column;gap:12px;overflow:auto;padding-right:6px} /* make each update more airy and image-focused */ .update{ display:flex; gap:14px; align-items:flex-start; padding:12px; border-radius:12px; border:1px solid rgba(10,30,20,0.03); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); } .update .thumb{ width:96px;height:72px;border-radius:10px;flex:0 0 96px;background:linear-gradient(135deg,var(--green-mid),var(--green-light));display:flex;align-items:center;justify-content:center;color:var(--accent-contrast);font-weight:800;font-size:14px;overflow:hidden;object-fit:cover; } .update .meta{flex:1;min-width:0} .update .meta .title{font-size:14px;margin:0;color:var(--text-dark);font-weight:800} .update .meta .excerpt{font-size:13px;margin-top:6px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis} /* RIGHT: nav (vertical, roomy) */ .nav{ padding:22px; display:flex; flex-direction:column; gap:18px; align-items:flex-end; justify-content:center; min-width:0; } .nav .links{display:flex;flex-direction:column;gap:18px;align-items:flex-end} .nav a{ text-decoration:none; color:var(--dark-green); font-weight:800; font-size:18px; padding:12px 18px; border-radius:12px; transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease); letter-spacing:0.2px; } .nav a:hover{transform:translateX(8px);background:rgba(7,40,20,0.03)} .nav .cta{background:grey;color:var(--accent-contrast);padding:12px 18px;border-radius:12px;font-weight:900;box-shadow:0 10px 30px rgba(1,57,20,0.12)} .nav #open-people-browser { background-color: transparent; color: white; } /* open state mobile */ .menu-panel.open{transform:translateX(0)} /* hamburger morph */ .hamburger.open .lines span:nth-child(1){transform:translateY(8px) rotate(45deg)} .hamburger.open .lines span:nth-child(2){opacity:0} .hamburger.open .lines span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* --------------------------- DESKTOP PANEL (drop from top, large, different layout) --------------------------- */ @media(min-width:900px){ .menu-panel{ left:50%; right:auto; top:0; bottom:auto; transform:translateX(-50%) translateY(-120%); width:var(--desktop-width); height:var(--desktop-height); max-width:1200px; padding:0; display:block; transition:transform .48s var(--ease), opacity .36s var(--ease); pointer-events:auto; } .panel-inner{ height:100%; width:100%; border-radius:var(--radius); display:grid; grid-template-rows: auto 1fr; /* top: nav row, bottom: content (social previews + updates) */ overflow:hidden; } /* top row: inline nav (centered) */ .panel-inner > .nav{ grid-row:1/2; display:flex; align-items:center; justify-content:space-between; padding:28px 36px; gap:20px; background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.45)); border-bottom:1px solid rgba(10,30,20,0.04); } /* nav links inline and centered */ .nav .links{ display:flex; flex-direction:row; gap:28px; align-items:center; justify-content:center; margin:0 auto; } .nav a{font-size:16px;padding:10px 12px;border-radius:10px;color:var(--green-dark);font-weight:800} .nav a:hover{transform:translateY(-4px);background:rgba(7,40,20,0.03)} /* right side of top row: CTA */ .nav .cta{padding:10px 16px;border-radius:10px} /* bottom area: split into two columns: left social previews (3 across), right updates list */ .panel-inner > .updates{ grid-row:2/3; padding:28px; display:flex; flex-direction:column; gap:18px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)); } /* create a social preview strip above updates content */ .social-strip{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; align-items:stretch; width:100%; } .social-preview{ border-radius:12px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(10,30,20,0.03); display:flex; flex-direction:column; min-height:140px; transition:transform .28s var(--ease), box-shadow .28s var(--ease); } .social-preview:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(10,30,20,0.08)} .social-preview .img{ height:110px; background:linear-gradient(135deg,var(--green-mid),var(--green-light)); display:block; width:100%; object-fit:cover; } .social-preview .meta{ padding:12px 14px; display:flex; flex-direction:column; gap:6px; } .social-preview .meta .title{font-weight:800;color:var(--text-dark);font-size:14px} .social-preview .meta .excerpt{font-size:13px;color:var(--muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* right column inside bottom area: updates list (narrower) */ .panel-bottom{ display:grid; grid-template-columns: 1fr 420px; gap:20px; align-items:start; width:100%; } /* move existing update-list into the right column on desktop */ .panel-bottom .update-list{max-height:calc(var(--desktop-height) - 220px);overflow:auto;padding-right:6px} /* when panel is closed it sits above the viewport */ .menu-panel{opacity:0} .menu-panel.open{transform:translateX(-50%) translateY(0);opacity:1} } /* Accessibility helpers */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* small utilities */ .feed-note,.social-hint{font-size:12px;color:var(--muted);margin-top:auto;padding-top:6px;text-align:right} /* subtle staggered reveal for desktop previews */ @media(min-width:900px){ .social-preview{opacity:0;transform:translateY(8px);transition:opacity .36s var(--ease), transform .36s var(--ease)} .menu-panel.open .social-preview{opacity:1;transform:translateY(0)} .menu-panel.open .social-preview:nth-child(1){transition-delay:.06s} .menu-panel.open .social-preview:nth-child(2){transition-delay:.12s} .menu-panel.open .social-preview:nth-child(3){transition-delay:.18s} } /* smooth anchor scrolling */ html{scroll-behavior:smooth} /* Menu footer, logo and theme toggle styles (append to your stylesheet) */ .menu-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-top: 1px solid rgba(10,30,20,0.03); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); width: 100%; box-sizing: border-box; } /* Footer columns */ .menu-footer .footer-left, .menu-footer .footer-right { display: flex; align-items: center; gap: 12px; } /* Logo */ .menu-logo { display: block; width: 84px; height: auto; object-fit: contain; border-radius: 8px; cursor: pointer; -webkit-user-drag: none; user-select: none; filter: none; } /* Theme toggle button (footer) */ .header-actions .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 1px solid rgba(10,30,20,0.06); padding: 8px 10px; border-radius: 10px; font-size: 18px; line-height: 1; cursor: pointer; transition: transform .12s ease, background .18s ease, box-shadow .18s ease; color: var(--text-dark); } .header-actions .icon-btn:hover { transform: translateY(-3px); background: rgba(7,40,20,0.03); box-shadow: 0 8px 20px rgba(1,57,20,0.06); } .header-actions .icon-btn[aria-pressed="true"] { background: linear-gradient(90deg, var(--green-mid), var(--green-light)); color: var(--accent-contrast); border-color: rgba(1,57,20,0.12); box-shadow: 0 10px 30px rgba(1,57,20,0.12); } /* If you used .pill variant for inline nav, make it visually consistent */ .links .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(10,30,20,0.04); background: transparent; color: var(--green-dark); font-weight: 800; cursor: pointer; transition: transform .12s var(--ease), background .12s var(--ease); } .links .pill:hover { transform: translateY(-3px); background: rgba(7,40,20,0.03); } /* Mobile: ensure footer sticks to bottom of the opened panel */ @media (max-width: 899px) { .panel-inner { display: flex; flex-direction: column; } .menu-footer { margin-top: auto; padding: 14px 18px; border-top: 1px solid rgba(10,30,20,0.03); } .menu-logo { width: 72px; } .header-actions .icon-btn { padding: 8px; font-size: 16px; } } /* Desktop: footer inside large drop-down panel */ @media (min-width: 900px) { .menu-footer { padding: 18px 28px; border-top: 1px solid rgba(10,30,20,0.04); } .menu-logo { width: 96px; } .header-actions .icon-btn { padding: 10px 12px; font-size: 18px; } /* keep footer visually separated on large panels */ .panel-inner { display: grid; grid-template-rows: auto 1fr auto; } .menu-footer { align-self: end; } } /* Small accessibility & focus styles */ .header-actions .icon-btn:focus { outline: 3px solid rgba(119,183,43,0.14); outline-offset: 2px; } /* Optional: invert logo in dark mode if needed (toggle class 'dark' on html/body) */ html.dark .menu-logo { filter: brightness(.95) contrast(1.05); } /* Ensure footer content doesn't overflow on narrow panels */ .menu-footer img, .menu-footer .icon-btn { max-width: 48%; } /* Ensure panel-inner stacks vertically on mobile and allows internal scrolling */ .panel-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; /* allow children to shrink for scrolling */ overflow: hidden; /* keep outer container tidy */ } /* Make updates area scrollable and leave footer visible */ .updates { flex: 1 1 auto; min-height: 0; /* critical for children to scroll inside flex */ overflow: auto; padding: 14px; } /* Keep nav compact on mobile so it doesn't push footer off-screen */ .nav { flex: 0 0 auto; padding: 12px 16px; } /* Footer sticks to bottom and is always visible after scrolling updates */ .menu-footer { flex: 0 0 auto; margin-top: 8px; border-top: 1px solid rgba(10,30,20,0.03); padding: 12px 16px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); } /* Make logo and toggle clearly visible on small screens */ .menu-logo { width: 64px; height: auto; display: block; object-fit: contain; } @media (max-width: 899px) { .menu-footer { } .menu-footer img { position: relative; left: 20vH; align-content: center; align-items: center; } .menu-footer #theme-toggle { display: ; background-color: ; right: 10vH; position: relative; } } @media (max-width: 899px) { .updates { width: 30vH; margin-bottom: 50px; position: absolut; background-color: ; } } /* Ensure theme button is visible and not clipped */ .header-actions .icon-btn { display: inline-flex; min-width: 44px; min-height: 40px; padding: 8px; border-radius: 10px; font-size: 18px; } /* Make sure the mobile panel has internal padding but not too large */ .menu-panel { height: 86vh; padding: 12px; box-sizing: border-box; } /* If you previously limited footer children width, relax it on mobile */ @media (max-width: 899px) { .menu-footer img, .menu-footer .icon-btn { max-width: none; } } /* ---------- Hero base ---------- */ .hero { position: relative; min-height: 90vh; display: block; overflow: hidden; isolation: isolate; background-color: #07110a; color: var(--accent-contrast); } /* Background image layer (parallax-ready) */ .hero::before { content: ""; position: absolute; inset: 0; background-image: url("pictures/l-intro-1730955588.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; will-change: transform; transform-origin: center center; transition: transform 0.9s var(--ease); z-index: 0; filter: saturate(.95) contrast(.98) brightness(.96); } /* Soft color wash for contrast */ .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,18,12,0.72) 0%, rgba(6,18,12,0.36) 40%, rgba(6,18,12,0.06) 100%); mix-blend-mode: multiply; z-index: 1; pointer-events: none; } /* ---------- Left-anchored content panel ---------- */ .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 7.6rem; padding: clamp(28px, 6vw, 64px); max-width: 56ch; margin-left: clamp(3vw, 6vw, 8rem); margin-top: 6vh; margin-bottom: 6vh; color: var(--accent-contrast); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); border-radius: 12px; backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05); box-shadow: 0 18px 48px rgba(2,8,4,0.18); transition: transform .36s var(--ease), box-shadow .36s var(--ease); } /* Fallback for browsers without backdrop-filter */ @supports not ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) { .hero-content { background: linear-gradient(180deg, rgba(0,0,0,0.36), rgba(0,0,0,0.18)); } } /* Title and subtitle */ .hero-title { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.02; margin: 0; font-weight: 900; letter-spacing: -0.02em; color: #fff; text-shadow: 0 10px 30px rgba(0,0,0,0.45); } .hero-sub { font-size: clamp(1rem, 2.2vw, 1.25rem); margin: 0; color: rgba(255,255,255,0.92); max-width: 48ch; } /* Logo (if present) */ .logo { margin: 0 0 1rem 0; } /* ---------- CTA: modern pill with arrow ---------- */ .hero-content .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,245,245,0.96)); color: #07110a; font-weight: 800; text-decoration: none; border: 1px solid rgba(6,20,10,0.06); box-shadow: 0 10px 30px rgba(6,20,10,0.08); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); position: relative; } /* Arrow via pseudo-element */ .hero-content .btn::after { content: "→"; display: inline-block; font-weight: 900; transform: translateX(0); transition: transform .18s var(--ease); opacity: 0.98; } /* Hover / focus micro-interaction */ .hero-content .btn:hover, .hero-content .btn:focus { transform: translateY(-3px); box-shadow: 0 18px 48px rgba(6,20,10,0.12); background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,250,0.98)); } .hero-content .btn:hover::after, .hero-content .btn:focus::after { transform: translateX(6px); } /* Focus outline for accessibility */ .hero-content .btn:focus { outline: 3px solid rgba(119,183,43,0.14); outline-offset: 6px; } /* ---------- Parallax / scroll state (toggle .scrolled on .hero via JS) ---------- */ .hero.scrolled::before { transform: translateY(-6%); } /* subtle content lift when scrolled */ .hero.scrolled .hero-content { transform: translateY(-6px); } /* ---------- Mobile / responsive adjustments ---------- */ @media (max-width: 900px) { .hero::before { background-attachment: scroll; } /* avoid fixed on mobile */ .hero-content { margin-left: 0; padding: 20px; max-width: 92%; align-items: center; text-align: center; border-radius: 12px; backdrop-filter: blur(6px); } .hero-title { font-size: clamp(1.6rem, 8vw, 2.6rem); } .hero-sub { max-width: 60ch; color: rgba(255,255,255,0.95); } .hero-content .btn { padding: 12px 18px; } } /* ---------- Subtle animated accent (optional) ---------- */ .hero .accent-ring { position: absolute; right: 6%; top: 20%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(119,183,43,0.12), rgba(119,183,43,0.02) 40%); filter: blur(18px); pointer-events: none; z-index: 1; transform: translateZ(0); transition: opacity .4s var(--ease), transform .6s var(--ease); } @media (max-width:1100px) { .hero .accent-ring { display:none; } } /* ---------- Reduced motion preference ---------- */ @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after, .hero-content, .hero-content .btn, .hero .accent-ring { transition: none !important; animation: none !important; } } /* ---------- Utility: ensure readable links inside hero ---------- */ .hero a { color: inherit; } /* ---------- Candidate: layout and visual rules ---------- */ .candidate-panel { padding: clamp(28px, 4vw, 56px) 2rem; background: linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%); color: #07110a; } /* Desktop two-column layout */ .candidate-inner { display: flex; gap: clamp(20px, 4vw, 48px); max-width: 1200px; margin: 0 auto; flex-wrap: nowrap; /* keep two columns on desktop */ align-items: flex-start; /* align to top so image doesn't shift when text grows */ box-sizing: border-box; } /* text column */ .candidate-text { flex: 1 1 52%; min-width: 300px; display: flex; flex-direction: column; gap: 14px; justify-content: flex-start; box-sizing: border-box; padding-right: clamp(12px, 2vw, 28px); } /* name and role (original desktop elements) */ .candidate-name { font-size: clamp(1.6rem, 3.6vw, 2.6rem); margin: 0; font-weight: 900; color: #0b3f1f; letter-spacing: -0.01em; } .candidate-role { font-size: 0.98rem; color: #4f5a50; font-weight: 700; } /* photo column: non-shrinking and vertically anchored with sticky on desktop */ .candidate-photo { flex: 0 0 40%; max-width: 480px; width: min(40%, 480px); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px rgba(6,20,10,0.12); background: linear-gradient(180deg,#eef6ea,#f7fbf6); box-sizing: border-box; max-height: calc(70vh - 40px); /* keep the image visually stable when text grows: sticky on desktop */ position: relative; } /* apply sticky only on larger viewports so it doesn't interfere with mobile */ @media (min-width: 901px) { .candidate-photo { position: sticky; top: calc(12vh); /* keeps image roughly centered in viewport without jumping */ align-self: start; /* anchor to top of its column for consistent placement */ } } /* image fill */ .candidate-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.9,.25,1); } @media (hover:hover) and (pointer:fine) { .candidate-photo:hover img { transform: scale(1.03); } } /* ---------- Collapsible description (preview + fade) ---------- */ .candidate-desc { position: relative; font-size: 1rem; line-height: 1.6; color: #233028; margin: 0; max-width: 48ch; --collapsed-h: 220px; max-height: var(--collapsed-h); overflow: hidden; transition: max-height .36s cubic-bezier(.2,.9,.25,1); -webkit-mask-image: linear-gradient(#000 60%, rgba(0,0,0,0.6)); mask-image: linear-gradient(#000 60%, rgba(0,0,0,0.6)); } .candidate-desc.expanded { max-height: 2000px; -webkit-mask-image: none; mask-image: none; } .candidate-desc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5.2rem; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 85%); transition: opacity .28s ease; opacity: 1; } .candidate-desc.expanded::after { opacity: 0; } /* read-more control */ .candidate-readmore { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; background: linear-gradient(180deg,#77b72b,#5fa21f); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 800; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 8px 24px rgba(7,40,20,0.08); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; } .candidate-readmore .chev { display:inline-block; transform: translateX(0); transition: transform .22s cubic-bezier(.2,.9,.25,1); } .candidate-readmore[aria-expanded="true"] .chev { transform: translateX(6px) rotate(90deg); } /* actions container */ .candidate-actions { display:flex; gap:12px; margin-top:6px; flex-wrap:wrap; } /* ---------- Mobile: show cloned header, center image, then description ---------- */ @media (max-width: 900px) { /* stacked layout */ .candidate-inner { display:flex; flex-direction:column; gap:16px; align-items:stretch; } /* cloned header (mobile only) */ .candidate-header--mobile { display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; padding:6px 12px; } /* hide original name/role on mobile to avoid duplicate display */ .candidate-text .candidate-name, .candidate-text .candidate-role { display: none; } .candidate-photo { width:92%; max-width:520px; margin:0 auto; min-height:44vh; max-height:64vh; border-radius:12px; } .candidate-desc { --collapsed-h:160px; max-width:92%; margin:0 auto; } .candidate-actions { display:flex; justify-content:center; gap:12px; margin-top:12px; } } /* very small screens */ @media (max-width: 520px) { .candidate-desc { --collapsed-h:140px; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { .candidate-photo img, .candidate-desc, .candidate-readmore { transition: none !important; } .candidate-desc::after { display: none; } } /* slogans */ .slogans { padding: 1rem 0 2rem; background: linear-gradient(90deg, rgba(149,213,178,0.04), rgba(27,67,50,0.02)); } .slogans-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: center; margin-bottom: 0.6rem; } .badge { background: var(--green-dark); color: var(--accent-contrast); padding: 0.5rem .9rem; border-radius: 999px; font-weight: 700; } .slogan { color: #234f3f; font-size: 0.95rem; } /* generic card grid */ .card-grid { display: grid; gap: 1rem; } @media (min-width:700px) { .card-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } .card { border: 1px solid rgba(11,34,26,0.08); border-radius: 0.75rem; padding: 1rem; background: var(--panel-bg); } /* band */ .band { position: relative; min-height: 60vh; display: grid; place-items: center; text-align: center; color: var(--accent-contrast); } .band h2 { color: lightgrey; } .band p { color: white; font-size: 16pt; text-align: center; width: 70vH; } .band::before { content: ""; position: absolute; inset: 0; background-image: url("pictures/20251227_Die_Ansbacher.png"); background-size: cover; background-position: top; background-attachment: fixed; opacity: 0.95; } .band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,67,50,0.62), rgba(27,67,50,0.76)); } .band-content { position: relative; z-index: 2; padding: 2rem; } /* legal panels (left slide) */ .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 99; } .backdrop.active { opacity: 1; pointer-events: auto; } .legal-panel { position: fixed; top: 0; left: 0; height: 100vh; width: min(640px,92vw); background: var(--bg); color: var(--text-dark); border-right: 3px solid var(--green-dark); box-shadow: 8px 0 24px rgba(0,0,0,0.18); transform: translateX(-100%); transition: transform .3s ease; z-index: 100; display: flex; flex-direction: column; touch-action: pan-y; } .legal-panel.active { transform: translateX(0); } .legal-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid rgba(11,34,26,0.06); background: var(--panel-bg); } .legal-title { font-weight: 700; color: var(--green-dark); } .legal-close { border: none; background: transparent; color: var(--green-dark); font-size: 1.25rem; cursor: pointer; } .legal-content { padding: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .swipe-hint { font-size: .85rem; color: #557a68; padding: .5rem 1rem; border-top: 1px solid rgba(11,34,26,0.08); } /* Candidates: central mayor + two left / two right layout */ /* Equal-height news cards with local placeholder images */ .news-section { padding: 3rem 1rem; color: var(--text-dark); font-family: var(--font-body); } /* Container stretches to 90% of viewport on desktop */ .news-container { max-width: 100%; margin: 0 auto; padding: 0 2.5vw; } @media (min-width: 900px) { .news-container { width: 90vw; max-width: 1400px; margin-left: 0; } } /* Grid: each row becomes equal height via grid-auto-rows: 1fr */ .card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; grid-auto-rows: 1fr; /* ensures each grid row is equal height */ } @media (min-width: 900px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: stretch; } } /* Make each card a flex container that fills the grid cell */ .card { display: block; } .card-link { display: flex; flex-direction: column; height: 100%; /* crucial: stretch to fill the grid row */ text-decoration: none; color: inherit; border-radius: calc(var(--radius) - 4px); background: var(--panel-bg); overflow: hidden; padding: 0; } /* Media area with fixed aspect ratio; image covers */ .card-media { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #e9efe9; } .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Body area grows to fill remaining space so all cards match height */ .card-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.2rem; flex: 1 1 auto; } /* Ensure excerpt can grow but cards remain equal */ .card-excerpt { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.45; flex: 1 1 auto; } /* Footer sticks to bottom when content is short */ .card-footer { display: flex; gap: 0.6rem; align-items: center; font-size: 0.88rem; color: var(--muted); margin-top: 0.4rem; } /* Title and meta */ .card-title { margin: 0; font-family: var(--font-head); font-size: 1.05rem; color: var(--text-dark); } .card-meta { font-size: 0.9rem; color: var(--muted); } /* Optional subtle hover tint (remove if undesired) */ .card-link:hover, .card-link:focus { background: rgba(116,198,157,0.04); } /* Small screens adjustments */ @media (max-width: 520px) { .card-media { aspect-ratio: 4 / 3; } .card-body { padding: 0.9rem; } } /* ---------- Stage & Carousel ---------- */ .candidates-stage { display:flex; align-items:center; gap:12px; position:relative; margin:18px 0; } .carousel-viewport { flex:1 1 auto; overflow:hidden; border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(6,20,10,0.03); box-shadow:var(--shadow-soft); min-height:260px; position:relative; } .carousel-list { display:flex; gap:20px; padding:22px; margin:0; list-style:none; align-items:stretch; transition:transform .48s var(--ease); will-change:transform; } /* Candidate base */ .carousel-list .candidate { flex:0 0 auto; width:300px; border-radius:12px; overflow:hidden; background:linear-gradient(180deg,var(--panel),var(--bg)); border:1px solid rgba(6,20,10,0.04); box-shadow:var(--shadow-soft); transform-origin:center center; transition: transform .36s var(--ease), filter .36s var(--ease), opacity .36s var(--ease); display:flex; flex-direction:column; cursor:pointer; } /* Photo and meta */ .carousel-list .candidate .photo { height:300px; background:linear-gradient(135deg,var(--accent), #9fd07a); display:flex; align-items:center; justify-content:center; overflow:hidden; } .carousel-list .candidate .photo img { width:100%; height:100%; object-fit:cover; display:block; } .carousel-list .candidate .meta { padding:14px; display:flex; flex-direction:column; gap:8px; } .candidate .name { font-size:18px; font-weight:800; color:var(--accent-dark); margin:0; } .candidate .role { font-size:13px; color:var(--muted); margin:0; } .candidate .bio { font-size:13px; color:rgba(4,4,4,0.75); line-height:1.35; margin-top:6px; } /* States applied by JS */ .carousel-list .candidate.center { transform: translateY(-12px) scale(1.06); box-shadow: var(--shadow-strong); z-index:30; opacity:1; filter:none; } .carousel-list .candidate.side { transform: translateY(-6px) scale(0.96) rotateY(8deg); opacity:0.95; z-index:20; filter: saturate(0.98) contrast(0.98); } .carousel-list .candidate.off { transform: translateY(0) scale(0.86) rotateY(12deg); opacity:0.42; filter: blur(0.6px) grayscale(0.06); z-index:10; } /* Focus styles */ .carousel-list .candidate:focus-within, .carousel-list .candidate:focus { outline:3px solid rgba(119,183,43,0.12); outline-offset:6px; } /* Arrow buttons */ .carousel-arrow { width:48px; height:48px; min-width:48px; border-radius:12px; border:0; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8)); box-shadow: var(--shadow-soft); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--accent-dark); font-weight:800; transition: transform .18s ease, opacity .18s ease; } .carousel-arrow:hover { transform: translateY(-3px); } .carousel-arrow[disabled] { opacity:0.36; cursor:default; transform:none; } /* ---------- Responsive behavior ---------- */ @media (max-width:900px) { .carousel-list { padding:16px; gap:14px; } .carousel-list .candidate { width:78vw; min-width:78vw; border-radius:12px; } .carousel-viewport { min-height:420px; } /* immersive mobile card */ /* show only center on small screens for clarity */ .carousel-list .candidate.side, .carousel-list .candidate.off { display:none; } .carousel-list .candidate.center { transform: translateY(-6px) scale(1.02); } .carousel-arrow { width:44px; height:44px; } } /* Desktop spacing */ @media (min-width:1200px) { .carousel-viewport { padding:8px; } .carousel-list { gap:28px; padding:28px; } .carousel-list .candidate { width:320px; } } /* ---------- People list drawer (right) ---------- */ .people-list-backdrop { position:fixed; inset:0; background:rgba(6,10,8,0.36); opacity:0; pointer-events:none; transition:opacity .28s var(--ease); z-index:60; } .people-list-backdrop.active { opacity:1; pointer-events:auto; } .people-list { position:fixed; top:0; right:-420px; width:380px; max-width:92vw; height:100vh; background: linear-gradient(180deg,var(--panel),var(--bg)); box-shadow: 0 30px 80px rgba(6,20,10,0.28); border-left:1px solid rgba(6,20,10,0.04); transition: right .36s var(--ease), transform .36s var(--ease); z-index:70; display:flex; flex-direction:column; padding:12px; will-change: right, transform; } .people-list.active { right:0; } /* Drawer header & controls */ .people-list-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 6px; border-bottom:1px solid rgba(6,20,10,0.03); } .people-list-header strong { font-weight:800; color:var(--accent-dark); } /* Body scroll area */ .people-list-body { overflow:auto; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:0; } /* Individual entries (populated by JS) */ .people-entry { display:flex; gap:10px; align-items:center; width:100%; padding:10px 12px; border-radius:10px; background:transparent; border:1px solid rgba(6,20,10,0.03); cursor:pointer; transition: background .14s ease, transform .12s ease, box-shadow .12s ease; } .people-entry:hover { background: rgba(7,40,20,0.3); transform: translateX(4px); } .people-entry:focus { outline:3px solid rgba(119,183,43,0.12); outline-offset:3px; } /* Active highlight synced with carousel */ .people-entry.active { background: linear-gradient(90deg, rgba(119,183,43,0.08), rgba(119,183,43,0.04)); border-color: rgba(1,57,20,0.08); box-shadow: 0 8px 20px rgba(1,57,20,0.04); } /* Mini avatar / initials */ .people-entry .mini { width:44px; height:44px; min-width:44px; border-radius:8px; background:linear-gradient(135deg,var(--accent), #9fd07a); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; } /* Meta text */ .people-entry .meta { font-weight:800; color:var(--accent-dark); } .people-entry .sub { font-size:13px; color:var(--muted); margin-top:4px; } /* Drawer mobile bottom-sheet style */ @media (max-width:700px) { .people-list { right:0; bottom:0; top:auto; height:48vh; width:100%; border-left:0; border-top:1px solid rgba(6,20,10,0.04); border-radius:12px 12px 0 0; transform: translateY(100%); } .people-list.active { transform: translateY(0); } .people-list-backdrop.active { opacity:1; } .people-list-body { padding-bottom:28px; } } /* ---------- Hamburger menu candidate trigger (in menu) ---------- */ #open-people-browser, .pill { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid rgba(6,20,10,0.04); background:transparent; color:var(--accent-dark); font-weight:800; cursor:pointer; transition: transform .12s var(--ease), background .12s var(--ease); } #open-people-browser:hover, .pill:hover { transform: translateY(-3px); background: rgba(7,40,20,0.03); } /* ---------- Utility ---------- */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* contact form small styles */ /* Base (mobile-first) */ .contact-box { max-width: 520px; margin: 2.5rem auto; padding: 2rem 2.2rem; border-radius: var(--radius); background: var(--panel-bg); color: var(--text-dark); line-height: 1.75; transition: none; } /* Desktop: wider + left aligned + white background */ @media (min-width: 900px) { .contact-box { max-width: 720px; margin-left: 22vH; margin-right: auto; padding: 2.4rem 2.6rem; background: var(--bg); /* pure white */ } } @media (min-width: 1300px) { .contact-box { max-width: 820px; } } /* Headline */ .contact-box h2 { margin: 0 0 0.75rem; font-size: 1.6rem; font-weight: 700; color: var(--green-dark); } /* Address block */ .contact-box address { font-style: normal; margin-bottom: 1.2rem; color: var(--muted); } /* Paragraphs */ .contact-box p { margin: 0.5rem 0; font-size: 1rem; } /* Links */ .contact-box a { color: var(--green-dark); font-weight: 700; /* email bold */ text-decoration: underline; text-decoration-color: var(--green-light); /* green underline */ text-underline-offset: 3px; } /* Bürgertelefon note */ .contact-note { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 0.15rem; } /* Remove bold from labels like Telefon, Telefax, Bürgertelefon */ .contact-box strong { font-weight: 500; /* normal weight */ } /* Hinweis box */ .contact-info-box { margin-top: 1.8rem; padding: 1.2rem 1.4rem; border-radius: calc(var(--radius) - 4px); background: var(--panel-bg); border-left: 5px solid var(--green-light); } .contact-info-box h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--green-dark); } /* Footer — sleek parallax + decorative lines, centered trade note */ #footer { position: relative; overflow: hidden; color: var(--accent-contrast); background-color: var(--green-dark); --footer-height-mobile: 220px; --footer-height-desktop: 320px; } /* Parallax background layer (replace image path as needed) */ #footer::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url('pictures/placeholder/footer-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; opacity: 0.9; transform: translateZ(0); } /* Soft overlay for contrast */ #footer::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(1,57,20,0.18) 0%, rgba(1,57,20,0.34) 60%, rgba(1,57,20,0.56) 100%); pointer-events: none; } /* Inner content sits above background */ .footer-inner { position: relative; z-index: 2; display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; padding: 1.25rem 2.5rem; min-height: var(--footer-height-mobile); box-sizing: border-box; font-family: var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); } /* Party name and tagline */ .party-name { display: inline-block; font-family: var(--font-head, "Merriweather", Georgia, serif); font-size: 1.15rem; color: var(--accent-contrast); letter-spacing: 0.2px; } .footer-inner .muted { display: block; color: rgba(255,255,255,0.9); font-size: 0.95rem; font-weight: 500; margin-top: 0.15rem; } /* Footer link groups */ .footer-links { display: flex; gap: 1rem; align-items: center; } /* Link styling */ .footer-links a { color: var(--accent-contrast); text-decoration: none; font-weight: 600; padding: 0.35rem 0.45rem; border-radius: 8px; transition: background-color .18s var(--ease), color .18s var(--ease); } /* Hover / focus */ .footer-links a:hover, .footer-links a:focus { background: rgba(255,255,255,0.06); color: var(--green-light); text-decoration: underline; text-underline-offset: 3px; outline: none; } /* Centered trade note at bottom */ .trade { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 3; color: rgba(255,255,255,0.85); font-size: 0.85rem; font-weight: 500; text-align: center; padding: 0.15rem 0.6rem; backdrop-filter: blur(2px); } /* Desktop adjustments: taller footer, align with 90vw content area */ @media (min-width: 900px) { .footer-inner { padding: 2rem 4.5vw; min-height: var(--footer-height-desktop); align-items: center; } /* soften parallax position for a subtle shift */ #footer::before { background-position: center calc(50% - 40px); } /* move trade note slightly up on large screens */ .trade { bottom: 18px; font-size: 0.9rem; } } /* Very large screens: align padding with main content width (90vw) */ @media (min-width: 1300px) { .footer-inner { padding-left: calc((100vw - 90vw) / 2 + 4.5vw); padding-right: 4.5vw; max-width: 90vw; margin-left: 0; } } /* Mobile performance: disable fixed attachment and tighten layout */ @media (max-width: 899px) { #footer::before { background-attachment: scroll; background-position: center center; filter: saturate(0.95) brightness(0.9); } .footer-inner { flex-direction: column; gap: 0.6rem; text-align: center; padding: 1rem 1rem; min-height: 200px; } .footer-inner::before, .footer-inner::after { display: none; } .trade { position: static; transform: none; padding-top: 0.5rem; opacity: 0.95; } } /* Focus ring for keyboard users */ .footer-links a:focus { box-shadow: 0 0 0 3px rgba(116,198,157,0.14); border-radius: 8px; } /* Optional: subtle top divider to separate footer from content */ #footer { border-top: 1px solid rgba(255,255,255,0.04); } /* Responsive tweaks */ @media (max-width: 900px) { .carousel-arrow { display: none; } .carousel-list .candidate.center { width: 86vw; } .carousel-list .candidate.side { display: none; } .carousel-list .candidate.off { display: none; } } @media (prefers-reduced-motion: reduce) { .carousel-list, .carousel-list * { transition: none !important; animation: none !important; } }