/* ========================================================================== Ände | Custom Stylesheet -------------------------------------------------------------------------- Single consolidated replacement for the original theme stylesheets (style.css, base.css, layout.css, skeleton.css, shortcodes.css, prettyPhoto.css, flexslider.css). Brand: Ände GmbH — artisan ginger drinks (Berlin) Palette: #15512E (forest green) · #fced7b (golden yellow) · #051e07 (deep) Type: Signika (loaded separately in ) ========================================================================== */ /* -------------------------------------------------------------------------- 1. RESET & BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; line-height: 1.65; background: #051e07; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; border: 0; vertical-align: middle; } a { color: inherit; text-decoration: none; transition: color 200ms ease, opacity 200ms ease, background 200ms ease; } p { margin: 0 0 1em 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em 0; line-height: 1.2; font-weight: 600; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, textarea, select { font: inherit; color: inherit; } ::selection { background: #fced7b; color: #15512E; } /* -------------------------------------------------------------------------- 2. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { --c-bg-dark: #051e07; --c-green: #15512E; --c-green-2: #1c6c3d; --c-green-soft: rgba(21, 81, 46, 0.15); --c-yellow: #fced7b; --c-yellow-2: #f5d061; --c-cream: #fbf6e6; --c-cream-edge: #f1e9c8; --font-display: 'Signika', 'Source Sans Pro', sans-serif; --radius-lg: 18px; --radius-md: 10px; --shadow-card: 0 30px 60px -20px rgba(0, 0, 0, 0.4), 0 12px 24px -12px rgba(0, 0, 0, 0.3); --max-content: 960px; } /* -------------------------------------------------------------------------- 3. MAIN BACKDROP -------------------------------------------------------------------------- */ #main { position: relative; min-height: 100vh; background-color: #051e07; background-size: cover; background-position: center !important; background-attachment: fixed; background-repeat: no-repeat; padding-bottom: 100px; overflow: hidden; } #main::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(5, 30, 7, 0) 0%, rgba(5, 30, 7, 0.35) 60%, rgba(5, 30, 7, 0.72) 100%); pointer-events: none; z-index: 0; } #main > * { position: relative; z-index: 1; } /* Decorative bg layers — kept hidden per existing inline rules */ .bg1, .bg2, .bg3, .bg4, .bg5 { display: none; } /* -------------------------------------------------------------------------- 4. HEADER & TOP COLOUR BAR -------------------------------------------------------------------------- */ header#top { position: relative; z-index: 5; } header .color_bar { height: 6px; background: linear-gradient(90deg, #fced7b 0%, #f5d061 50%, #fced7b 100%); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } /* -------------------------------------------------------------------------- 5. HERO TITLE -------------------------------------------------------------------------- */ .title { text-align: center; padding: 100px 24px 60px; position: relative; z-index: 4; transition: opacity 400ms ease; } .title .logo { display: block; margin: 0 auto 36px; max-width: 420px; } .title .logo img { display: block; width: 100%; height: auto; margin: 0 auto; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.4)); } .title h1 { color: #fced7b; letter-spacing: -0.02em; line-height: 0.95; margin: 0; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } p.intro_text { margin: 24px auto 0; max-width: 720px; line-height: 1.2; letter-spacing: -0.01em; } .intro { height: 30px; } /* -------------------------------------------------------------------------- 6. NAVIGATION -------------------------------------------------------------------------- */ nav { position: sticky; top: 0; z-index: 50; background: linear-gradient(to bottom, rgba(5, 30, 7, 0.92) 0%, rgba(5, 30, 7, 0.78) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(252, 237, 123, 0.15); border-bottom: 1px solid rgba(252, 237, 123, 0.25); padding: 14px 16px; } nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; max-width: var(--max-content); margin: 0 auto; } nav li { display: inline-flex; } nav a { display: inline-block; padding: 8px 16px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: 13px !important; position: relative; } nav a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 250ms ease; } nav a:hover::after { transform: scaleX(1); } /* -------------------------------------------------------------------------- 7. SECTION CARDS (.bg) -------------------------------------------------------------------------- */ .bg { position: relative; background: var(--c-cream); margin: 80px auto; max-width: var(--max-content); border-radius: var(--radius-lg); box-shadow: var(--shadow-card) !important; padding: 70px 50px 60px; scroll-margin-top: 80px; } /* Soft yellow accent circles tucked behind each card */ .bg::before, .bg::after { content: ''; position: absolute; width: 64px; height: 64px; background: var(--c-yellow); border-radius: 50%; opacity: 0.55; z-index: -1; } .bg::before { top: -22px; left: -22px; } .bg::after { bottom: -22px; right: -22px; } /* -------------------------------------------------------------------------- 8. SECTION HEADINGS -------------------------------------------------------------------------- */ .bar { position: relative; text-align: center; margin-bottom: 36px; } .bg h2 { display: inline-block; position: relative; font-weight: 600; letter-spacing: -0.01em; padding: 0 50px; margin: 0; } /* (The wave images on .bg h2::before / ::after are wired up by inline CSS) */ /* Icon spans — generic styling since the original icon images may not load */ [class^="icn_"], [class*=" icn_"] { display: inline-block; width: 38px; height: 38px; vertical-align: middle; margin-right: 10px; background: var(--c-yellow); border: 2px solid var(--c-green); border-radius: 50%; position: relative; } [class^="icn_"]::after, [class*=" icn_"]::after { content: ''; position: absolute; inset: 4px; border: 1px dashed var(--c-green); border-radius: 50%; opacity: 0.5; } /* -------------------------------------------------------------------------- 9. SKELETON-STYLE GRID -------------------------------------------------------------------------- */ .container { width: 100%; margin: 0 auto; position: relative; } .container::after { content: ''; display: block; clear: both; } .columns { position: relative; float: left; padding: 0 12px; box-sizing: border-box; } .sixteen.columns { width: 100%; padding: 0; float: none; } .ten.columns { width: 62.5%; } .six.columns { width: 37.5%; } @media (max-width: 720px) { .columns, .ten.columns, .six.columns { float: none; width: 100%; padding: 0; } } .clear { clear: both; } /* -------------------------------------------------------------------------- 10. BODY TEXT INSIDE SECTIONS -------------------------------------------------------------------------- */ .bg p { margin: 0 0 1.1em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .bg h3, .bg h4 { margin-top: 1.4em; } .bg h4:first-of-type { margin-top: 0; } .bg a { color: var(--c-green); border-bottom: 1px solid var(--c-yellow); padding-bottom: 1px; } .bg a:hover { background: var(--c-yellow); color: var(--c-green); } .bg strong { font-weight: 700; } /* -------------------------------------------------------------------------- 11. IMAGE ALIGNMENT (WordPress conventions) -------------------------------------------------------------------------- */ .alignleft, img.alignleft { float: left; margin: 6px 24px 16px 0; border-radius: 10px; } .alignright, img.alignright { float: right; margin: 6px 0 16px 24px; border-radius: 10px; } .aligncenter, img.aligncenter { display: block; margin: 24px auto; border-radius: 10px; } @media (max-width: 720px) { .alignleft, .alignright, img.alignleft, img.alignright { float: none; display: block; margin: 16px auto; } } /* -------------------------------------------------------------------------- 12. FORMS (Jetpack Grunion contact form + custom #contact form) -------------------------------------------------------------------------- */ .contact-form, .contact_form form { margin: 24px 0; } .contact-form > div, .contact_form form > p { margin-bottom: 16px; } .grunion-field-label, .contact_form p { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 6px; color: var(--c-green); } input[type="text"], input[type="email"], textarea, .contact-form input.name, .contact-form input.email, .contact-form input.text, .contact-form textarea { width: 100%; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(21, 81, 46, 0.2); border-radius: 8px; padding: 12px 14px; font-family: var(--font-display); font-size: 16px; color: var(--c-green); transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease; } textarea { min-height: 140px; resize: vertical; } input[type="text"]:focus, input[type="email"]:focus, textarea:focus { outline: none; background: #fff; border-color: var(--c-green); box-shadow: 0 0 0 4px rgba(252, 237, 123, 0.45); } input[type="submit"], .submit-button, .pushbutton-wide { display: inline-block; background: var(--c-green); color: var(--c-yellow); border: none; padding: 14px 32px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; transition: transform 150ms ease, box-shadow 200ms ease, background 200ms ease; } input[type="submit"]:hover, .submit-button:hover, .pushbutton-wide:hover { background: var(--c-green-2); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(5, 30, 7, 0.5); } /* -------------------------------------------------------------------------- 13. CONTACT SECTION -------------------------------------------------------------------------- */ #contact { background: linear-gradient(to bottom, transparent 0%, rgba(5, 30, 7, 0.6) 100%); padding: 80px 24px 40px; margin-top: 60px; scroll-margin-top: 80px; } #contact .container { max-width: var(--max-content); margin: 0 auto; background: var(--c-cream); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 50px 40px; } #contact h2 { text-align: center; color: var(--c-green); font-family: var(--font-display); margin: 0 0 30px; display: flex; align-items: center; justify-content: center; gap: 16px; } #contact h2 span.bar { display: inline-block; width: 60px; height: 1px; background: var(--c-green); opacity: 0.4; margin: 0; } #contact iframe { width: 100% !important; border-radius: var(--radius-md); overflow: hidden; display: block; margin: 0 0 32px; border: 1px solid var(--c-green-soft); } #contact div[style*="924"] { width: 100% !important; } .contact_info h4 { margin-bottom: 16px; border-bottom: 1px solid var(--c-green-soft); padding-bottom: 8px; } .contact_info p { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .contact_info img { width: 18px; height: 18px; flex-shrink: 0; } .done { display: none; background: rgba(252, 237, 123, 0.4); border: 1px solid var(--c-yellow); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 16px; } /* -------------------------------------------------------------------------- 14. FOOTER -------------------------------------------------------------------------- */ footer { text-align: center; padding: 50px 24px 30px; position: relative; z-index: 2; } .pixels { margin-bottom: 16px; } .pixels_notif { display: inline-block; font-size: 12px; color: var(--c-yellow); opacity: 0.75; letter-spacing: 0.15em; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; background: rgba(252, 237, 123, 0.08); border: 1px solid rgba(252, 237, 123, 0.22); } #pixels { font-weight: 700; color: var(--c-yellow); opacity: 1; } .copyright { margin: 0; } .copyright p { margin: 0; opacity: 0.75; } .copyright a { border-bottom: 1px solid rgba(252, 237, 123, 0.4); } .copyright a:hover { color: var(--c-yellow) !important; } /* -------------------------------------------------------------------------- 15. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 900px) { .bg { margin: 50px 20px; padding: 50px 28px 40px; } #contact .container { padding: 36px 24px; } } @media (max-width: 600px) { .title { padding: 60px 20px 30px; } .title .logo { max-width: 280px; } nav ul { gap: 4px; } nav a { padding: 6px 10px; font-size: 11px !important; } .bg { margin: 36px 14px; padding: 40px 20px 30px; border-radius: 14px; } .bg h2 { padding: 0 10px; } [class^="icn_"], [class*=" icn_"] { width: 28px; height: 28px; margin-right: 6px; } .bg p { text-align: left; } } /* -------------------------------------------------------------------------- 16. PRINT -------------------------------------------------------------------------- */ @media print { #main { background: #fff; } nav, footer .pixels, #contact iframe { display: none; } .bg { box-shadow: none !important; border: 1px solid #ccc; page-break-inside: avoid; } }