/* ========================================================================== NightStory — gedeelde basisstijlen Bron-of-truth voor kleuren & typografie: STYLE_NightStory.md Dit bestand wordt op alle publieke pagina's geladen, ná de Tailwind CDN. ========================================================================== */ /* --- Basis --- */ body { background-color: #faf9f5; /* bg */ color: #042648; /* marine */ } .hero-gradient { background: linear-gradient(135deg, #faf9f5 0%, #f5f2e1 100%); } /* --- Knoppensysteem --------------------------------------------------- .btn-primary terra knop (hoofdactie) .btn-secondary witte knop met sand-rand, vult terra bij hover .btn-ghost tekstlink met onderstreping .btn-final / .btn-nav blijven als alias voor bestaande markup. ------------------------------------------------------------------------ */ .btn-primary, .btn-final { transition: all 0.3s ease-in-out; } .btn-primary:hover, .btn-final:hover { transform: translateY(-3px); background-color: #b05638; /* terradark */ box-shadow: 0 10px 20px -5px rgba(217, 119, 87, 0.6); } .btn-nav { transition: all 0.3s ease-in-out; } .btn-nav:hover { transform: translateY(-2px); background-color: #b05638; box-shadow: 0 4px 12px rgba(217, 119, 87, 0.4); } .btn-secondary { transition: all 0.3s ease-in-out; } .btn-secondary:hover { transform: translateY(-3px); background-color: #d97757; /* terra */ border-color: #d97757; color: #ffffff; box-shadow: 0 10px 20px -5px rgba(217, 119, 87, 0.4); } .btn-ghost { border-bottom: 1px solid #d97757; padding-bottom: 0.25rem; transition: all 0.3s ease-in-out; } /* --- Scroll-reveal ------------------------------------------------------ Gebruik: data-reveal op een element, of data-reveal-group op een container (kinderen krijgen automatisch een stagger-delay). De hide-state hangt aan .js-reveal op : zonder JavaScript is alle content gewoon zichtbaar. ------------------------------------------------------------------------ */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .js-reveal [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Merkset 12 september 2026: originele vectorcontouren en vrije ruimte. */ .brand-horizontal { width:240px; height:auto; max-width:100%; flex-shrink:0; } .brand-stacked { width:280px; height:auto; max-width:100%; } .brand-symbol { width:48px; height:48px; object-fit:contain; flex-shrink:0; } footer a:has(> .brand-symbol) { opacity:1; } @media (min-width:768px) and (max-width:1199px) { nav .md\:flex, nav .md\:inline-block { display:none; } nav .md\:hidden { display:block; } #mobile-menu.md\:hidden { display:flex; } } /* Houd decoratie binnen de pagina op kleine schermen. */ html, body { overflow-x: clip; }