/* Theme Name: GugusWorld GmbH Theme URI: https://gugusworld.ch Author: GugusWorld GmbH Description: Allround-Theme der GugusWorld GmbH mit vier Bereichen — Malerarbeiten, STWE-Verwaltung, Skischule und INER (Natürliche Empfängnisregelung nach Rötzer). Dachseite plus vier Bereichsseiten, einheitliches Design mit individuellen Bereichsfarben. Version: 1.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: gugusworld */ /* ========================================================= GugusWorld GmbH — gemeinsames Design-System Editorial / warm / Swiss-präzise ========================================================= */ :root { /* Neutrale Markenfarben */ --paper: #FAF6EF; /* Hintergrund */ --paper-2: #F2ECE1; /* leicht dunkler */ --ink: #1B1A17; /* Text / fast schwarz */ --ink-soft: #4A463E; /* Fliesstext gedämpft */ --line: #DBD3C5; /* Trennlinien */ /* Dach-Akzent (Hauptseite) */ --brand: #14263D; /* Tinte / Navy */ --brand-2: #C8662B; /* warmes Ocker */ /* Standard-Akzent (wird je Bereich überschrieben) */ --accent: #14263D; --accent-ink: #FFFFFF; --accent-tint:#EAEFF5; --radius: 18px; --shadow: 0 18px 50px -22px rgba(20,38,61,.35); --maxw: 1180px; --font-display: "Fraunces", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; } /* Bereichs-Themes (auf ) */ .theme-maler { --accent:#C0552A; --accent-ink:#FFF7F0; --accent-tint:#F7E9DD; } .theme-stwe { --accent:#2C6A66; --accent-ink:#F1FAF8; --accent-tint:#E0EFEC; } .theme-ski { --accent:#2C6AAE; --accent-ink:#F2F8FF; --accent-tint:#E1ECF8; } .theme-iner { --accent:#9C5A6E; --accent-ink:#FCF3F5; --accent-tint:#F2E3E8; } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; } /* feine Papier-Körnung */ body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap { max-width: var(--maxw); margin:0 auto; padding:0 28px; } a { color: inherit; text-decoration: none; } img { max-width:100%; display:block; } /* ---------- Typografie ---------- */ h1,h2,h3 { font-family: var(--font-display); font-weight:560; line-height:1.05; letter-spacing:-.015em; } .eyebrow { font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color: var(--accent); } .lead { font-size:1.18rem; color:var(--ink-soft); max-width:60ch; } /* ---------- Header ---------- */ .site-header { position: sticky; top:0; z-index:50; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } .site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:74px; } .logo { display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.02em; } .logo .mark { width:34px; height:34px; border-radius:9px; background: var(--brand); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-size:1.15rem; font-weight:600; } .logo .mark.accent { background: var(--accent); color: var(--accent-ink); } .logo b { font-family:var(--font-display); font-size:1.18rem; font-weight:600; } .logo small { display:block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-top:-2px;} .nav { display:flex; align-items:center; gap:26px; font-size:.92rem; font-weight:500; } .nav a { color:var(--ink-soft); transition:color .2s; } .nav a:hover { color:var(--ink); } .nav .btn { padding:9px 18px; } .btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--accent-ink); padding:13px 24px; border-radius:100px; font-weight:600; font-size:.95rem; border:1px solid var(--accent); transition:transform .2s ease, box-shadow .2s ease, background .2s; } .btn:hover { transform:translateY(-2px); box-shadow:var(--shadow); } .btn.ghost { background:transparent; color:var(--ink); border-color:var(--line); } .btn.ghost:hover { border-color:var(--ink); } .btn .arr { transition:transform .2s; } .btn:hover .arr { transform:translateX(3px); } /* ---------- Sektion ---------- */ section { position:relative; z-index:2; } .sec { padding:96px 0; } .sec-head { max-width:680px; margin-bottom:54px; } .sec-head h2 { font-size:clamp(2rem,4.5vw,3.1rem); margin:14px 0 18px; } /* ---------- Footer ---------- */ .site-footer { position:relative; z-index:2; background: var(--brand); color:#E9E3D7; padding:72px 0 40px; } .theme-maler .site-footer, .theme-stwe .site-footer, .theme-ski .site-footer, .theme-iner .site-footer { background: var(--ink); } .foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:48px; } .site-footer h4 { font-family:var(--font-display); font-size:1.5rem; color:#fff; margin-bottom:14px; } .site-footer p, .site-footer a { color:#C9C2B4; font-size:.95rem; } .site-footer a:hover { color:#fff; } .foot-col strong { display:block; color:#fff; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; } .foot-col ul { list-style:none; display:grid; gap:9px; } .foot-bottom { border-top:1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.85rem; color:#9a9384; } /* ---------- Animationen ---------- */ @keyframes fadeUp { from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} } .reveal { opacity:0; animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards; } .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s} .d4{animation-delay:.35s}.d5{animation-delay:.45s}.d6{animation-delay:.55s} @media (prefers-reduced-motion: reduce){ .reveal{animation:none; opacity:1;} html{scroll-behavior:auto;} } /* ---------- Responsive ---------- */ @media (max-width: 860px){ .nav .links { display:none; } .foot-grid { grid-template-columns:1fr; } .sec { padding:70px 0; } } /* ========================================================= Bilder, Logo & Galerie (über Customizer befüllbar) ========================================================= */ .site-header .logo--image{ display:inline-flex; align-items:center; } .site-header .custom-logo-link{ display:inline-flex; line-height:0; } .site-header .custom-logo{ max-height:46px; width:auto; height:auto; } /* Grosses Foto auf der Startseite (Hero) */ .hero-photo{ position:absolute; top:50%; right:28px; transform:translateY(-50%); width:42%; max-width:520px; height:76%; object-fit:cover; border-radius:18px; box-shadow:var(--shadow); z-index:1; } /* Foto-Banner auf den Bereichsseiten */ .page-banner{ position:relative; z-index:2; padding:34px 0 0; } .page-banner img{ width:100%; height:clamp(220px,38vw,420px); object-fit:cover; border-radius:18px; box-shadow:var(--shadow); } /* Galerie / Referenzfotos */ .gallery-sec{ background:var(--paper-2); } .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .gallery-grid img{ width:100%; height:240px; object-fit:cover; border-radius:14px; } @media (max-width:860px){ .hero-photo{ display:none; } .gallery-grid{ grid-template-columns:1fr 1fr; } }