/* ============================================================ UPTWO CREATIONS — GEDEELD STIJLBESTAND ============================================================ Dit bestand bevat de basisstijl die we op alle UpTwo Creations projecten willen hergebruiken (Sint aan huis, Sint videoboodschap, Les Filles de Malines), gebaseerd op de huisstijl van uptwocreations.be. KLEUREN: De kleurwaarden hieronder zijn de officiele themakleuren van uptwocreations.be (uit Hostinger > Thema > Kleuren): #ffe8c2 crème/perzik #e94261 roze/koraal (hoofdaccent) #2b2b2b donkergrijs/zwart #00c2a8 teal/groen (secundair accent) #d5e4ff lichtblauw (secundair accent) #f5f5f5 lichtgrijs #ffd447 goud/geel Alle andere stijlen verwijzen naar deze variabelen, dus een wijziging hier werkt overal door. GEBRUIK: Plaats dit bestand op elk domein (of subdomein) waar het nodig is, bijvoorbeeld: sint.uptwocreations.be/assets/uptwo-theme.css tickets.uptwocreations.be/assets/uptwo-theme.css en voeg in de van elke pagina toe: Pagina-specifieke kleuraccenten (bv. donkergoud voor het theatergala-thema van Les Filles de Malines) kunnen in een klein, aparte stylesheet per project blijven staan, die NA dit bestand wordt ingeladen en alleen de afwijkende variabelen overschrijft. ============================================================ */ :root { /* ── Officiële themakleuren (Hostinger > Thema > Kleuren) ── */ --upt-cream: #ffe8c2; /* warme crème/perzik achtergrond (hero, header) */ --upt-cream-soft: #fff6e9; /* afgeleide lichtere variant, voor kaarten op crème */ --upt-accent: #e94261; /* roze/koraal hoofdaccent (logo, knoppen, footer) */ --upt-accent-dark: #d6314f; /* afgeleide, iets donkerdere hover-variant van het accent */ --upt-dark: #2b2b2b; /* donkergrijs/zwart, voor donkere secties */ --upt-dark-soft: #3a3a3a; /* afgeleide, iets lichtere donkere variant voor kaarten */ --upt-teal: #00c2a8; /* secundair accent: teal/groen */ --upt-blue-light: #d5e4ff; /* secundair accent: lichtblauw */ --upt-grey-light: #f5f5f5; /* lichtgrijs, voor achtergronden/velden */ --upt-gold: #ffd447; /* goud/geel, voor highlights en badges */ --upt-text-dark: #2b2b2b; /* hoofdtekstkleur op lichte achtergrond */ --upt-text-light: #f5f5f5; /* lichte tekst op donkere achtergrond */ --upt-text-muted: rgba(43,43,43,0.6); /* gedempte tekst op licht */ --upt-text-muted-i: rgba(245,245,245,0.6); /* gedempte tekst op donker */ --upt-white: #FFFFFF; --upt-border: rgba(233,66,97,0.25); /* subtiele randkleur op basis van accent */ /* ── Typografie ── */ --upt-font-heading: 'Quicksand', sans-serif; --upt-font-body: 'Poppins', sans-serif; /* ── Radius & schaduw ── */ --upt-radius-sm: 10px; --upt-radius: 16px; --upt-radius-lg: 24px; --upt-shadow: 0 4px 20px rgba(0,0,0,0.08); --upt-shadow-lg: 0 10px 30px rgba(0,0,0,0.12); } /* ============================================================ BASIS ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--upt-font-body); background: var(--upt-cream); color: var(--upt-text-dark); line-height: 1.7; font-size: 16px; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--upt-font-heading); font-weight: 700; line-height: 1.2; color: var(--upt-text-dark); } a { color: var(--upt-accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .upt-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* ============================================================ HEADER / NAVIGATIE ============================================================ */ .upt-header { background: var(--upt-cream); padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .upt-header .upt-logo img { height: 56px; width: auto; } .upt-nav { display: flex; align-items: center; gap: 28px; font-size: 0.95rem; } .upt-nav a { color: var(--upt-text-dark); font-weight: 500; } .upt-nav a.actief, .upt-nav a:hover { color: var(--upt-accent); } /* ============================================================ KNOPPEN ============================================================ */ .upt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--upt-accent); color: var(--upt-white); font-family: var(--upt-font-body); font-weight: 600; font-size: 0.95rem; padding: 14px 32px; border: none; border-radius: 999px; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; box-shadow: var(--upt-shadow); } .upt-btn:hover { background: var(--upt-accent-dark); transform: translateY(-2px); box-shadow: var(--upt-shadow-lg); text-decoration: none; } .upt-btn:disabled, .upt-btn.upt-btn-disabled { background: #e0ddd8; color: #9a9590; cursor: not-allowed; box-shadow: none; transform: none; } /* Outline-variant, bv. voor knoppen op een donkere achtergrond */ .upt-btn-outline { background: transparent; color: var(--upt-text-light); border: 1.5px solid var(--upt-text-light); box-shadow: none; } .upt-btn-outline:hover { background: var(--upt-text-light); color: var(--upt-dark); } .upt-btn-sm { padding: 8px 18px; font-size: 0.82rem; } /* ============================================================ SECTIES ============================================================ */ .upt-section { padding: 64px 24px; } .upt-section-dark { background: var(--upt-dark); color: var(--upt-text-light); } .upt-section-dark h1, .upt-section-dark h2, .upt-section-dark h3 { color: var(--upt-text-light); } .upt-section-dark p { color: var(--upt-text-muted-i); } .upt-section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 16px; } .upt-section-sub { font-size: 0.95rem; color: var(--upt-text-muted); max-width: 600px; margin-bottom: 28px; } /* ============================================================ KAARTEN ============================================================ */ .upt-card { background: var(--upt-white); border: 1px solid var(--upt-border); border-radius: var(--upt-radius); padding: 24px; box-shadow: var(--upt-shadow); } .upt-card-soft { background: var(--upt-cream-soft); } /* Kaart-variant voor gebruik op de donkere sectie */ .upt-card-dark { background: var(--upt-dark-soft); border: 1px solid rgba(251,230,204,0.12); color: var(--upt-text-light); } .upt-grid { display: grid; gap: 20px; } .upt-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .upt-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .upt-grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* ============================================================ FORMULIEREN ============================================================ */ label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--upt-text-dark); margin-bottom: 6px; } .upt-section-dark label { color: var(--upt-text-light); } input, select, textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--upt-border); border-radius: var(--upt-radius-sm); font-size: 0.95rem; font-family: var(--upt-font-body); color: var(--upt-text-dark); background: var(--upt-white); outline: none; margin-bottom: 14px; transition: border-color 0.15s ease; } input:focus, select:focus, textarea:focus { border-color: var(--upt-accent); } textarea { resize: vertical; min-height: 90px; } /* ============================================================ FOOTER ============================================================ */ .upt-footer { background: var(--upt-accent); color: var(--upt-white); padding: 48px 24px 28px; } .upt-footer h2, .upt-footer h3 { color: var(--upt-white); font-size: 1.6rem; margin-bottom: 12px; } .upt-footer a { color: var(--upt-white); } .upt-footer .upt-footer-meta { font-size: 0.85rem; opacity: 0.9; line-height: 1.8; } .upt-footer-socials { display: flex; gap: 12px; margin: 12px 0; } .upt-footer-socials a { width: 38px; height: 38px; border-radius: 50%; background: var(--upt-white); color: var(--upt-accent); display: flex; align-items: center; justify-content: center; } /* ============================================================ BADGES / NOTIFICATIES Herbruikbaar voor statuslabels in admin- en publieke schermen ============================================================ */ .upt-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.04em; } .upt-badge-ok { background: rgba(0,194,168,0.15); color: #00876f; } .upt-badge-wacht { background: rgba(233,72,107,0.12); color: var(--upt-accent-dark); } .upt-badge-fout { background: rgba(220,53,69,0.12); color: #C0394A; } .upt-notif { position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; border-radius: var(--upt-radius-sm); font-weight: 600; font-size: 0.85rem; z-index: 999; opacity: 0; color: var(--upt-white); transition: opacity 0.3s ease; } .upt-notif.toon { opacity: 1; } .upt-notif.succes { background: var(--upt-teal); } .upt-notif.fout { background: #C0394A; } .upt-notif.waarsch{ background: var(--upt-accent); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 720px) { .upt-header { padding: 14px 20px; } .upt-nav { gap: 16px; font-size: 0.85rem; } .upt-section { padding: 48px 16px; } }