/* Theme Name: Tragass Magazine Theme URI: https://tragass.com Author: Tragass Description: Een zelfstandig automotive-magazine thema — modern, premium en editorial. Logo, accentkleur, typografie en social links zijn volledig aanpasbaar via de Customizer (Weergave -> Aanpassen). Version: 1.16.33 Requires at least: 6.4 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: tragass */ /* ========================================================================= 1. DESIGN TOKENS — pas hier je huisstijl aan (of gebruik de Customizer voor accentkleur/typografie, die overschrijft deze defaults live). ========================================================================= */ :root { /* Kleuren + lettertype (20-9-2026): na twee kleurexperimenten (navy, beige/ivoor) teruggezet naar het origineel — kleuren én lettertype blijven dus gewoon zoals ze waren. */ --tragass-ink: #0d0d0f; --tragass-ink-soft: #4a4a52; --tragass-paper: #ffffff; --tragass-paper-alt: #f4f4f2; --tragass-border: #e4e4e0; --tragass-accent: #d03d25; /* iets donkerder dan het origineel (#e8442a) voor voldoende contrast (WCAG AA) op wit */ --tragass-accent-ink: #1c0906; /* Header/footer/nieuwsbrief/cookiebanner volgen sinds 21-9-2026 (op verzoek van Dang) gewoon dezelfde dag/nachtmodus als de rest van de pagina — geen apart vast "merk-chrome" meer (dat was hiervoor bewust altijd donker, zie de git-geschiedenis/site-status.md voor waarom). Deze twee tokens zijn dus simpelweg aliassen van paper/ink, zodat de .site-header-regels verderop niet allemaal hoefden te veranderen. */ --tragass-header-bg: var(--tragass-paper); --tragass-header-fg: var(--tragass-ink); --tragass-font-heading: 'Space Grotesk', sans-serif; --tragass-font-body: 'Inter', sans-serif; --tragass-container: 1440px; /* Puntiger/steviger i.p.v. zacht afgerond ("ballon"-gevoel) — was 14px/8px. Ronde iconknoppen (50%) en de expliciete pil-vormen (999px) hieronder zijn apart teruggebracht naar deze --tragass-radius-sm, zodat ook knoppen/velden die eerst volledig pil-vormig waren nu een subtiele, strakkere hoek krijgen i.p.v. helemaal rond. */ --tragass-radius: 8px; --tragass-radius-sm: 4px; --tragass-gutter: clamp(1.25rem, 4vw, 3rem); --tragass-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.25); } /* Nachtmodus: volgt standaard de systeeminstelling, maar de knop in de header (zie main.js) kan dat overstemmen door data-theme op te zetten — dan wint de eigen keuze van de bezoeker altijd, in beide richtingen. Header, footer, nieuwsbrief-CTA/-pagina en de cookiebanner wisselen hier gewoon in mee (geen vast donker "merk-chrome" meer). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tragass-ink: #f4f4f2; --tragass-ink-soft: #a8a8b2; /* Zachter, warmer antraciet i.p.v. bijna-zwart (#0d0d0f) — zelfde idee als RetroDodo: donker genoeg om "nachtmodus" te voelen, maar geen kale volledig-zwarte achtergrond. */ --tragass-paper: #18181c; --tragass-paper-alt: #212126; --tragass-border: rgb(255 255 255 / 0.12); --tragass-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6); } } :root[data-theme="dark"] { --tragass-ink: #f4f4f2; --tragass-ink-soft: #a8a8b2; --tragass-paper: #18181c; --tragass-paper-alt: #212126; --tragass-border: rgb(255 255 255 / 0.12); --tragass-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6); } html { background: var(--tragass-paper); } /* ========================================================================= 2. RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--tragass-font-body); color: var(--tragass-ink); background: var(--tragass-paper); line-height: 1.55; font-size: 16px; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5 { font-family: var(--tragass-font-heading); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; } p { margin: 0 0 1.1em; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; font-size: 1rem; } .tragass-container { max-width: var(--tragass-container); margin-inline: auto; padding-inline: var(--tragass-gutter); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 999; background: var(--tragass-accent); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--tragass-radius-sm); transition: top .2s ease; } .skip-link:focus { top: 1rem; } :focus-visible { outline: 3px solid var(--tragass-accent); outline-offset: 2px; } /* ========================================================================= 3. HEADER ========================================================================= */ .site-header { background: var(--tragass-header-bg); color: var(--tragass-header-fg); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgb(127 127 127 / 0.16); transform: translateY(0); transition: transform 0.25s ease; } /* Schuift omhoog uit beeld bij scrollen naar beneden (zie main.js) — komt terug zodra je omhoog scrolt, of boven aan de pagina bent. */ .site-header--hidden { transform: translateY(-100%); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.75rem; } /* Vanaf de breedte waarop de categorieën inline in de header staan (zie .site-header__nav hieronder), naar een 3-koloms grid i.p.v. flex space-between: met flex duwde het bredere .site-header__actions-blok (4 icoon-knoppen + CTA-knop) de categorieën merkbaar naar links, ze stonden niet echt gecentreerd. Met start/nav/actions als evenredige 1fr/auto/1fr-kolommen staat de navigatie altijd echt in het midden, ongeacht hoeveel er links of rechts staat. */ @media (min-width: 1180px) { .site-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; justify-content: initial; } .site-header__nav { justify-self: center; } .site-header__actions { justify-self: end; } } /* "Kale" header-variant sinds v1.16.25: alleen het gecentreerde logo, zonder hamburger, categorieën, iconen of CTA-knop — gebruikt op de losstaande nieuwsbriefpagina (/nieuwsbrief), zie header.php (get_query_var('tragass_newsletter_page')). Met alleen .site-header__start nog in de balk (nav/actions worden daar niet gerenderd) centreert deze override het logo simpelweg door de balk zelf te centreren, ook op de brede 3-koloms grid-variant hierboven. */ .site-header--minimal .site-header__bar { justify-content: center; } @media (min-width: 1180px) { .site-header--minimal .site-header__bar { display: flex; justify-content: center; } } .site-header__start { display: flex; align-items: center; gap: 0.9rem; } /* Logo nóg wat groter/steviger in beeld — eerdere stap (36px → 52/68px) viel bij Dang nog steeds te weinig op. Het brede wordmerk-logo heeft een lage/brede verhouding, dus mag qua hoogte fors zijn zonder de header veel hoger te maken. */ .site-logo { display: flex; align-items: center; min-height: 50px; max-height: 62px; } .site-logo img, .site-logo .custom-logo-link, .site-logo .custom-logo { max-height: 62px; width: auto; height: auto; object-fit: contain; display: block; } @media (min-width: 1180px) { .site-logo { max-height: 84px; } .site-logo img, .site-logo .custom-logo-link, .site-logo .custom-logo { max-height: 84px; } } .site-logo__placeholder { font-family: var(--tragass-font-heading); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; border: 1.5px dashed rgb(127 127 127 / 0.4); border-radius: var(--tragass-radius-sm); padding: 0.5rem 0.9rem; color: inherit; opacity: 0.85; } /* Hamburgermenu: op mobiel en op "half scherm" desktop (< 1180px) is dit nog steeds de manier om bij de categorieën te komen — een altijd-brede categorie-balk zou de header daar te druk maken. Vanaf 1180px staan de categorieën direct in de header (zie .site-header__nav hieronder), dus verdwijnt de hamburger daar vanzelf. Achtergrond is een neutrale grijstint (i.p.v. wit-op-donker) zodat het vanzelf goed leesbaar blijft op zowel een lichte als donkere header — geen aparte .is-light-header-variant meer nodig sinds de header met de dag/nachtmodus meewisselt. */ .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(127 127 127 / 0.14); border: none; color: inherit; flex-shrink: 0; transition: background .15s ease; } .menu-toggle:hover { background: var(--tragass-accent); color: #fff; } .menu-toggle svg { width: 20px; height: 20px; } @media (min-width: 1180px) { .menu-toggle { display: none; } } /* Categorieën inline in de header, alleen vanaf brede desktop-schermen. */ .site-header__nav { display: none; } @media (min-width: 1180px) { .site-header__nav { display: block; } .site-header__nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.6rem; font-family: var(--tragass-font-heading); font-weight: 600; font-size: 0.92rem; } .site-header__nav a { display: inline-flex; align-items: center; gap: 0.3rem; opacity: 0.85; } .site-header__nav a:hover, .site-header__nav .current-menu-item a { opacity: 1; color: var(--tragass-accent); } .site-header__nav .mobile-nav__external { font-size: 0.8rem; opacity: 0.7; } } /* Uitklapmenu (drawer): schuift vanaf links open, met de 5 hoofd-secties. Zelfde overlay-aanpak als de zoekbalk hierboven, voor consistentie. */ .mobile-nav { position: fixed; inset: 0; z-index: 120; visibility: hidden; } .mobile-nav.is-open { visibility: visible; } .mobile-nav__backdrop { position: absolute; inset: 0; background: rgb(13 13 15 / 0.6); border: none; padding: 0; margin: 0; cursor: pointer; opacity: 0; transition: opacity .2s ease; } .mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; } /* Het uitklapmenu volgt sinds 21-9-2026 gewoon dezelfde dag/nachtmodus als de rest van de pagina (net als header/footer/nieuwsbrief). Het logo blijft op elke achtergrond goed leesbaar (witte letters met dikke zwarte contourlijn), dus dat is geen probleem meer. */ .mobile-nav__panel { position: relative; z-index: 1; width: min(340px, 84vw); height: 100%; background: var(--tragass-paper); color: var(--tragass-ink); display: flex; flex-direction: column; padding: 1.5rem; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 20px 0 40px -20px rgb(0 0 0 / 0.35); } .mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); } /* Dunne, doorgetrokken streep onder het logo i.p.v. alleen witruimte — bakent de kop van het menu duidelijker af. */ .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--tragass-border); } /* Logo in dit paneel mag nog iets groter dan het header-logo — hier is ruim de breedte van het hele paneel beschikbaar en geen andere header-elementen waar het tegenaan moet passen. */ .mobile-nav__head .site-logo, .mobile-nav__head .site-logo img, .mobile-nav__head .site-logo .custom-logo-link, .mobile-nav__head .site-logo .custom-logo { max-height: 74px; } .mobile-nav__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: none; border: none; color: inherit; transition: background .15s ease; } .mobile-nav__close:hover { background: var(--tragass-paper-alt); } .mobile-nav__close svg { width: 19px; height: 19px; } .mobile-nav__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } /* Geen scheidingslijntjes meer tussen de categorieën — de grotere letters + extra ruimte ertussen geven al genoeg structuur, en zonder lijntjes oogt het geheel rustiger/meer één blok. */ .mobile-nav__nav li { border-bottom: none; } .mobile-nav__nav a { display: flex; align-items: center; gap: 0.4rem; padding: 0.85rem 0.15rem; font-family: var(--tragass-font-heading); font-weight: 600; font-size: 1.45rem; transition: opacity .15s ease; } /* "Spotlight"-hover: het item waar je overheen hovert houdt gewoon zijn normale kleur, de rest dimt naar grijzer/donkerder i.p.v. dat het gehoverde item zelf de accentkleur krijgt. Puur CSS: zodra ergens in de lijst gehoverd wordt dimmen alle links een stukje, en de regel die daarna komt (gelijke specificiteit, dus wint door volgorde) zet het daadwerkelijk gehoverde item weer op volle sterkte. */ .mobile-nav__nav ul:hover a { opacity: 0.45; } .mobile-nav__nav ul a:hover { opacity: 1; } .mobile-nav__nav .current-menu-item > a { color: var(--tragass-accent); } .mobile-nav__external { font-size: 0.9rem; opacity: 0.6; } /* Nieuwsbrief-vak onderin het uitklapmenu, zelfde idee als RetroDodo's "Join Our Free Newsletter Community"-blok: een omkaderd vak met een (optionele) afbeelding als achtergrond, een korte pitch en de aanmeld-knop — oogt een stuk aantrekkelijker dan een kale losse knop. Zonder eigen afbeelding (tragass_newsletter_box_image, Customizer) valt dit terug op een merk-gradient + envelop-icoon, zodat het vak er ook zonder aparte upload al verzorgd uitziet. */ .mobile-nav__foot { margin-top: auto; padding-top: 1.5rem; } .mobile-nav__newsletter { position: relative; overflow: hidden; border-radius: var(--tragass-radius); border: 1px solid var(--tragass-border); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; color: #fff; } .mobile-nav__newsletter-media { position: absolute; inset: 0; z-index: 0; background: linear-gradient(150deg, #23262b 0%, #100c0c 100%); background-size: cover; background-position: center; } .mobile-nav__newsletter-media::before { content: ''; position: absolute; inset: 0; background: rgb(13 13 15 / 0.35); } .mobile-nav__newsletter-media svg { position: absolute; right: -0.75rem; bottom: -0.75rem; width: 88px; height: 88px; opacity: 0.16; } .mobile-nav__newsletter-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.6rem; } .mobile-nav__newsletter-body h3 { margin: 0; font-size: 1.1rem; } .mobile-nav__newsletter-body p { margin: 0; font-size: 0.88rem; color: rgb(255 255 255 / 0.8); } .mobile-nav__newsletter-body .btn { width: 100%; justify-content: center; margin-top: 0.15rem; } @media (min-width: 480px) { .mobile-nav__panel { padding: 2rem; } } .site-header__actions { display: flex; align-items: center; gap: 0.75rem; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 42px; height: 42px; border-radius: 50%; background: rgb(127 127 127 / 0.14); border: none; color: inherit; transition: background .15s ease; } .icon-btn:hover { background: var(--tragass-accent); color: #fff; } .icon-btn svg { width: 19px; height: 19px; } .icon-btn--placeholder { cursor: default; } .icon-btn--placeholder:hover { background: rgb(127 127 127 / 0.14); color: inherit; } .icon-btn__label { display: none; } @media (min-width: 1180px) { .icon-btn--search { width: auto; border-radius: var(--tragass-radius-sm); padding: 0 0.9rem 0 0.7rem; gap: 0.45rem; } .icon-btn--search .icon-btn__label { display: inline; font-size: 0.9rem; font-weight: 600; } } .icon-btn__badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--tragass-radius-sm); background: var(--tragass-accent); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--tragass-accent); color: #fff; font-weight: 600; font-size: 0.9rem; padding: 0.7rem 1.3rem; border-radius: var(--tragass-radius-sm); border: none; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgb(255 90 46 / 0.6); } .btn--outline { background: transparent; border: 1.5px solid currentColor; color: inherit; } .btn--outline:hover { background: var(--tragass-accent); border-color: var(--tragass-accent); color: #fff; } .header-cta { display: none; } @media (min-width: 1180px) { .header-cta { display: inline-flex; } } /* Search overlay */ .search-overlay { position: fixed; inset: 0; z-index: 110; background: rgb(13 13 15 / 0.97); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1.5rem; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .search-overlay.is-open { opacity: 1; pointer-events: all; } .search-overlay__inner { width: 100%; max-width: 700px; } .search-overlay form { display: flex; align-items: center; border-bottom: 2px solid var(--tragass-accent); gap: 1rem; } .search-overlay input[type="search"] { flex: 1; background: transparent; border: none; color: #fff; font-family: var(--tragass-font-heading); font-size: clamp(1.5rem, 4vw, 2.25rem); padding: 0.6rem 0; outline: none; } .search-overlay input::placeholder { color: rgb(255 255 255 / 0.4); } .search-overlay button[type="submit"] { background: none; border: none; color: #fff; } .search-overlay__close { position: absolute; top: 2rem; right: 2rem; background: none; border: none; color: #fff; width: 44px; height: 44px; } /* Live zoeksuggesties onder het zoekveld */ .search-overlay__results { display: none; margin-top: 1.5rem; max-height: 55vh; overflow-y: auto; } .search-overlay__results.is-open { display: block; } .search-suggest__group { margin-bottom: 0.5rem; } .search-suggest__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(255 255 255 / 0.45); padding: 0.5rem 0.25rem 0.25rem; } .search-suggest__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem; } .search-suggest__tag { display: inline-flex; align-items: center; padding: 0.4rem 0.9rem; border-radius: var(--tragass-radius-sm); background: rgb(255 255 255 / 0.08); color: #fff; font-size: 0.88rem; font-weight: 500; } .search-suggest__tag:hover { background: var(--tragass-accent); } .search-suggest__item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0.25rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); color: #fff; } .search-suggest__item:hover, .search-suggest__item:focus-visible { color: var(--tragass-accent); } .search-suggest__media { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--tragass-radius-sm); overflow: hidden; background: rgb(255 255 255 / 0.06); } .search-suggest__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .search-suggest__media .tragass-placeholder { width: 100%; height: 100%; } .search-suggest__media .tragass-placeholder span { display: none; } .search-suggest__media .tragass-placeholder svg { width: 20px; height: 20px; } .search-suggest__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .search-suggest__cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tragass-accent); } .search-suggest__title { font-family: var(--tragass-font-heading); font-size: 1rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-suggest__more { display: block; text-align: center; margin-top: 0.5rem; padding: 0.9rem; color: var(--tragass-accent); font-weight: 500; font-size: 0.92rem; } .search-suggest__more:hover { text-decoration: underline; } .search-suggest__empty { color: rgb(255 255 255 / 0.55); padding: 0.75rem 0.25rem; font-size: 0.95rem; } /* ========================================================================= 4. PLACEHOLDER ART (artikelen zonder featured image) ========================================================================= */ .tragass-placeholder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; height: 100%; min-height: 180px; color: rgb(255 255 255 / 0.92); background: linear-gradient(150deg, #23262b 0%, #101114 100%); overflow: hidden; } .tragass-placeholder::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.08), transparent 60%); } .tragass-placeholder svg { width: 25%; max-width: 64px; min-width: 28px; opacity: 0.9; position: relative; } .tragass-placeholder span { font-family: var(--tragass-font-heading); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; position: relative; } /* Vroeger had elke categorie hier haar eigen tint (bruin, paars, blauw...), wat de site rommelig/inconsistent liet aanvoelen zodra je meerdere categorieën door elkaar zag (vooral zolang de meeste artikelen nog geen eigen uitgelichte afbeelding hebben en dit dus het beeld overal bepaalt). Nu delen alle categorieën dezelfde antraciet-gradient met een vleugje van de merkaccentkleur — categorieën blijven herkenbaar aan hun icoon + label, niet aan een andere kleur, dus het geheel oogt als één merk i.p.v. zeven. */ .tragass-placeholder--scooters, .tragass-placeholder--motoren, .tragass-placeholder--autos, .tragass-placeholder--tuning, .tragass-placeholder--reviews, .tragass-placeholder--guides, .tragass-placeholder--nieuws { background: linear-gradient(150deg, #23262b 0%, #100c0c 100%); } .tragass-media { position: relative; overflow: hidden; border-radius: var(--tragass-radius); background: var(--tragass-paper-alt); } .tragass-media__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } /* Hover-feedback op artikelkaarten: waar je ook op de kaart hovert (niet per se precies op de foto of precies op de titel), zoomt de thumbnail licht in en wordt de titel iets lichter — voelt interactiever, zie .card--small/.card--feature/.trending-card hieronder voor de titel-kleur (die verschilt per variant: gewone kaarten zitten op de normale pagina-achtergrond, feature/trending-kaarten altijd op een donkere foto-overlay). */ a:hover .tragass-media__img, .card:hover .tragass-media__img, .trending-card:hover .tragass-media__img { transform: scale(1.045); } /* ========================================================================= 5. SECTION / EYEBROW / HEADINGS ========================================================================= */ .section { padding-block: clamp(1.75rem, 3.5vw, 3rem); } /* .section--alt gaf secties afwisselend een net iets ander tintje + een scheidingslijn (border-block) — dat las juist als een zichtbare naad tussen bijv. "Laatste artikelen" en "Populair/Trending". Nu dezelfde achtergrond als de rest van de pagina en geen lijn meer, voor een doorlopend, egaler geheel (de sectiekop + witruimte geven al genoeg scheiding). */ .section--alt { background: var(--tragass-paper); } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; } .section__title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; } .section__link { font-weight: 600; font-size: 0.9rem; color: var(--tragass-accent); white-space: nowrap; } .section__link:hover { text-decoration: underline; } /* Eyebrow-labeltjes (het kleine oranje kopje met bolletje boven een titel, bijv. "VERS VAN DE PERS") zijn op verzoek van Dang overal verwijderd — zag er niet professioneel genoeg uit. De markup staat nog in de templates (``), maar wordt nu simpelweg niet getoond; dat is veiliger dan het uit tientallen losse bestanden knippen en identiek qua resultaat. */ .eyebrow { display: none; } /* ========================================================================= 6. HERO / FEATURED STORY ========================================================================= */ .hero { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem); } /* Hero-carrousel: cyclet zelf door de meest recente artikelen (zie .js-hero-carousel in main.js) — geen handmatige knoppen, bewust een rustige, doorlopende auto-cyclus. Alle slides liggen altijd absoluut gestapeld op elkaar (inset: 0) en alleen opacity/zichtbaarheid wisselt, zodat er geen layout-sprong ontstaat bij het wisselen. De visibility- transitie met vertraging houdt een net-onzichtbare slide ook buiten het toetsenbord-tabvolgorde (voorkomt dat je naar een onzichtbare link kan tabben), zonder dat de kruisfade er minder soepel door wordt. */ /* Edge-to-edge net als de Populair/Trending-kaartenrij (zie .carousel-track): geen .tragass-container meer eromheen (front-page.php), dus geen afgeronde hoeken meer die toch niet zichtbaar zijn tegen de rand van het scherm. */ /* Edge-to-edge (geen .tragass-container eromheen, zie front-page.php), maar met een vw-gebaseerde hoogte i.p.v. een vaste 420px — die vaste hoogte gaf op brede schermen een veel te platte/uitgerekte crop van de foto. Bewust geen aspect-ratio: die combineerde met een min-height-vloer en liet sommige browsers de BREEDTE terugrekenen vanuit de geklemde hoogte, wat op smalle schermen een te brede, overflowende hero gaf. Een expliciete width:100% + hoogte via clamp() kan dat niet — width blijft gegarandeerd 100% van de pagina, live geverifieerd op tragass.com. */ .hero-carousel { position: relative; width: 100%; height: clamp(340px, 50vw, 640px); overflow: hidden; } /* Vanaf ongeveer iPad-liggend en breder (dus ook een niet-volledig-scherm vensterbreedte op pc/laptop) laten we de hero niet meer helemaal tot de randen lopen: op zo'n brede vensterbreedte werd de foto anders zo breed uitgerekt (bij een gelijkblijvende max. hoogte van 640px) dat er relatief veel van de foto boven/onderaan wegviel. Vanaf hier dus een begrensde, gecentreerde hero i.p.v. schermvullend — de foto wordt liever wat kleiner getoond (en gecentreerd) dan verder uitgerekt/gecropt. Onder deze breedte (mobiel, iPad rechtop) blijft de hero gewoon edge-to-edge zoals eerder gekozen. */ @media (min-width: 1024px) { .hero-carousel { max-width: var(--tragass-container); margin-inline: auto; border-radius: var(--tragass-radius); } } .hero-carousel__slide { position: absolute; inset: 0; opacity: 0; z-index: 1; pointer-events: none; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s; } .hero-carousel__slide.is-active { opacity: 1; z-index: 2; pointer-events: auto; visibility: visible; transition: opacity 0.9s ease, visibility 0s linear 0s; } .hero-carousel__slide .card--feature { height: 100%; min-height: 0; margin: 0; border-radius: 0; } .card--feature { position: relative; border-radius: var(--tragass-radius); overflow: hidden; color: #fff; min-height: 420px; display: flex; } .card--feature .tragass-media, .card--feature .tragass-placeholder { position: absolute; inset: 0; border-radius: 0; } .card--feature .tragass-media__img { height: 100%; } .card--feature::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.15) 55%, rgb(0 0 0 / 0.05) 100%); z-index: 1; } /* max-width op de tekst: de kaart zelf is nu edge-to-edge (zie .hero-carousel), maar de kop moet op een heel brede monitor niet over de volle schermbreedte uitgerekt worden. */ .card--feature__body { position: relative; z-index: 2; margin-top: auto; padding: clamp(1.5rem, 3vw, 2.5rem); max-width: 46rem; } .card--feature__body h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); } .card--feature__body h2 a, .card--horizontal h3 a, .card--small h3 a { transition: color .2s ease; } /* Uitgelichte kaart staat altijd op een donkere foto-overlay (los van dag/nachtmodus) — daarom hier een vaste lichte dim i.p.v. het normale --tragass-ink-soft token, dat in lichte modus juist donker (en dus onleesbaar) zou worden op deze donkere overlay. */ .card--feature:hover h2 a { color: rgb(255 255 255 / 0.75); } .card--feature__meta { display: flex; gap: 1rem; align-items: center; font-size: 0.85rem; opacity: 0.85; margin-top: 0.75rem; } .card__cat { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tragass-accent); } .card__meta { font-size: 0.78rem; color: var(--tragass-ink-soft); display: flex; gap: 0.6rem; align-items: center; } /* ========================================================================= 7. GRIDS & CARDS ========================================================================= */ .grid { display: grid; gap: 1.75rem; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--4, .grid--3 { grid-template-columns: 1fr; } } .card--small { display: flex; flex-direction: column; gap: 0.9rem; } .card--small .tragass-media, .card--small .tragass-placeholder { aspect-ratio: 4/3; } .card--small h3 { font-size: 1.08rem; } .card--small:hover h3 a { color: var(--tragass-ink-soft); } .card--small p { font-size: 0.92rem; color: var(--tragass-ink-soft); margin-bottom: 0; } .load-more { display: flex; justify-content: center; margin-top: 2.5rem; } .load-more .btn { min-width: 180px; justify-content: center; } .load-more .btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } /* Compacte "mis niks"-strip vlak onder de hero — bewust geen popup. Linkt door naar /nieuwsbrief i.p.v. hier meteen het volledige formulier te tonen. Sinds v1.16.26 weer terug (kort weg geweest in v1.16.25, zie front-page.php). */ .subscribe-strip { padding-block: 0 clamp(1rem, 3vw, 1.5rem); } /* Volgt sinds 21-9-2026 dezelfde dag/nachtmodus als de rest van de pagina (was hiervoor altijd donker) — zelfde paper-alt/ink-opzet als de bestaande .newsletter-sectie in de footer, voor een consistente "kaart op de pagina"-uitstraling in beide standen. */ .newsletter-cta { background: var(--tragass-paper-alt); color: var(--tragass-ink); border: 1px solid var(--tragass-border); border-radius: var(--tragass-radius); padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .newsletter-cta > div:first-child { flex: 1 1 320px; } .newsletter-cta .eyebrow { color: var(--tragass-accent); } .newsletter-cta h2 { margin: 0.3rem 0 0.4rem; font-size: clamp(1.2rem, 2.6vw, 1.55rem); } .newsletter-cta p { margin: 0; color: var(--tragass-ink-soft); font-size: 0.95rem; } .newsletter-cta__btn { flex-shrink: 0; } /* Kaartenrij voor "Populair/Trending" en "Veel gestelde vragen" (zie tragass_render_carousel_section() in functions.php) — een horizontale scroll-rij, handmatig bedienbaar via pijlknoppen (pc) en native swipen/ scrollen (touch/trackpad), zie de js-carousel-* logica in main.js. Had tot v1.16.18 een doorlopende CSS-marquee-animatie die op hover een merkbare "spring"-glitch gaf (het aanpassen van animation-duration op een al lopende CSS-animatie bleek niet soepel te gaan) — sinds v1.16.19 dus even zonder auto-beweging, en sinds 26-9-2026 (v1.16.21) weer terug, maar dan puur JS-gedreven (requestAnimationFrame + scrollLeft i.p.v. een CSS-animatie) zodat pauzeren/hervatten nooit meer zo'n glitch kan geven — zie tragass_render_carousel_section() in functions.php voor het onzichtbare kaart-duplicaat dat de lus naadloos maakt, en .carousel- track__dup hieronder. Geen scroll-snap meer op deze rij: dat zou tijdens de doorlopende auto-scroll steeds opnieuw willen "vastklikken" op een kaart zodra die pauzeert, wat er zelf weer als een sprongetje uit zou zien. */ .carousel-block { position: relative; } .carousel-track { display: flex; gap: 1.25rem; overflow-x: auto; padding: 0.25rem 1rem 0.75rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } /* display:contents: dit element krijgt zelf geen doos — de kaarten erin worden zo directe flex-items van .carousel-track, precies alsof ze geen wrapper hadden, zodat ze in dezelfde rij naast de "echte" set staan. */ .carousel-track__dup { display: contents; } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--tragass-paper); color: var(--tragass-ink); border: 1px solid var(--tragass-border); box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); transition: opacity .15s ease; } .carousel-arrow svg { width: 20px; height: 20px; } .carousel-arrow--prev { left: 0.75rem; } .carousel-arrow--next { right: 0.75rem; } .carousel-arrow:disabled { opacity: 0; pointer-events: none; } /* Op smalle schermen nemen de pijlen relatief veel ruimte in en is swipen sowieso de primaire bediening daar — vanaf tablet-breedte weer zichtbaar. */ @media (max-width: 640px) { .carousel-arrow { display: none; } } .trending-card { position: relative; flex: 0 0 auto; width: min(360px, 80vw); aspect-ratio: 4/5; border-radius: var(--tragass-radius); overflow: hidden; display: flex; color: #fff; } .trending-card .tragass-media, .trending-card .tragass-placeholder { position: absolute; inset: 0; border-radius: 0; } .trending-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.2) 55%, rgb(0 0 0 / 0.05) 100%); } .trending-card__rank { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; font-family: var(--tragass-font-heading); font-weight: 700; font-size: 0.92rem; background: var(--tragass-accent); color: #fff; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .trending-card__body { position: relative; z-index: 2; margin-top: auto; padding: 1.25rem; } .trending-card__cat { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tragass-accent); } .trending-card h3 { font-size: 1.06rem; margin: 0.3rem 0 0; color: #fff; transition: color .2s ease; } /* Altijd een donkere foto-overlay (los van dag/nachtmodus) — vaste lichte dim i.p.v. --tragass-ink-soft, zelfde reden als .card--feature hierboven. */ .trending-card:hover h3 { color: rgb(255 255 255 / 0.75); } /* Samenvatting: onzichtbaar/ingeklapt tot je hovert of 'm met het toetsenbord focust — dan schuift 'm rustig open onder de titel. */ .trending-card__excerpt { font-size: 0.85rem; line-height: 1.4; color: rgb(255 255 255 / 0.85); margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease; } .trending-card:hover .trending-card__excerpt, .trending-card:focus .trending-card__excerpt, .trending-card:focus-visible .trending-card__excerpt { max-height: 6.5rem; opacity: 1; margin-top: 0.6rem; } .category-strip { display: flex; overflow-x: auto; gap: 1.75rem; padding-bottom: 0.5rem; scrollbar-width: thin; } .category-strip .card--small, .category-strip .card--horizontal { min-width: 260px; } /* ========================================================================= 8. NEWSLETTER ========================================================================= */ .newsletter { background: var(--tragass-paper-alt); color: var(--tragass-ink); border: 1px solid var(--tragass-border); border-radius: var(--tragass-radius); padding: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 2rem; align-items: center; } @media (min-width: 860px) { .newsletter { grid-template-columns: 1.1fr 1fr; } } .newsletter h2 { font-size: clamp(1.5rem, 3vw, 2rem); } .newsletter p { color: var(--tragass-ink-soft); } .newsletter form { display: flex; gap: 0.75rem; flex-wrap: wrap; } .newsletter input[type="email"] { flex: 1; min-width: 200px; padding: 0.9rem 1.1rem; border-radius: var(--tragass-radius-sm); border: 1px solid var(--tragass-border); background: var(--tragass-paper); color: var(--tragass-ink); } .newsletter input::placeholder { color: var(--tragass-ink-soft); } .newsletter .form-note { font-size: 0.78rem; color: var(--tragass-ink-soft); margin-top: 0.6rem; } /* Variant in de footer: iets lichter/donkerder dan de footer-achtergrond zelf (paper i.p.v. paper-alt) zodat het kaartje zich nog steeds duidelijk aftekent, in beide standen — volgt verder gewoon dezelfde dag/nachtmodus. */ .newsletter--footer { background: var(--tragass-paper); border-color: var(--tragass-border); color: var(--tragass-ink); } .newsletter--footer p { color: var(--tragass-ink-soft); } .newsletter--footer input[type="email"] { border-color: var(--tragass-border); background: var(--tragass-paper-alt); color: var(--tragass-ink); } .newsletter--footer input::placeholder { color: var(--tragass-ink-soft); } .newsletter--footer .form-note { color: var(--tragass-ink-soft); } /* Generieke opmaak voor het écht ingevulde formulier (Mailchimp-widget/embed of de embed-code uit de Customizer) — die markup kennen we niet exact van tevoren, dus dit pakt de gangbare veldpatronen. Bedoeld om zowel op een lichte (pagina) als donkere achtergrond (footer, nieuwsbriefpagina) goed te ogen via currentColor. */ .newsletter-form { width: 100%; } .newsletter-form form, .newsletter-form #mc_embed_signup_scroll { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; } .newsletter-form label { display: none; } /* labels zijn hier decoratief; placeholders doen het werk */ .newsletter-form input[type="email"], .newsletter-form input[type="text"] { flex: 1 1 200px; min-width: 0; padding: 0.9rem 1.1rem; border-radius: var(--tragass-radius-sm); border: 1px solid var(--tragass-border); background: var(--tragass-paper); color: var(--tragass-ink); font-family: var(--tragass-font-body); font-size: 0.95rem; } .newsletter-form input::placeholder { color: var(--tragass-ink-soft); } .newsletter-form button[type="submit"], .newsletter-form input[type="submit"] { flex-shrink: 0; appearance: none; border: none; cursor: pointer; background: var(--tragass-accent); color: #fff; font-family: var(--tragass-font-heading); font-weight: 600; font-size: 0.95rem; padding: 0.9rem 1.6rem; border-radius: var(--tragass-radius-sm); } .newsletter-form button[type="submit"]:hover, .newsletter-form input[type="submit"]:hover { filter: brightness(1.08); } .newsletter-form .form-note, .newsletter-form .indicates-required { font-size: 0.78rem; color: var(--tragass-ink-soft); margin-top: 0.6rem; width: 100%; } .newsletter-form #mce-responses { width: 100%; } /* email_only-variant: verstopt een eventueel "Voornaam"/"First Name"-veld, ongeacht of dat uit de widget, de embed-code of Mailchimp's eigen markup komt. De echte Mailchimp-widget op tragass.com noemt dit veld "mc_mv_FNAME" (niet kaal "FNAME") — beide staan hieronder, plus main.js als JS-vangnet op eventuele andere/toekomstige veldnamen. */ .newsletter-form--email-only input[name="FNAME"], .newsletter-form--email-only input[name="fname"], .newsletter-form--email-only input[name="mc_mv_FNAME"], .newsletter-form--email-only input[autocomplete="given-name"] { display: none; } .newsletter-form--email-only .mc-field-group:has(input[name="FNAME"]), .newsletter-form--email-only .mc4wp-form-field:has(input[name="FNAME"]), .newsletter-form--email-only .mc_merge_var:has(input[name="mc_mv_FNAME"]), .newsletter-form--email-only .wp-block-mailchimp-mailchimp-form-field:has(input[name="mc_mv_FNAME"]) { display: none; } /* Met nog maar 1 (altijd verplicht) veld heeft "* = required field" geen functie meer. */ .newsletter-form--email-only .mc-indicates-required, .newsletter-form--email-only .indicates-required { display: none; } /* Losstaande "Nieuwsbrief"-pagina (/nieuwsbrief) — sinds v1.16.25 zo simpel en "niet-tractie-creërend" mogelijk gemaakt, op Dang's verzoek, naar het voorbeeld van RetroDodo's Subscribe-pagina: alleen "Aanmelden" in het grote titel-lettertype, een label boven het e-mailveld en een knop eronder even breed als dat veld — verder niks (geen header-navigatie, geen footer, zie header.php/footer.php). Sinds v1.16.27: achtergrond is exact --tragass-paper i.p.v. --tragass-paper-alt — dat was dezelfde kleur als de header/body, maar net een tikje anders, en gaf daardoor op mobiel een lelijke kleurnaad zodra je voorbij het eerste scherm scrolde (de sectie eindigde en de "echte" paginakleur eronder werd zichtbaar). Nu identiek aan de header, dus geen naad meer. Ook de hoogte is vergroot (ruim boven één scherm) zodat er altijd echt iets te scrollen valt i.p.v. dat de pagina precies één scherm vult en je bij het scrollen meteen de elastische bounce van de browser voelt. Sinds v1.16.28: "Aanmelden" + veld + knop staan weer meteen bovenaan (niet meer verticaal gecentreerd in die langere pagina, dat duwde ze onnodig ver naar beneden) — alleen het "geen spam"-tekstje blijft expres verderop staan (zie .newsletter-page__note), dat is nog steeds wat er na een klein scrollgebaar in beeld komt. */ .newsletter-page { min-height: 145vh; background: var(--tragass-paper); color: var(--tragass-ink); padding-block: clamp(3rem, 9vw, 6rem) clamp(3rem, 9vw, 6rem); } .newsletter-page__inner { max-width: 460px; } .newsletter-page h1 { font-size: clamp(2.1rem, 5.5vw, 3.1rem); line-height: 1.05; margin: 0 0 2rem; } /* Label los van het (verborgen)