/* ===================================================================== Let's Cruise, huisstijl.css (v5.0.596) --------------------------------------------------------------------- ÉÉN VORMTAAL VOOR SITE, PORTAAL EN OFFERTE Het offerteportaal en de pdf delen sinds 5.0.476 één palet en één manier van doen: een eyebrow in hoofdletters, een kop in de serif, een gouden streepje eronder, en alles in kaarten met een rustige rand. De site deed het net anders: andere randen, andere schaduwen, een ander blauw in de prijs, en tegels die per pagina van maat verschilden. Dit bestand trekt dat recht. Het staat NA main.css en werkt met klasse-selectoren, niet met !important: main.css is 4703 regels met 263 dubbel gedefinieerde selectoren, en daar nog een laag !important overheen leggen maakt het alleen erger. WAT DIT BESTAND NIET DOET Het verandert geen markup en geen inhoud. Haal je het weg, dan staat de site er weer bij zoals hij stond. Dat is bewust: dit is de laag waarin de nieuwe stijl zich moet bewijzen voordat hij main.css in gaat. ===================================================================== */ :root{ /* Het palet van het portaal, één op één (zie LCOff_Huisstijl). */ --lco-navy:#0A2540; --lco-primair:#0F75BC; --lco-licht:#46B5DD; --lco-goud:#F2B01E; --lco-ink:#1A2A3E; --lco-mut:#5F7288; --lco-lijn:#E4ECF3; --lco-vel:#F6FAFD; --lco-wit:#FFFFFF; --lco-radius:16px; --lco-radius-klein:12px; } /* ===================================================================== 1. SECTIEKOPPEN Eyebrow, kop in de serif, gouden streepje. Precies zoals in het portaal, waar het streepje het teken is dat er een nieuw onderwerp begint. ===================================================================== */ .lct-section-header .lct-eyebrow, .lct-havens-kop .lct-eyebrow{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; font-weight:800; color:var(--lco-primair); } .lct-section-header > h2, .lct-section-header > div > h2{ color:var(--lco-navy); letter-spacing:-.01em; text-wrap:balance; } /* Het gouden streepje. Onder een gecentreerde kop komt hij in het midden. */ .lct-section-header > h2::after, .lct-section-header > div > h2::after{ content:""; display:block; width:52px; height:3px; border-radius:2px; background:var(--lco-goud); margin:11px 0 0; } .lct-section-header.is-center > h2::after{ margin-inline:auto; } /* ===================================================================== 1b. DE CONTAINERBREEDTE, OP ELKE PAGINA DEZELFDE WAT ER MIS WAS. De kop van /cruises/ zag er anders uit dan overal elders, en dat kwam door één ontbrekende regel. main.css zet --lct-container op min(97vw, 1560px); index.css, de uitgeklede kopie die alleen op /cruises/ geladen wordt, kent die regel niet en blijft op de standaard van 1280px staan. Live gemeten op een scherm van 1600: beginpagina /cruises/ --lct-container 1552 px 1280 px kop-binnenmaat 1552 1280 logo 180x60 170x57 menuletter 14 px 14,5 px ruimte tussen items 24 px 28,8 px Dus niet alleen smaller, ook een ander logo en een ander menu. Precies waar build-index.md voor waarschuwt: index.css wordt gegenereerd en loopt achter zodra iemand main.css aanpast zonder opnieuw te bouwen. In augustus ging het al twee keer mis, toen met de paginering en met de logohoogte. Deze regel staat hier omdat huisstijl.css als LAATSTE laadt, op élke pagina, ook op /cruises/. Daarmee is de kop overal gelijk, of index.css nu bijgewerkt is of niet. Wordt index.css ooit netjes opnieuw gegenereerd, dan kan dit blok weg zonder dat er iets verandert. ===================================================================== */ :root{ --lct-container:min(97vw,1202px); } /* v5.0.618: de maat van de cruiselijst, zie 1c */ /* ===================================================================== 1c. EEN BREEDTE VOOR DE HELE SITE, DE CRUISELIJST IS DE MAAT (v5.0.618) Danny, in drie stappen: de cruisepagina's breder dan 75%, de tegels gelijk houden en er meer op een rij zetten, en daarna: "Verstandig lijkt het mij om cruises als maximaal breedte aan te houden, juist omdat die niet helemaal op de breedte past". En: "Foto's niet uit elkaar trekken. Maar juist pagina's redesignen". DE MAAT. Een cruisetegel is 383 breed (compact 185), met 16 ertussen. Naast het filter (340) en de ruimte daartussen (32) past de lijst precies bij een heel aantal tegels. Met de rand van 24 aan weerszijden wordt dat de breedte van de hele site, ook van de kop en de voet: scherm site lijst tegels per rij (compact) tot 1668 1202 1154 2 (4) vanaf 1668 1601 1553 3 (6) 85% op 1920 vanaf 2084 2000 1952 4 (8) Onder de 1240 volgt de site het scherm (97%), zoals altijd. DE LIJST STAAT OP MEER PLEKKEN. Op /cruises/ en als filterblok op de pagina's van rederij, schip en bestemming. Overal dezelfde opbouw en dezelfde tegel: een containerquery kijkt hoeveel ruimte er is en kiest de lijstbreedte uit het rijtje hierboven. Voorheen was de tegel daar 317, 487 of 627 breed, afhankelijk van de pagina. FOTO'S BLIJVEN OP MAAT. Rijen met foto's die een vast aantal kolommen hadden (schepen van een rederij, verhalen, gerelateerd) tellen nu zelf hoeveel er passen; de foto's worden niet groter, er komen er meer naast elkaar. Lopende tekst blijft op leesbreedte. REDESIGN PER PAGINA, vanaf 1280 breed: - haven: kaart en "Over de haven" naast elkaar, de aanlopen in twee kolommen (de lijst was 22.000 pixels lang). - schip: de introductie en "Waar is het schip nu?" naast elkaar. - rederij: de acht kerncijfers aan boord op een rij; het fooienblok had geen rand en liep tegen de schermrand aan. - landingspagina's (cruise uit Rotterdam e.d.): het hele blok breed, de tekst op leesbreedte, de tegels en havens met meer naast elkaar. Tekstpagina's (contact, offerte, voorwaarden, eerste keer cruise, over Danny) en het artikel zelf blijven op leesbreedte. ===================================================================== */ @media (min-width:1668px){ :root{ --lct-container:1601px; } } @media (min-width:2084px){ :root{ --lct-container:2000px; } } body.is-cruise-single .lcd-binnen{ max-width:var(--lct-container); } body.is-cruise-index .lc-index{ max-width:var(--lct-container); } body.is-cruise-index .lc-index .lc-container, body.is-cruise-index .lc-index .lc-search-row, body.is-cruise-index .lc-index .lc-active-filters{ max-width:none; } @media (min-width:1100px){ .lct-acties-hero-inner,.lct-acties-tabs-inner,.lct-acties-featured-inner,.lct-acties-grid-inner,.lct-deals-inner, .lc-bst-wrap,.lct-region-hero-content,.lct-region-section-inner,.lct-haven-links,.lc-hvi-wrap,.lc-hv-wrap, .lct-rederijen-hero-inner,.lct-rederijen-grid-inner,.lct-rederij-section-inner, .lc-ship-container,.lct-blog-featured-inner,.lct-blog-grid-inner,.lct-blog-related-inner, .lct-matcher-hero-inner,.lct-matcher-wizard-inner,.lc-favorites-page, .lcl-hero-in,.lcl-trust-in,.lcl-rel,.lcl-end,.lcl-card{ max-width:var(--lct-container) !important; } body .lct-rederij-section-inner, body .lct-region-section-inner, body .lc-ship-container{ padding-inline:24px; box-sizing:border-box; } } /* De cruiselijst: overal dezelfde opbouw en dezelfde tegel. */ @media (min-width:1100px){ body .lc-index .lc-results-layout{ grid-template-columns:340px minmax(0,1fr); column-gap:32px; padding-inline:0; } } @media (min-width:900px){ body .lc-index .lc-card-grid.lct-tegelrij.is-cols-2{ grid-template-columns:repeat(auto-fill,min(383px,calc(50% - 8px))); gap:16px; } body .lc-index .lc-card-grid.lct-tegelrij.is-cols-4{ grid-template-columns:repeat(auto-fill,min(185px,calc(25% - 10.5px))); gap:14px; } } body :has(> .lc-results-layout){ container:lclijst / inline-size; } @container lclijst (min-width:1154px){ body .lc-index .lc-results-layout{ max-width:1154px; margin-inline:auto; } } @container lclijst (min-width:1553px){ body .lc-index .lc-results-layout{ max-width:1553px; } } @container lclijst (min-width:1952px){ body .lc-index .lc-results-layout{ max-width:1952px; } } /* Rijen met foto's en kaarten: meer naast elkaar in plaats van groter. */ @media (min-width:900px){ body .lct-stories-grid.lct-stories-grid--kaarten{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); } body .lct-rederij-ships-grid{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); } body .lct-blog-related-grid{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); } body .lct-blog-related-grid > *{ grid-column:auto !important; } body .lct-rederij-keyfacts-inner{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } } @media (min-width:1500px){ body .lct-rederij-onboard-grid{ grid-template-columns:repeat(8,minmax(0,1fr)); } } body .lct-rederij-fooien{ max-width:var(--lct-container); margin:34px auto; padding-inline:24px; box-sizing:border-box; } /* Tekst op leesbreedte in de brede blokken. */ body .lcl-card p, body .lcl-card h2, body .lcl-card h3, body .lcl-card ul, body .lcl-card ol{ max-width:80ch; } body .lc-hv-wrap .lc-hv-prose, body .lc-hv-wrap .lc-hv-meta{ max-width:90ch; } /* Haven: kaart en uitleg naast elkaar, de aanlopen in twee kolommen. */ @media (min-width:1280px){ body .lc-hv-wrap .lc-hv-cols{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:32px; } body .lc-hv-wrap .lc-hv-cols > *{ grid-column:1 / -1; } body .lc-hv-wrap .lc-hv-cols:has(> .lc-hv-sec > .lc-hv-prose) > .lc-hv-sec:has(#lc-hv-kaart){ grid-column:1; grid-row:1; } body .lc-hv-wrap .lc-hv-cols > .lc-hv-sec:has(> .lc-hv-prose):not(:has(#lc-hv-calls)){ grid-column:2; grid-row:1; align-self:start; } body .lc-hv-wrap .lc-hv-calls{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 24px; align-items:start; } body .lc-hv-wrap .lc-hv-calls > .lc-hv-empty-month{ grid-column:1 / -1; } } /* Schip: introductie en de live kaart naast elkaar. */ @media (min-width:1280px){ body .lc-ship-container:has(> div > .lct-schepenkaart){ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:40px; align-items:start; } body .lc-ship-container:has(> div > .lct-schepenkaart) > *{ grid-column:1 / -1; } body .lc-ship-container:has(> div > .lct-schepenkaart) > .lc-ship-intro{ grid-column:1; grid-row:2; } body .lc-ship-container > div:has(> .lct-schepenkaart){ grid-column:2; grid-row:2; } } /* ===================================================================== 2. DE TEGELRIJ De rij telt zelf uit hoeveel tegels er passen. Zie de uitleg in de regel hieronder: een vast aantal kolommen ging mis zodra dezelfde rij in een smallere kolom belandde, zoals naast het filter op /cruises/. ===================================================================== */ .lct-tegelrij, .lc-card-grid.lct-tegelrij, .lc-shared-card-grid, .lct-region-cruises-grid, .lct-rederij-cruises-grid, .lc-ship-cruise-grid{ display:grid; /** * v5.0.571: de rij telt zijn eigen kolommen uit. Geen vast aantal meer. * * WAT ER MIS WAS AAN EEN VAST AANTAL. Er stond "repeat(5, 1fr)" met een rij afbuigingen * eronder voor smallere schermen. Op de beginpagina viel dat mee, maar op /cruises/ staat de * tegelrij IN een resultatenkolom naast het filter, en die is daar 806 pixels breed. Vijf * kolommen in 806 pixels geeft tegels van 148 pixels. In dit bestand staat drie hoofdstukken * hoger mijn eigen zin dat een tegel van 150 pixels door niemand gelezen wordt, en precies dat * stond er dus live. * * Met auto-fill rekent de rij zelf uit hoeveel er passen, waar hij ook staat: * * Gemeten met de ECHTE tegel, niet met een blokje: * * 1392 px (beginpagina, scherm 1600) -> 5 tegels van 265 * 1082 px (scherm 1280) -> 4 tegels van 258 * 806 px (resultatenkolom /cruises/) -> 3 tegels van 258 * 511 px (telefoon liggend) -> 2 tegels van 248 * 375 px (telefoon) -> 1 tegel, volle breedte * * DE ONDERGRENS GING VAN 184 NAAR 248, EN DAAR ZIT EEN AFWEGING ONDER. * In 5.0.571 stonden er zeven op een rij van 185 pixels. Dat kon, want de tegel had toen alleen * een titel, een scheepsnaam en een prijs. Sinds 5.0.572 staan er ook de aanleghavens, een * datumbereik en een knop "Bekijk cruise" op. In 185 pixels passen de prijs en die knop niet * naast elkaar en wordt de havenlijst één woord per regel. * * Vijf rijkere tegels laten meer zien dan zeven kale, en op /cruises/ gaat het nog steeds * vooruit: van vijf onleesbare van 148 naar drie van 258. */ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; /** * v5.0.571: de max-width van 1400 is eraf. * * Die zat er sinds 5.0.563 in om te voorkomen dat tegels op een breed scherm zó groot werden * dat de foto korrelig werd. Dat probleem is bij de bron opgelost (lct_vierkante_maten in * functions.php), en de rem kostte wel wat: op een scherm van 1600 was de container 1552 breed * en de rij 1392, dus stond er aan weerszijden 80 pixels leeg. Dat viel het meest op bij * "Snelle vertrekken & korting", want daar loopt het blok eromheen wél door. * * Nu volgt de rij gewoon zijn container, en met auto-fill worden de tegels bij meer ruimte * niet groter maar talrijker. Dat is de goede kant op. */ margin-left:auto; margin-right:auto; } /** * Onder de 560 pixels één tegel per rij. * * Dit is de enige afbuiging die overblijft, en hij staat op 440 en niet op 560. Op 560 zou één * tegel over de volle breedte komen te staan, met een vierkante foto van bijna 500 pixels: veel * te dominant op een klein scherm. Daarboven regelt auto-fill het (bij 560 worden dat er twee). * * Onder de 440 moet die ene tegel juist WEL meegroeien tot de volle breedte, want minmax zou hem * anders op 184 laten staan met een lege strook ernaast. */ @media (max-width:440px){ .lct-tegelrij, .lc-card-grid.lct-tegelrij, .lc-shared-card-grid, .lct-region-cruises-grid, .lct-rederij-cruises-grid, .lc-ship-cruise-grid{ grid-template-columns:1fr; gap:14px; } } /** * v5.0.591: HET TWEELUIK OP /cruises/ IS DE STANDAARD, EN BLIJFT TWEE KOLOMMEN. * * De weergavekeuze 1 / 2 / 4 stond in main.css, en daar stond ook een regel die onder de 700 * pixels ELKE weergave terugzette naar één kolom. Twee kolommen op een tablet van 800 was dus * niet mogelijk, hoe je de knop ook zette. * * Deze regels staan op (0,4,0), één niveau boven die van main.css, zodat het niet uitmaakt in * welke volgorde de optimalisatieplugin de bestanden samenvoegt. * * DE GRENS LIGT NU OP 560 IN PLAATS VAN 700. Tussen 560 en 700 is een tegel nog 265 pixels * breed, en dat is precies de maat waar de containerquery van de tegel op gebouwd is. Onder de * 560 zou hij onder de 250 zakken en dan gaat er informatie uit; daar blijft het één kolom. */ .lc-index .lc-card-grid.lct-tegelrij.is-cols-2{ grid-template-columns:repeat(2,1fr); gap:16px; } @media (max-width:560px){ .lc-index .lc-card-grid.lct-tegelrij.is-cols-2{ grid-template-columns:1fr; gap:14px; } } /* Het blok "Laat Danny meedenken" tussen de tegels loopt over de hele rij. */ .lct-tegelrij .lc-infeed-cta, .lct-tegelrij .lc-acties-banner{ grid-column:1 / -1; } /* De favorietenpagina bouwt zijn kaarten met javascript en gebruikt de uitgebreide kaart; die heeft meer breedte nodig dan een tegel. */ .lc-favorites-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } @media (max-width:1040px){ .lc-favorites-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:820px) { .lc-favorites-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:520px) { .lc-favorites-grid{ grid-template-columns:1fr; } } /* ===================================================================== 2b. DE RIJEN OP DE BEGINPAGINA: ALTIJD VOL (v5.0.619) Danny: "beginpagina: uitgelicht cruisetegels maximaliseren tot het maximale per pagina, oftewel het moeten altijd 2 rijen zijn behalve op een telefoon (dan max 8). bij snelle vertrekken idem, maar dan met een max van 5 op mobiel maar bijv 7 of 8 op full size". HOE. De tegelrij telt zelf hoeveel tegels er naast elkaar passen (auto-fill). Een containerquery op het omhulsel (.lct-rijmaat) weet dus ook hoeveel dat er zijn, en verbergt wat niet in de volle rijen past: Uitgelicht (tegel vanaf 240, tussenruimte 16), twee volle rijen: rijbreedte op een rij te zien tot 752 1 of 2 8 (telefoon) 752 - 1008 3 6 1008 - 1264 4 8 1264 - 1520 5 10 (scherm 1920: rij 1441) 1520 - 1776 6 12 1776 - 2032 7 14 (scherm vanaf 2084: rij 1840) vanaf 2032 8 16 Snelle vertrekken (kleine tegel vanaf 185, tussenruimte 14), een volle rij: op de telefoon vijf, daarboven zoveel als er passen. Op een scherm van 1920 zijn dat er zeven, vanaf 2084 negen. Zijn er minder uitgelichte cruises dan twee rijen vragen, dan blijft er een volle rij staan in plaats van een halve tweede. ===================================================================== */ .lct-rijmaat{ container:rijmaat / inline-size; } @media (min-width:441px){ body .lct-rijmaat--een .lct-tegelrij{ grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:14px; } } /* Telefoon (een of twee op een rij): uitgelicht acht, snelle vertrekken vijf. */ @container rijmaat (max-width:751.98px){ .lct-rijmaat--twee .lct-tegelrij > :nth-child(n+9){ display:none; } } @container rijmaat (min-width:752px) and (max-width:1007.98px){ .lct-rijmaat--twee .lct-tegelrij > :nth-child(n+7){ display:none; } .lct-rijmaat--twee .lct-tegelrij:not(:has(> :nth-child(6))) > :nth-child(n+4){ display:none; } } @container rijmaat (min-width:1008px) and (max-width:1263.98px){ .lct-rijmaat--twee .lct-tegelrij > :nth-child(n+9){ display:none; } .lct-rijmaat--twee .lct-tegelrij:not(:has(> :nth-child(8))) > :nth-child(n+5){ display:none; } } @container rijmaat (min-width:1264px) and (max-width:1519.98px){ .lct-rijmaat--twee .lct-tegelrij > :nth-child(n+11){ display:none; } .lct-rijmaat--twee .lct-tegelrij:not(:has(> :nth-child(10))) > :nth-child(n+6){ display:none; } } @container rijmaat (min-width:1520px) and (max-width:1775.98px){ .lct-rijmaat--twee .lct-tegelrij > :nth-child(n+13){ display:none; } .lct-rijmaat--twee .lct-tegelrij:not(:has(> :nth-child(12))) > :nth-child(n+7){ display:none; } } @container rijmaat (min-width:1776px) and (max-width:2031.98px){ .lct-rijmaat--twee .lct-tegelrij > :nth-child(n+15){ display:none; } .lct-rijmaat--twee .lct-tegelrij:not(:has(> :nth-child(14))) > :nth-child(n+8){ display:none; } } @container rijmaat (min-width:2032px){ .lct-rijmaat--twee .lct-tegelrij > :nth-child(n+17){ display:none; } .lct-rijmaat--twee .lct-tegelrij:not(:has(> :nth-child(16))) > :nth-child(n+9){ display:none; } } @container rijmaat (max-width:582.98px){ .lct-rijmaat--een .lct-tegelrij > :nth-child(n+6){ display:none; } } @container rijmaat (min-width:583px) and (max-width:781.98px){ .lct-rijmaat--een .lct-tegelrij > :nth-child(n+4){ display:none; } } @container rijmaat (min-width:782px) and (max-width:980.98px){ .lct-rijmaat--een .lct-tegelrij > :nth-child(n+5){ display:none; } } @container rijmaat (min-width:981px) and (max-width:1179.98px){ .lct-rijmaat--een .lct-tegelrij > :nth-child(n+6){ display:none; } } @container rijmaat (min-width:1180px) and (max-width:1378.98px){ .lct-rijmaat--een .lct-tegelrij > :nth-child(n+7){ display:none; } } @container rijmaat (min-width:1379px) and (max-width:1577.98px){ .lct-rijmaat--een .lct-tegelrij > :nth-child(n+8){ display:none; } } @container rijmaat (min-width:1578px) and (max-width:1776.98px){ .lct-rijmaat--een .lct-tegelrij > :nth-child(n+9){ display:none; } } @container rijmaat (min-width:1777px) and (max-width:1975.98px){ .lct-rijmaat--een .lct-tegelrij > :nth-child(n+10){ display:none; } } @container rijmaat (min-width:1976px){ .lct-rijmaat--een .lct-tegelrij > :nth-child(n+11){ display:none; } } /* v5.0.621: een volle rij gewone tegels (tegel vanaf 240, tussenruimte 16). Voor de soortgelijke cruises onder een cruisepagina. Daar stonden er vier, ook op een scherm waar er zeven naast elkaar passen, met drie lege plekken ernaast. Nu komen er tot acht op, en blijft staan wat er in een rij past. Op de telefoon blijven het er vier, net als voorheen. */ @container rijmaat (max-width:751.98px){ .lct-rijmaat--vol .lct-tegelrij > :nth-child(n+5){ display:none; } } @container rijmaat (min-width:752px) and (max-width:1007.98px){ .lct-rijmaat--vol .lct-tegelrij > :nth-child(n+4){ display:none; } } @container rijmaat (min-width:1008px) and (max-width:1263.98px){ .lct-rijmaat--vol .lct-tegelrij > :nth-child(n+5){ display:none; } } @container rijmaat (min-width:1264px) and (max-width:1519.98px){ .lct-rijmaat--vol .lct-tegelrij > :nth-child(n+6){ display:none; } } @container rijmaat (min-width:1520px) and (max-width:1775.98px){ .lct-rijmaat--vol .lct-tegelrij > :nth-child(n+7){ display:none; } } @container rijmaat (min-width:1776px) and (max-width:2031.98px){ .lct-rijmaat--vol .lct-tegelrij > :nth-child(n+8){ display:none; } } /* ===================================================================== 3. DE CRUISETEGEL: één opmaak, op elke pagina --------------------------------------------------------------------- v5.0.572: opnieuw opgezet naar het voorbeeld dat Danny aanleverde, maar in zijn eigen vormtaal. WAT ER OP STAAT, VAN BOVEN NAAR BENEDEN foto met het rederijlogo linksboven en het hartje rechtsboven titel de reis zelf, twee regels rederij de naam, ZONDER sterren pillen "Vanuit Nederland", last minute / korting, "Danny was aan boord" wanneer van ... tot ..., met de einddatum erbij wat duur en vaargebied waarlangs de aanleghavens voet prijs links, "Bekijk cruise" rechts WAT ER BEWUST NIET OP STAAT Sterren. Het voorbeeld heeft er vijf op elke kaart, en een score die bij iedereen hetzelfde is zegt niets. Danny's onderscheid is dat hij zelf aan boord is geweest, en dat staat er als pil. Ook geen bootje voor "Bekijk cruise". Op een tegel met een scheepsfoto, een rederijlogo en een ankertje is dat het vierde bootje. ===================================================================== */ .lct-tegel{ position:relative; background:var(--lco-wit); border:1px solid var(--lco-lijn); border-radius:var(--lco-radius); overflow:hidden; display:flex; flex-direction:column; color:var(--lco-ink); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .lct-tegel:hover{ transform:translateY(-2px); border-color:#cfe0ee; box-shadow:0 10px 26px rgba(10,37,64,.10); } /** * De foto. width:100% staat er expres bij. * * Een kader met alleen aspect-ratio laat de browser in sommige gevallen de BREEDTE afleiden uit de * hoogte, en dan krimpt de foto tot een strook. Dat is hier eerder misgegaan. * * v5.0.572: 4 op 3 in plaats van vierkant. De tegel heeft er nu zoveel regels bij gekregen dat een * vierkante foto hem te lang maakt; liggend past hij beter bij de rest en bij het voorbeeld. */ .lct-tegel-foto{ position:relative; width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#eaf3fa,#d7e8f5); overflow:hidden; flex:0 0 auto; } /* v5.0.590: de om de tegelfoto telt niet mee voor de opmaak; het vult het vakje. */ .lct-tegel-foto picture{ display:contents; } .lct-tegel-foto img{ width:100%; height:100%; object-fit:cover; display:block; } /* v5.0.675: Danny: "wat zijn de foto's donker en grauw". Veel scheepsfoto's van de rederijen zijn donker (diepblauwe zee, schaduw op de romp). Iets lichter en frisser, zonder dat de kleuren onecht worden. */ .lct-tegel-foto img{ filter:brightness(1.08) contrast(1.06) saturate(1.12); } .lct-tegel-geenfoto{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--lco-primair); opacity:.7; text-align:center; padding:0 12px; } /* Het rederijlogo, linksboven op de foto. Op een wit plaatje, want deze logo's zijn gemaakt voor een witte achtergrond en verdwijnen op een donkere romp. */ .lct-tegel-merk{ position:absolute; top:10px; left:10px; z-index:2; display:flex; align-items:center; justify-content:center; height:34px; min-width:34px; max-width:56%; padding:5px 9px; border-radius:9px; background:#fff; /* 5.0.746: helemaal wit, anders schemert de lucht door en valt het witte vlak van het logo op */ box-shadow:0 1px 4px rgba(10,37,64,.16); } .lct-tegel-merk img{ max-height:24px; max-width:100%; width:auto; height:auto; object-fit:contain; display:block; mix-blend-mode:multiply; /* een bijna wit vlak in het logo valt weg tegen het wit */ } .lct-tegel-hart{ position:absolute; top:10px; right:10px; z-index:3; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.92); border:0; cursor:pointer; color:var(--lco-mut); box-shadow:0 1px 4px rgba(10,37,64,.16); transition:color .15s, background .15s; } .lct-tegel-hart:hover{ color:#d1495b; background:#fff; } .lct-tegel-hart.is-active{ color:#d1495b; } .lct-tegel-hart.is-active svg{ fill:currentColor; } .lct-tegel-body{ padding:13px 15px 15px; display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; } /** * De titel staat nu BOVEN de rederijnaam. * * In het voorbeeld dat Danny aanleverde ook, en dat is beter: de reis is waar iemand op zoekt, de * rederij is een bijzin. Andersom leest hij op elke tegel eerst dezelfde vier merknamen. * * Hoogstens twee regels, maar GEEN vaste hoogte. * * Die vaste hoogte stond er om de voeten van de tegels uit te lijnen, maar dat doet margin-top:auto * op de voet al. Wat de vaste hoogte wél deed: onder een korte titel als "Westelijke Middellandse * Zee" een half lege regel achterlaten. Weg ermee. */ /** * v5.0.584: de tegeltitel staat op ELKE pagina in dezelfde letter. * * WAT ER MIS WAS, in de browser gemeten op 20 september: * * beginpagina /cruises/ * font-family Plus Jakarta Sans Fraunces, Times New Roman, serif * font-weight 700 600 * * Dezelfde tegel, dezelfde cruise, twee verschillende letters. De oorzaak is één regel in de * gebundelde css: * * .lc-index h1, .lc-index h2, .lc-index h3, .lc-index h4 { font-family: Fraunces, ... } * * De tegeltitel is een

, en op /cruises/ zit hij binnen .lc-index. Die regel is bedoeld voor * de KOPPEN van die pagina, maar hij pakt elke h3 die er toevallig in staat, dus ook die van de * tegel. Op de beginpagina bestaat .lc-index niet, dus daar bleef het de huisletter. * * DE SPECIFICITEIT IS HIER HET HELE PUNT. `.lct-tegel-titel` alleen is (0,1,0) en verliest van * `.lc-index h3` (0,1,1). Daarom staat de tegel er als voorouder bij: (0,2,0) wint, zonder * !important, en zonder dat de echte koppen van /cruises/ hun serif kwijtraken. * * Dit is dezelfde les als bij de rest van de tegel: één definitie is de helft, hij moet ook * bestand zijn tegen de pagina waar hij in landt. */ .lct-tegel .lct-tegel-titel, .lct-tegel-titel{ margin:0; font-size:15.5px; line-height:1.3; font-family:var(--lct-font-body,'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif); font-weight:700; letter-spacing:-.01em; color:var(--lco-navy); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; } .lct-tegel-titel a{ color:inherit; text-decoration:none; } .lct-tegel-link::after{ content:""; position:absolute; inset:0; z-index:1; } .lct-tegel:focus-within{ border-color:#cfe0ee; } .lct-tegel-link:focus-visible::after{ outline:3px solid var(--lco-goud); outline-offset:-3px; border-radius:var(--lco-radius); } .lct-tegel-rederij{ font-size:12.5px; font-weight:600; color:var(--lco-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /** * v5.0.580: het schip als eigen element, met een scheepje ervoor. * * In 5.0.579 stond de naam als gewone tekstregel onder de titel, en daar viel hij weg: dezelfde * grootte en bijna dezelfde kleur als de drie regels eronder. Nu heeft hij een eigen vorm, zodat * in één oogopslag te zien is dát er een schip genoemd wordt en welk. Het is de enige eigennaam * op de tegel en het woord waar iemand op zoekt ("MSC Euribia cruise"). * * Staat de rederij er ook (alleen als er geen logo gevonden is), dan komt die er kleiner en * lichter achter: dan is het verschil tussen de twee zichtbaar zonder een tweede regel. */ /** * v5.0.582: er staat "REDERIJ - SCHIPNAAM", en die regel mag nu afbreken. * * In hoofdletters is "HOLLAND AMERICA LINE - NIEUW STATENDAM" breder dan de smalste tegel. Eén * regel afdwingen zou de naam afkappen; twee nette regels zijn beter. Het scheepje blijft bovenaan * staan (align-items:flex-start) zodat het bij de eerste regel hoort en niet tussen de twee in * komt te zweven. * * Afbreken mag ALLEEN bij het streepje. De twee namen staan daarom in eigen spans met nowrap: * "HOLLAND AMERICA" / "LINE - NIEUW STATENDAM" zou erger zijn dan geen tweede regel. */ .lct-tegel-schipregel{ display:flex; align-items:flex-start; gap:5px; min-width:0; margin:2px 0 0; line-height:1.35; } .lct-tegel-schipregel svg{ flex:0 0 auto; margin-top:1px; color:var(--lco-primair); opacity:.85; } .lct-tegel-merknaam, .lct-tegel-schipnaam{ white-space:nowrap; } .lct-tegel-koppel{ opacity:.6; } /** * v5.0.581: de scheepsnaam mag niet op een tweede titelregel lijken. * * In 5.0.580 stond hij er in hetzelfde donkerblauw en bijna hetzelfde gewicht als de titel, twee * pixels kleiner. Daardoor las de tegel als een kop van drie regels waarvan de laatste kort was, * en dat was precies niet de bedoeling: de titel zegt wat de reis is, het schip is een ander soort * gegeven. * * Nu in de vorm die de site al voor labels gebruikt: de eyebrow uit hoofdstuk 1 (hoofdletters, * klein, gespatieerd, in het oceaanblauw). Vier dingen tegelijk anders dan de titel (kleur, * grootte, kapitalen en spatiëring), zodat er geen twijfel over kan bestaan, en toch geen nieuwe * vormtaal: dit is hoe een label er op deze site uitziet. * * MAAT EN SPATIËRING ZIJN GEMETEN, NIET GEKOZEN. De sectiekoppen staan op 1,5px spatiëring; met * die waarde past de langste scheepsnaam uit de vloot niet meer. Gemeten in de smalste tegel (245 * breed, 213 ruimte op die regel), met "Independence of the Seas" als langste echte naam: * * 11,5px / .04em -> 219 te breed * 11,5px / .02em -> 213 precies op de rand * 11px / .04em -> 210 krap * 11px / .02em -> 205 past, ook op een tegel van 240 * * Het is dus 11px en .02em geworden. De hoofdletters doen het onderscheid al; de spatiëring hoeft * het niet nog eens over te doen ten koste van een afgekapte naam. */ .lct-tegel-schip{ min-width:0; font-size:12px; font-weight:800; color:var(--lco-primair); text-transform:uppercase; letter-spacing:.02em; /* Hoogstens twee regels; een derde regel betekent dat er iets anders mis is. */ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; } /* De pillen: goud voor waarom NU, blauw voor waarom JUIST DEZE. */ .lct-kaartpillen{ display:flex; flex-wrap:wrap; gap:6px; margin:5px 0 3px; } .lct-kaartpil{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:700; line-height:1.3; } .lct-kaartpil--goud{ background:var(--lco-goud); color:#3a2a00; } .lct-kaartpil--blauw{ background:#eaf3fa; color:var(--lco-primair); } /** * v5.0.573: "Vanuit Nederland" staat nu bij de andere pillen in plaats van op de foto. * * Als enige met een VOLLE kleur, want hij zegt iets anders dan de andere twee. Goud en lichtblauw * zijn verleiding (nú kijken, juist deze); dit is een feit over de reis waar je op filtert. Een * volle kleur zet hem apart zonder dat er een vierde vorm bij komt. */ .lct-kaartpil--nl{ background:var(--lco-primair); color:#fff; } /** * v5.0.577: "Alleen volwassenen", hetzelfde soort label maar met een eigen vorm. * * Het is net als "Vanuit Nederland" een feit waarop je filtert, geen verleiding. Maar twee volle * blauwe pillen naast elkaar wordt een blauw blok waarin je geen van beide meer leest. Daarom een * omlijnde in plaats van een gevulde: hij staat duidelijk in dezelfde familie, zonder het gewicht * te verdubbelen. * * Geen rood of oranje: dit is geen waarschuwing. Voor een stel is het juist een plus, en alleen * voor een gezin een reden om verder te kijken. De vorm zegt "dit moet je weten", niet "let op". */ .lct-kaartpil--feit{ background:#fff; color:var(--lco-navy); box-shadow:inset 0 0 0 1px #c7d7e4; } .lct-kaartpil--feit svg{ opacity:.75; } /* v5.0.667: badge Familiecruise, in het geel van de kindermodus, zodat hij opvalt naast de blauwe. */ .lct-kaartpil--gezin{ background:#FFF3D1; color:#6B4A00; box-shadow:inset 0 0 0 1px #F2D27A; } .lct-kaartpil--gezin svg{ opacity:1; } .lct-kaartpil svg{ width:13px; height:13px; flex:0 0 auto; } /* De feitenregels: een icoontje en een regel tekst. */ .lct-tegel-regel{ display:flex; align-items:flex-start; gap:6px; min-width:0; font-size:12.5px; line-height:1.45; color:var(--lco-mut); } .lct-tegel-regel svg{ flex:0 0 auto; margin-top:1px; opacity:.85; } .lct-tegel-regel > span{ min-width:0; } .lct-tegel-regel.is-lastminute{ color:#9a6a12; font-weight:600; } .lct-tegel-tot{ opacity:.7; } /** * v5.0.578: het kopje voor "Vertrek", "Aankomst" en "Vertrek en aankomst". * * Deze regels stonden eerst allemaal samengeperst in de opsomming onder "Aanleghavens". Live op de * AIDA-tegel las dat als: "Kiel, Duitsland · Stavanger · … · Kiel, Duitsland". Kiel twee keer, en * de eerste en de laatste zijn helemaal geen aanleghaven: dat is waar je AAN BOORD stapt en waar * je er weer af komt. * * Zelfde vorm als de kop bij de aanleghavens (vet en donker), zodat je de drie regels als één * groepje leest en niet als drie losse mededelingen. */ .lct-tegel-plaatskop{ font-weight:700; color:var(--lco-navy); } .lct-tegel-plaatskop::after{ content:"\00a0\00b7"; font-weight:400; opacity:.45; } /** * De aanleghavens. * * Bewust "Aanleghavens" en niet "Vaarroute": een vaarroute klinkt als een lijn op een kaart, * aanleghavens zijn de plaatsen waar je werkelijk van boord stapt. Het is ook het woord dat de * rest van de site gebruikt. * * Twee regels, dan puntjes. Acht havens met land erachter maken de tegel anders twee keer zo hoog * als de foto, en dan verspringen de voeten van de tegels in een rij. */ .lct-tegel-havens{ margin-top:3px; font-size:12.5px; line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; } .lct-tegel-havenskop{ font-weight:700; color:var(--lco-navy); } .lct-tegel-havenskop::after{ content:": "; } .lct-tegel-havenslijst{ color:var(--lco-mut); } /* De voet: prijs links, knop rechts, op één lijn onderaan. */ .lct-tegel-voet{ margin-top:auto; padding-top:11px; border-top:1px solid var(--lco-lijn); /** * Prijs boven, knop eronder over de VOLLE breedte. * * In het voorbeeld staan ze naast elkaar, en op een tegel van 350 pixels zou dat ook passen. * Maar bij 248 pixels niet, en dan sloeg de knop om naar de volgende regel met een lege strook * ernaast: dat leest als een fout in plaats van als een keuze. Eén vorm die op elke breedte * hetzelfde is, is rustiger, en een knop over de volle breedte is op een telefoon bovendien * makkelijker te raken. */ display:flex; flex-direction:column; align-items:stretch; gap:9px; } /** * De andere vertrekdata, als eigen blokje boven de prijs en de knop. v5.0.580 * * In 5.0.579 was dit een grijze regel met "12 vertrekdata t/m mrt 2028". Dat las als een * voetnoot bij de prijs, en het vroeg de bezoeker zelf te bedenken dat er dus misschien een * datum tussen zit die hem wél schikt. Als apart vlak met de data erin is het een aanbod in * plaats van een mededeling. * * Een eigen achtergrond en rand, want hij moet zich losmaken van de prijs eronder zonder ermee * te concurreren: geen kleur die schreeuwt, wel een eigen vorm. * * Eén regel, altijd. Wordt dit blokje twee regels hoog, dan zakt de knop en worden de tegels in * een rij ongelijk. Past het niet, dan valt het eind weg met een beletselteken; de kalender, het * woord "Ook op" en de eerste datum zijn dan nog te zien, en dat is de helft die telt. */ .lct-tegel-data{ display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:10px; background:var(--lco-vel); border:1px solid var(--lco-lijn); font-size:12px; line-height:1.3; white-space:nowrap; overflow:hidden; } .lct-tegel-data svg{ flex:0 0 auto; color:var(--lco-primair); opacity:.85; } /* ===================================================================== DE DATABALK DIE OPENKLAPT (v5.0.582) Met
en , niet met javascript. De browser doet het openklappen zelf, het werkt ook als main.js faalt, en een schermlezer kent deze vorm uit zichzelf. Vandaag ging er nog een hartje stuk doordat een bindfunctie twee keer draaide; die hele klasse fouten bestaat hier niet. Z-INDEX 2 IS HIER GEEN OPSMUK MAAR DE WERKING. De titel-link van de tegel ligt als onzichtbaar vlak over de HELE tegel (.lct-tegel-link::after, z-index 1) zodat je overal kunt klikken. Zonder een hogere laag hier vangt dat vlak elke klik op de balk af en beland je op de cruisepagina in plaats van dat er iets openklapt. ===================================================================== */ /** * De rand en de achtergrond zitten op het HELE vak, niet op de balk. * * Anders staat de uitgeklapte lijst buiten het vlakje te zweven en lijkt hij bij de prijs te * horen in plaats van bij de balk waar je op klikte. Zo groeit het vlakje mee en blijft het één * ding. */ .lct-tegel-datavak{ position:relative; z-index:2; background:var(--lco-vel); border:1px solid var(--lco-lijn); border-radius:10px; } .lct-tegel-datavak > .lct-tegel-data{ background:none; border:0; border-radius:0; } .lct-tegel-datavak > summary{ cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; } .lct-tegel-datavak > summary::-webkit-details-marker{ display:none; } .lct-tegel-datavak:hover{ border-color:#cfe0ee; } .lct-tegel-datavak > summary:focus-visible{ outline:3px solid var(--lco-goud); outline-offset:-1px; border-radius:10px; } /* Het pijltje staat rechts en draait mee; zo is te zien dat er iets te openen valt. */ .lct-tegel-datapijl{ display:inline-flex; margin-left:auto; color:var(--lco-primair); transition:transform .15s ease; } .lct-tegel-datavak[open] .lct-tegel-datapijl{ transform:rotate(180deg); } /* Staat de teller er ook, dan duwt díe al naar rechts en hoeft het pijltje dat niet nog eens. */ .lct-tegel-datameer + .lct-tegel-datapijl{ margin-left:3px; } /** * De lijst erft de maat NIET van de balk, want hij staat ernaast en niet erin. * * Zonder deze regel pakt hij de letter van de tegel (14px) en werden de uitgeklapte data * zichtbaar groter dan de datum in de balk erboven: dezelfde soort gegevens, twee maten. */ .lct-tegel-datalijst{ display:flex; flex-wrap:wrap; gap:5px; padding:2px 8px 8px; font-size:12px; line-height:1.3; border-top:1px solid var(--lco-lijn); margin-top:1px; padding-top:8px; } .lct-tegel-datum--link{ text-decoration:none; } .lct-tegel-datum--link:hover{ border-color:var(--lco-primair); color:var(--lco-primair); } .lct-tegel-dataalles{ align-self:center; font-size:12px; font-weight:700; color:var(--lco-primair); text-decoration:underline; } @media (prefers-reduced-motion:reduce){ .lct-tegel-datapijl{ transition:none; } } /** * Niets in dit blokje krimpt. * * Eerst stond er text-overflow:ellipsis op het label en de data, zodat het "netjes" zou afkappen * als het krap werd. Dat pakte omgekeerd uit: drie pixels tekort gaf "Ook ... 12 S... 26 S... +9", * want een beletselteken kost meer ruimte dan het bespaart. De inhoud is nu zo gekozen dat hij * altijd past (één datum), en flex-shrink:0 zorgt dat hij bij een onverwacht lange tekst liever * aan de rand wegloopt dan dat elk woord half wordt afgekapt. */ .lct-tegel-datakop{ flex:0 0 auto; font-weight:700; color:var(--lco-mut); } /* De datum zelf op een wit plaatje, zodat hij als keuze leest en niet als doorlopende tekst. */ .lct-tegel-datum{ flex:0 0 auto; background:var(--lco-wit); border:1px solid var(--lco-lijn); border-radius:7px; padding:1px 6px; font-weight:700; color:var(--lco-ink); } /** * De teller staat rechts en krimpt nooit. * * Wordt het te krap, dan moet er een datum wijken en niet dit: "+9" is het deel dat zegt dat er * nog meer is, en zonder dat leest het blokje als een volledige opsomming van twee data. */ .lct-tegel-datameer{ flex:0 0 auto; margin-left:auto; font-weight:700; color:var(--lco-primair); } /** * "Enkele reis", de regel vlak boven de knop. v5.0.586 * * BEWUST GEEN VLAK ZOALS DE DATABALK. Er staan in de voet al een databalk, een prijs en een knop; * een vierde omkaderd blok maakt er een stapel van en dan wint niets meer. Dit is een regel, met * een pijl van een punt naar een punt ervoor: dat tekent precies wat er gebeurt, van de ene haven * naar de andere. * * GEEN GOUD EN GEEN ROOD. Goud betekent op deze tegel "waarom NU" (last minute) en rood een * korting boven de 25 procent. Dit is geen urgentie en geen aanbieding maar een feit over de reis, * dus het staat in de gewone tekstkleur met het icoon in het huisblauw, net als de plaatsregels * erboven. Wie er wel naar zoekt vindt het; wie erover leest struikelt er niet over. * * EEN REGEL, EN DAAR PAST MAAR TWEE WOORDEN OP. Er stond eerst "andere aankomsthaven" achter, en * dat werd op een tegel van 258 pixels op élke tegel afgekapt tot "andere aankomst…". Dezelfde * fout die de databalk hierboven al een keer onleesbaar maakte: een beletselteken kost meer * ruimte dan het bespaart. De uitleg zit nu in de title, en de tegel verklaart het woord zelf, * want drie regels hoger staat "Vertrek · Barcelona" en "Aankomst · Miami". */ /** * v5.0.596: de rij onder de prijs. Nachtprijs links, "Enkele reis" rechts. * * Hij staat er ALTIJD, ook leeg. Zou hij alleen komen als er iets in staat, dan is de voet van * een tegel zonder nachtprijs en zonder enkele reis weer een regel korter dan die van de buurman, * en dan staat ook de balk met de vertrekdata erboven niet meer op dezelfde hoogte. Dat is precies * wat we aan het oplossen zijn. * * align-items:baseline en niet center: de nachtprijs is 11,5 pixels en "Enkele reis" 12, en op de * grondlijn uitgelijnd leest dat als één regel in plaats van twee dingen die toevallig naast * elkaar staan. */ .lct-tegel-prijsrij{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; margin-top:1px; /** * VASTE HOOGTE, EN DAAR ZIT EEN METING ONDER. Met align-items:baseline was de rij 15,5 pixels * hoog met alleen een nachtprijs en 20,2 met "Enkele reis" erbij, want daar zit een tekening * van 14 bij 14 in. Dat verschil van 4,7 pixels kwam via de voet weer terug in de balk met de * vertrekdata: gemeten 1 tot 2 pixels verschil tussen twee tegels naast elkaar. Nauwelijks te * zien, maar Danny's vraag was dat ze GELIJK staan, en dan is bijna gelijk niet goed genoeg. * * Met een vaste 20 pixels en de inhoud in het midden is de rij even hoog of hij nu leeg is, * alleen een nachtprijs bevat, of allebei. */ height:20px; } .lct-tegel-prijsrij .lct-tegel-nacht{ margin-top:0; min-width:0; } .lct-tegel-enkel{ display:flex; align-items:center; gap:5px; /** * margin-left:auto en niet alleen space-between op de rij. Bij "Prijs op aanvraag" is er geen * nachtprijs, en dan zet space-between het enige kind gewoon links. Met auto-marge staat * "Enkele reis" rechts, of er nu iets links van hem staat of niet. */ flex:0 0 auto; margin-left:auto; font-size:12px; line-height:1.3; color:var(--lco-ink); white-space:nowrap; overflow:hidden; } .lct-tegel-enkel svg{ flex:0 0 auto; color:var(--lco-primair); } .lct-tegel-enkel span{ min-width:0; font-weight:800; overflow:hidden; text-overflow:ellipsis; } /** * v5.0.594: HET PRIJSVAK HOUDT ZIJN HOOGTE, OOK ALS ER GEEN PRIJS IS. * * Danny's vraag was simpel: de prijzen op dezelfde hoogte. De knoppen stonden al op één lijn, * want de voet hangt met margin-top:auto aan de onderkant van de tegel. De prijs niet, en er * waren twee oorzaken, allebei gemeten in een browser in plaats van ingeschat: * * "Enkele reis" stond tussen de prijs en de knop en staat maar op een deel van de tegels 23px * "Prijs op aanvraag" is één korte regel, een gewone prijs is er twee met de nachtprijs 28px * * De eerste is opgelost door de regel boven de prijs te zetten (zie cruise-card.php). De tweede * hier: het vak is even hoog als een prijs mét nachtprijs, gemeten op 47,2 pixels en afgerond naar 48. Een tegel zonder * prijs heeft dan wat lucht onder de regel in plaats van een knop die omhoog kruipt. * * Het is een MINIMUM en geen vaste hoogte: zou een heel lange prijs ooit over twee regels lopen, * dan mag het vak meegroeien in plaats van de tekst af te knijpen. */ /** * v5.0.596: de hoogte komt nu uit de twee regels zelf, niet uit een minimum op het vak. * * Het vak is de prijsregel (vast 28) plus de rij eronder (vast 20). Daarmee is hij 49 pixels, * of er nu een prijs staat, "Prijs op aanvraag", of een prijs met nachtprijs en enkele reis. Het * minimum blijft eronder staan als vangnet voor het geval een van beide ooit wegvalt. */ .lct-tegel-prijsvak{ min-width:0; min-height:48px; } .lct-tegel-prijs{ min-height:28px; } .lct-tegel-prijs{ display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; color:var(--lco-ink); } .lct-tegel-prijs strong{ font-size:17.5px; font-weight:800; color:var(--lco-primair); letter-spacing:-.02em; } .lct-tegel-prijs small{ font-size:12px; color:var(--lco-mut); font-weight:600; } .lct-tegel-vanaf{ font-size:12px; color:var(--lco-mut); font-weight:600; } .lct-tegel-oud{ font-size:12px; color:var(--lco-mut); text-decoration:line-through; } .lct-tegel-prijs--nb{ color:#9a6a12; font-weight:700; font-size:12.5px; } /** * v5.0.574: bij 25 procent korting of meer kleurt de prijs ROOD in plaats van blauw. * * Blauw is de kleur van de site: hij staat op de knop, in de links en op elke prijs. Precies * daarom valt een blauwe prijs niet op tussen twintig andere blauwe prijzen, ook niet als er * honderden euro's af zijn. * * Rood is de enige plek op de tegel waar die kleur voorkomt, en dat is de bedoeling: wie een rij * langsloopt ziet in één oogopslag waar de scherpe aanbiedingen zitten. Onder de 25 procent * gebeurt er niets, anders is straks elke prijs rood en zegt de kleur weer niets. * * WELK rood, en waarom niet het felste. #C62828 haalt 5,6 op wit; het felle #E53935 dat je overal * ziet haalt 4,2 en zakt daarmee onder de eis van 4,5 voor gewone tekst. Dat zou hier opgaan voor * de vette prijs (die is groot genoeg) maar niet voor het kleine "v.a." ernaast. Eén rood voor * allebei is rustiger dan twee tinten naast elkaar. * * De doorgestreepte oude prijs ernaast blijft grijs; die hoort juist weg te vallen. */ .lct-tegel-prijs--roos strong{ color:#C62828; } .lct-tegel-prijs--roos .lct-tegel-vanaf{ color:#C62828; opacity:.85; } .lct-tegel-nacht{ font-size:12px; color:var(--lco-mut); margin-top:1px; } /** * "Bekijk cruise". * * Een en geen : de hele tegel is al klikbaar via de titel-link die er met ::after * overheen ligt. Een tweede link naar dezelfde plek zou in de tabvolgorde en bij een schermlezer * dubbel staan. Hij is dus versiering die uitnodigt, en de link eronder doet het werk. */ .lct-tegel-knop{ display:flex; align-items:center; justify-content:center; gap:5px; padding:9px 12px; border-radius:10px; background:var(--lco-primair); color:#fff; font-size:12.5px; font-weight:700; line-height:1.2; white-space:nowrap; transition:background .15s; } .lct-tegel:hover .lct-tegel-knop{ background:#0a5a93; } .lct-tegel-knop svg{ flex:0 0 auto; } @media (max-width:520px){ .lct-tegel-body{ padding:12px 13px 13px; } /* Op een telefoon staat er één tegel per rij en valt er niets uit te lijnen, dus geen vaste titelhoogte: dat zou een gat onder elke korte titel geven. */ .lct-tegel-titel{ font-size:16px; min-height:0; -webkit-line-clamp:3; line-clamp:3; } .lct-tegel-havens{ -webkit-line-clamp:3; line-clamp:3; } .lct-tegel-knop{ padding:11px 14px; font-size:13.5px; } } /* ===================================================================== 4. SOORTGELIJKE CRUISES OP DE CRUISEPAGINA Zelfde kaartvorm, zodat een bezoeker die van het overzicht naar een cruise klikt onderaan niet ineens een ander soort tegel ziet. ===================================================================== */ .lcd-simkaart{ background:var(--lco-wit); border:1px solid var(--lco-lijn); border-radius:var(--lco-radius); overflow:hidden; box-shadow:none; } .lcd-simkaart:hover{ border-color:#cfe0ee; box-shadow:0 10px 26px rgba(10,37,64,.10); } .lcd-simkaart-titel{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:17px; line-height:1.2; color:var(--lco-navy); } .lcd-simkaart-meta{ font-size:12px; letter-spacing:1.1px; text-transform:uppercase; font-weight:800; color:var(--lco-mut); } /* ===================================================================== 5, 6 en 8. VAARGEBIEDEN, AANLEGHAVENS EN HET BLOK OVER DANNY --------------------------------------------------------------------- TERUGGEDRAAID IN v5.0.561, EN DIT IS DE LES In 5.0.558 heb ik deze drie blokken naar de kaartvorm van het portaal getrokken: foto op verhouding, tekst eronder, witte kaart. Dat was fout, en wel op dezelfde manier bij alle drie. Ze zijn namelijk niet gebouwd als "foto met tekst eronder". Ze zijn gebouwd als "foto met tekst EROVERHEEN": .lct-destination-card height:240px, img height:100%, een gradient via ::after, en de tekst absoluut op bottom:20px .lct-haven-kaart hetzelfde patroon .lct-danny2 een navy paneel met witte tekst Door de foto op aspect-ratio te zetten werd die ineens 150 pixels hoog in een kaart van 240, bleef er een grijs gat over, en stond de tekst die absoluut gepositioneerd is nog steeds onderaan, boven niets, in een kleur die daar niet leesbaar is. Bij Danny werden de vier cijfers witte tegels met grijze letters op een donkerblauw paneel. Een halve verbouwing is slechter dan geen verbouwing. Deze drie blokken staan nu weer precies zoals ze stonden. Wil je ze alsnog in de kaartvorm, dan moet de HTML mee (de tekst uit de absolute positie halen, de gradient weg, de vaste hoogte weg). Dat is een eigen klus met een eigen controle, geen regel die je er even bij zet. ===================================================================== */ /* ===================================================================== 7. REISVERSLAGEN EN NIEUWS Deze kaarten zijn wél "foto met tekst eronder", dus hier klopt de kaartvorm wel. Nagekeken op de live pagina. ===================================================================== */ .lct-stories-grid{ gap:16px; } .lct-story-card{ background:var(--lco-wit); border:1px solid var(--lco-lijn); border-radius:var(--lco-radius); overflow:hidden; box-shadow:none; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .lct-story-card:hover{ transform:translateY(-2px); border-color:#cfe0ee; box-shadow:0 10px 26px rgba(10,37,64,.10); } .lct-story-card-body{ padding:12px 15px 15px; } .lct-story-card-meta{ font-size:12px; letter-spacing:1.1px; text-transform:uppercase; font-weight:800; color:var(--lco-mut); } .lct-story-card-title{ font-weight:700; font-size:16px; line-height:1.3; color:var(--lco-navy); margin-top:4px; } /* ===================================================================== 9. KLEINE DINGEN DIE OVERAL TERUGKOMEN ===================================================================== */ .lct-section-alle{ color:var(--lco-primair); font-weight:700; } .lct-btn-outline{ border-radius:999px; } .lct-btn-primary{ border-radius:999px; } @media (prefers-reduced-motion:reduce){ .lct-tegel, .lct-story-card{ transition:none; } .lct-tegel:hover, .lct-story-card:hover{ transform:none; } } /* ===================================================================== 10. MINDER LUCHT TUSSEN DE BLOKKEN (v5.0.559) WAT ER AAN DE HAND WAS De ruimte tussen twee secties staat in main.css als clamp(), en die groeit mee met de schermbreedte. Op een smal scherm valt dat niet op, maar op een laptop van 1400 pixels rekent hij als volgt uit: .lct-section padding 84px boven en onder .lct-section + .lct-section daar bovenop 63px .lct-section-header nog eens 40px onder de kop .lct-section--pb-l 100px onderaan Tussen twee blokken zat dus ongeveer 147 pixels leeg, en nog eens 40 tussen een kop en wat eronder staat. Op de beginpagina staan zeven van die blokken onder elkaar; dan scroll je vooral langs niets. WAT ER VERANDERT Alleen de vw-factor en het maximum gaan omlaag, niet het minimum: op een telefoon was het al krap genoeg en daar verandert dus niets. Op 1400 pixels wordt het samen 83 in plaats van 147 pixels, zo'n veertig procent minder, en de blokken blijven duidelijk van elkaar gescheiden. Lucht is geen verspilling; te véél lucht maakt van één pagina een reeks losse pagina's. Dit is het verschil tussen ademruimte en afstand. ===================================================================== */ .lct-section{ padding:clamp(34px,3.4vw,56px) 0; } .lct-section + .lct-section{ padding-top:clamp(26px,2.6vw,42px); } .lct-section-sm{ padding:48px 0 28px; } .lct-section-header{ margin-bottom:clamp(18px,1.8vw,28px); } .lct-section-header p{ margin-top:12px; } .lct-section--pt-s{ padding-top:16px; } .lct-section--pt-m{ padding-top:30px; } .lct-section--pt-l{ padding-top:36px; } .lct-section--pb-l{ padding-bottom:64px; } .lct-section--afsluiter{ padding:0 24px 64px; } .lct-center-blok{ margin-top:26px; } .lct-section-header--ruim{ margin-bottom:26px; } /* Het blok met de vaargebieden en de havens eronder is één onderwerp; daar hoeft geen sectie-afstand tussen. */ .lct-havens-blok{ margin-top:clamp(22px,2.2vw,34px); } /* ===================================================================== v5.0.567: BELLEN IN DE MOBIELE KOP De donkere balk bovenin, waar het telefoonnummer staat, gaat onder de 700 pixels op display:none. Daarmee stond op een telefoon de enige belknop nog in het uitklapmenu: twee tikken, op het apparaat waarmee je nu juist kunt bellen. Deze knop verschijnt precies daar waar die balk verdwijnt, dus nooit allebei tegelijk. ===================================================================== */ .lct-kop-bellen{ display:none; } @media (max-width:700px){ .lct-kop-bellen{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; margin-right:4px; border-radius:999px; background:var(--lct-primary,#0F75BC); color:#fff; text-decoration:none; box-shadow:0 1px 3px rgba(15,117,188,.30); } .lct-kop-bellen:hover, .lct-kop-bellen:focus{ color:#fff; background:var(--lct-primary-dark,#0a5a93); } .lct-kop-bellen:focus-visible{ outline:2px solid #C9A227; outline-offset:2px; } } /* Op een heel smal scherm (iPhone SE, 320 px) moet logo, zoeken, bellen en het hamburgermenu samen passen. Vier pixels eraf is genoeg; kleiner dan 36 px wordt het een doelwit dat je misttikt. */ @media (max-width:360px){ .lct-kop-bellen{ width:36px; height:36px; margin-right:2px; } } /* ===================================================================== v5.0.567: DELEN EN PRINT AAN HET EIND VAN DE CRUISEPAGINA Ze stonden boven de titel. Daar heeft een bezoeker de pagina nog niet gelezen en heeft hij dus ook niets om te delen of mee te nemen. Hier staan ze na de tabbladen, op het moment dat dat wél speelt. Rustig gehouden: dit is geen oproep die met de offerteknop moet concurreren, het is een nette afronding. ===================================================================== */ .lc-slotacties{ padding:8px 24px 44px; } .lc-slotacties-inner{ max-width:1400px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px; padding-top:22px; border-top:1px solid var(--lct-border,#E4ECF3); } .lc-slotacties-tekst{ font-size:14.5px; color:var(--lct-text-muted,#5F7288); } .lc-slotacties-knoppen{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px; } @media (max-width:520px){ .lc-slotacties{ padding:4px 16px 36px; } .lc-slotacties-inner{ flex-direction:column; gap:12px; } .lc-slotacties-tekst{ text-align:center; } } /* Op de cruisepagina staat dit blok IN .lcd-onder, en dat is al een kolom met eigen zijmarges (28 px, 16 op een telefoon) en een gat van 22 px tussen de blokken. Daar hoeft geen tweede laag lucht omheen; anders staat de regel ingesprongen ten opzichte van de nieuwsbrief erboven. */ .lcd-onder .lc-slotacties{ padding:0; } .lcd-onder .lc-slotacties-inner{ padding-top:20px; max-width:none; } @media (max-width:520px){ .lcd-onder .lc-slotacties{ padding:0; } } /* ===================================================================== v5.0.569: "NOG NOOIT GECRUISED?" De derde deur op de beginpagina, voor wie nog niet weet of cruisen iets voor hem is. Staat tussen de zoekbalk en de uitgelichte cruises. Rustig gehouden, met opzet. Dit is een zijdeur voor wie hem nodig heeft, geen derde reclameblok waar iedereen langs moet. Daarom geen foto's, geen schaduwen en geen felle kleur: alleen de derde keuze krijgt nadruk, want daar moet het heen. ===================================================================== */ .lct-nieuw-hier{ padding:clamp(26px,2.6vw,40px) 0 clamp(8px,1vw,14px); } .lct-nieuw-hier-binnen{ background:var(--lct-bg-subtle,#F6FAFD); border:1px solid var(--lct-border,#E4ECF3); border-radius:18px; padding:clamp(20px,2.2vw,30px); display:grid; grid-template-columns:minmax(210px,1fr) 2fr; gap:clamp(18px,2vw,30px); align-items:center; } .lct-nieuw-hier-eyebrow{ margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--lct-primary,#0F75BC); } .lct-nieuw-hier h2{ margin:0 0 8px; font-size:clamp(21px,2.1vw,27px); line-height:1.2; } .lct-nieuw-hier-lead{ margin:0; font-size:14.5px; line-height:1.55; color:var(--lct-text-muted,#5F7288); } .lct-nieuw-hier-deuren{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .lct-nieuw-deur{ display:flex; flex-direction:column; gap:5px; padding:14px 16px; background:#fff; border:1px solid var(--lct-border,#E4ECF3); border-radius:12px; text-decoration:none; color:var(--lct-text,#1A2A3E); transition:border-color .15s, transform .15s; } .lct-nieuw-deur:hover, .lct-nieuw-deur:focus-visible{ border-color:var(--lct-primary,#0F75BC); transform:translateY(-1px); color:var(--lct-text,#1A2A3E); } .lct-nieuw-deur-kop{ font-size:14.5px; font-weight:700; line-height:1.3; } .lct-nieuw-deur-sub{ font-size:12.5px; line-height:1.45; color:var(--lct-text-muted,#5F7288); } /* De derde deur is waar het heen moet, dus die krijgt als enige kleur. */ .lct-nieuw-deur.is-nadruk{ background:var(--lct-primary,#0F75BC); border-color:var(--lct-primary,#0F75BC); color:#fff; } .lct-nieuw-deur.is-nadruk .lct-nieuw-deur-sub{ color:rgba(255,255,255,.82); } .lct-nieuw-deur.is-nadruk:hover, .lct-nieuw-deur.is-nadruk:focus-visible{ background:var(--lct-primary-dark,#0a5a93); border-color:var(--lct-primary-dark,#0a5a93); color:#fff; } /* Onder de 900 px past twee kolommen tekst-naast-deuren niet meer. */ @media (max-width:900px){ .lct-nieuw-hier-binnen{ grid-template-columns:1fr; } .lct-nieuw-hier-deuren{ grid-template-columns:1fr 1fr; } .lct-nieuw-deur.is-nadruk{ grid-column:1 / -1; } } /* Op een telefoon onder elkaar. Gemeten op 375 px is het hele blok 425 pixels hoog, ruim een half scherm. Dat klinkt veel, maar het staat vóór 5.979 pixels aan cruisetegels en het haalt de ingang voor de twijfelaar van y=7.606 naar ongeveer y=1.280. Die ruil is hem waard. */ @media (max-width:560px){ .lct-nieuw-hier{ padding:20px 0 4px; } .lct-nieuw-hier-binnen{ padding:18px 16px; border-radius:14px; } .lct-nieuw-hier-deuren{ grid-template-columns:1fr; gap:10px; } .lct-nieuw-deur{ padding:12px 14px; } } /* ===================================================================== v5.0.570: "NOG NOOIT GECRUISED?" OP DE CRUISEPAGINA Eén regel vlak boven het offerteblok. Bewust geen kaart en geen kleur: hij staat pal boven "Vraag deze cruise persoonlijk aan" en mag daar niet mee concurreren. Wie hem nodig heeft ziet hem, wie hem niet nodig heeft leest eroverheen. ===================================================================== */ .lcd-eerstekeer{ margin:0; padding:13px 16px; background:var(--lct-bg-accent,#EAF6FC); border:1px solid var(--lct-border,#E4ECF3); border-radius:12px; font-size:14px; line-height:1.55; color:var(--lct-text-mid,#3D5773); } .lcd-eerstekeer-label{ font-weight:700; color:var(--lct-navy,#0A2540); } .lcd-eerstekeer a{ color:var(--lct-primary,#0F75BC); font-weight:600; text-decoration:underline; text-underline-offset:2px; } .lcd-eerstekeer a:hover{ color:var(--lct-primary-dark,#0a5a93); } @media (max-width:520px){ .lcd-eerstekeer{ padding:12px 14px; font-size:13.5px; } } /* ===================================================================== HET MEGAMENU: ÉÉN RAAMWERK VOOR ALLE NEGEN PANELEN (v5.0.588) WAT ER MIS WAS. Er waren zes panelen en elk had zijn eigen indeling: --4col, --sm, --news, --contact, --zoek. Het cruisespaneel had foto's, de rest was een rijtje tekstlinks. Zes losse dingen achter één balk. En bij drie van de acht menu-items gebeurde er niets: Beginpagina, Havens en Over mij hadden geen paneel. WAT HET NU IS. Eén raamwerk, negen panelen, dezelfde drie kolommen: hoofd (foto-kaarten), zij (links met icoon), promo (foto met knop), met daaronder één voetregel. Niet elk paneel vult alle drie, maar wat er is staat altijd op dezelfde plek en heeft altijd dezelfde maat. DE SELECTOREN ZIJN MET OPZET (0,2,0) EN NIET (0,1,0). main.css zet display:grid met drie kolommen rechtstreeks op .lct-mega, en mijn nieuwe opbouw heeft daar een wikkel tussen. Gelijke specificiteit zou betekenen dat de volgorde van de bestanden beslist, en die bestanden worden op deze site door een optimalisatieplugin samengevoegd tot gehashte bundels. Op de volgorde daarvan wil ik niet hoeven vertrouwen: dat is precies hoe de tegeltitel op /cruises/ in de verkeerde letter belandde. [data-mega] erbij maakt het een niveau sterker, zonder !important. ===================================================================== */ /** * v5.0.590: het paneel ligt in de TOP LAYER (popover), en dat vraagt drie dingen van de css. * * 1. DE BROWSER VERBERGT EEN GESLOTEN POPOVER ZELF, MAAR ALLEEN IN ZIJN EIGEN STIJLBLAD. En een * stijlblad van de site wint ALTIJD van het stijlblad van de browser, ongeacht specificiteit. * main.css zet display:grid op .lct-mega. Dat is een sitestijl, dus die wint van de * browserregel display:none, en dan staan alle negen panelen altijd open. Daarom zet ik het * verbergen van een gesloten paneel hier zelf neer, als sitestijl. * * 2. DISPLAY IS DAAROM GESPLITST. Zichtbaar is een paneel dat GEEN popover is (de terugval voor * een oudere browser) of een popover die ECHT open staat. Alles daartussen is display:none. * * 3. DE BROWSER GEEFT EEN POPOVER EEN RAND, PADDING EN margin:auto. Die drie worden hier * teruggedraaid. De plaatsing NIET: left/right uit main.css en de top die het script zet * zijn sitestijlen en winnen al van de inset:0 van de browser. Zou ik hier inset:auto zetten, * dan zou ik juist die plaatsing wegvagen en het paneel half buiten beeld schuiven. */ .lct-mega[data-mega][popover]:not(:popover-open){ display:none; } .lct-mega[data-mega]:not([popover]), .lct-mega[data-mega][popover]:popover-open{ display:block; } .lct-mega[data-mega]{ width:min(1240px,calc(100vw - 48px)); background:var(--lco-wit); color:var(--lco-ink); border-radius:18px; overflow:hidden; /* De browserstijlen van een popover terugdraaien. */ border:0; padding:0; margin:0; bottom:auto; } .lct-mega[data-mega] .lct-mega-in{ display:grid; grid-template-columns:1.6fr 1fr .9fr; align-items:start; } /* Panelen met twee kolommen laten de derde gewoon weg; de rest schuift niet. */ .lct-mega[data-mega] .lct-mega-in > *{ padding:22px 22px 18px; min-width:0; } .lct-mega[data-mega] .lct-mega-in > * + *{ border-left:1px solid var(--lco-lijn); } .lct-mega[data-mega] .lct-mega-hoofd--breed{ grid-column:1 / span 2; } .lct-mega[data-mega] .lct-mega-zij--breed{ grid-column:2 / span 2; } /* De promo eerst (paneel Over mij): dan staat de foto links en leest het als een profiel. */ .lct-mega[data-mega] .lct-mega-promo--eerst{ order:-1; border-left:0; } .lct-mega[data-mega] h4{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--lco-primair); margin:0 0 12px; } /* --- De kaart met foto: overal dezelfde vorm --- */ .lct-mk-rij{ display:grid; gap:10px; } .lct-mk-rij--3{ grid-template-columns:repeat(3,1fr); } .lct-mk-rij--2{ grid-template-columns:repeat(2,1fr); } .lct-mk-rij--1{ grid-template-columns:1fr; gap:4px; } .lct-mk{ display:flex; flex-direction:column; gap:7px; min-width:0; text-decoration:none; color:inherit; padding:7px; margin:-7px; border-radius:12px; transition:background .15s ease; } .lct-mk:hover{ background:var(--lco-vel); } .lct-mk-beeld{ display:block; aspect-ratio:16 / 10; border-radius:10px; overflow:hidden; background:linear-gradient(140deg,#0F4C81,#46B5DD); } .lct-mk-beeld img{ width:100%; height:100%; object-fit:cover; display:block; } /* Geen foto is geen gat: een gekleurd vlak met een icoon houdt de rij heel. */ .lct-mk-geen{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#fff; opacity:.85; } .lct-mk-tekst{ display:block; min-width:0; } .lct-mk-tekst b{ display:block; font-size:13.5px; font-weight:700; line-height:1.3; color:var(--lco-navy); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; } .lct-mk-tekst small{ display:block; margin-top:2px; font-size:12px; color:var(--lco-mut); } /* De actiekaart: logo in plaats van foto, en de korting rechtsonder. */ /** * De kortingsbadge staat RECHTSBOVEN en niet in de regel. * * In de eerste opzet stond hij achter de tekst, en dan houdt de titel in een kolom van 275 pixels * nog geen 190 pixels over: "Vroegboekkorting zomer 2027" werd afgekapt tot "Vroegboekkort". * Uit de tekststroom halen geeft de titel de volle breedte terug, en de korting valt rechtsboven * juist meer op. */ .lct-mk--logo{ position:relative; flex-direction:row; align-items:center; gap:10px; padding-right:52px; } .lct-mk-beeld--logo{ flex:0 0 64px; aspect-ratio:auto; height:40px; width:64px; background:var(--lco-wit); box-shadow:inset 0 0 0 1px var(--lco-lijn); display:flex; align-items:center; justify-content:center; padding:4px; } .lct-mk-beeld--logo img{ object-fit:contain; } .lct-mk--logo .lct-mk-geen{ color:var(--lco-primair); } /* v5.0.758: paneel Familie, logo met de leeftijden ernaast. Geen kortingsbadge, dus geen ruimte rechts. */ .lct-mk--fam{ padding-right:7px; } .lct-mk--fam .lct-mk-beeld--logo{ flex-basis:56px; width:56px; height:36px; } .lct-mk-rij--fam{ gap:12px 14px; } .lct-mega[data-mega] .lct-mega-h4-tweede{ margin-top:18px; } .lct-mk-korting{ position:absolute; top:7px; right:7px; background:var(--lco-goud); color:#3a2a00; font-size:12px; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap; } /* --- De linklijst met icoon --- */ .lct-mega[data-mega] .lct-mega-links{ display:grid; gap:1px; } .lct-mega[data-mega] .lct-mega-links--2{ grid-template-columns:1fr 1fr; gap:1px 10px; } .lct-mega[data-mega] .lct-mega-links a{ display:flex; align-items:center; gap:9px; min-width:0; flex-wrap:nowrap; /* v5.0.757: lange regels hielden het icoon los boven de tekst */ text-decoration:none; color:var(--lco-ink); font-size:13.5px; font-weight:600; line-height:1.35; padding:8px 9px; border-radius:9px; transition:background .15s ease; } .lct-mega[data-mega] .lct-mega-links a:hover{ background:var(--lco-vel); color:var(--lco-primair); } .lct-mega[data-mega] .lct-mega-links a > svg{ flex:0 0 auto; } .lct-mega[data-mega] .lct-mega-links svg{ flex:0 0 auto; color:var(--lco-primair); } .lct-mega[data-mega] .lct-mega-links small{ margin-left:auto; font-size:12px; font-weight:700; color:var(--lco-mut); } /* De grote variant (paneel Contact): de toelichting onder het woord in plaats van erachter. */ .lct-mega[data-mega] .lct-mega-links--groot a{ align-items:flex-start; padding:10px 9px; font-size:14.5px; font-weight:700; } .lct-mega[data-mega] .lct-mega-links--groot small{ margin:2px 0 0; display:block; width:100%; font-weight:600; } .lct-mega[data-mega] .lct-mega-links--groot a > svg{ margin-top:2px; } /* --- Het logoraster --- */ .lct-mega[data-mega] .lct-mega-logos{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .lct-mega[data-mega] .lct-mega-logos a{ display:flex; align-items:center; justify-content:center; height:44px; padding:6px; border-radius:10px; background:var(--lco-wit); box-shadow:inset 0 0 0 1px var(--lco-lijn); transition:box-shadow .15s ease; } .lct-mega[data-mega] .lct-mega-logos a:hover{ box-shadow:inset 0 0 0 1px var(--lco-primair); } .lct-mega[data-mega] .lct-mega-logos img{ max-width:100%; max-height:100%; object-fit:contain; } .lct-mega[data-mega] .lct-mega-logos span{ font-size:12px; font-weight:700; color:var(--lco-mut); text-align:center; } /* --- Het uitgelichte blok met foto --- */ /** * De promo vult de hele kolom, en dat is geen smaak maar een reparatie. * * Met alleen een min-hoogte bleef er onder de foto een lege witte strook staan zodra de kolom * ernaast hoger werd, en dan ziet het blok eruit alsof er iets niet geladen is. height:100% op * de link plus een kolom die zich uitrekt laat de foto meegroeien. */ .lct-mega[data-mega] .lct-mega-promo{ align-self:stretch; display:flex; } .lct-mega[data-mega] .lct-mega-promo a{ display:flex; flex-direction:column; justify-content:flex-end; position:relative; border-radius:12px; overflow:hidden; text-decoration:none; color:#fff; min-height:190px; width:100%; background:linear-gradient(140deg,#0A2540,#0F75BC); } /** * v5.0.591: de uitsnede begint bovenaan, niet in het midden. * * Het promo-vak is hoog en smal en de foto is breder dan hoog, dus object-fit:cover snijdt er * boven en onder wat af. Standaard doet hij dat vanuit het MIDDEN, en op een staande foto van * een mens is het midden de buik. In het paneel Over mij stond Danny zonder hoofd in beeld. * * 22% houdt het gezicht binnen de uitsnede, ook als het vak nog hoger wordt. */ .lct-mega[data-mega] .lct-mega-promo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; } /* Het verloop maakt de tekst leesbaar op elke foto, ook op een lucht. */ .lct-mega-promo-tekst{ position:relative; display:block; padding:14px; background:linear-gradient(to top,rgba(4,18,33,.86),rgba(4,18,33,0)); } .lct-mega-promo-tekst em{ display:block; font-style:normal; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.85; } .lct-mega-promo-tekst b{ display:block; font-size:14.5px; font-weight:800; line-height:1.3; margin-top:3px; } .lct-mega-promo-tekst i{ display:block; font-style:normal; font-size:12.5px; font-weight:700; margin-top:3px; opacity:.9; } /* --- De voetregel --- */ .lct-mega[data-mega] .lct-mega-voet{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:12px 22px; background:var(--lco-vel); border-top:1px solid var(--lco-lijn); font-size:12.5px; color:var(--lco-mut); } .lct-mega[data-mega] .lct-mega-voet a{ font-weight:800; color:var(--lco-primair); text-decoration:none; white-space:nowrap; } .lct-mega[data-mega] .lct-mega-voet a:hover{ text-decoration:underline; } .lct-mega[data-mega] .lct-mega-leeg{ color:var(--lco-mut); font-size:13px; margin:0; } .lct-mega[data-mega] .lct-mega-rev{ margin-top:12px; padding:11px 13px; background:var(--lco-vel); border-left:3px solid var(--lco-goud); border-radius:0 10px 10px 0; font-size:13px; line-height:1.5; color:var(--lco-ink); } .lct-mega[data-mega] .lct-mega-rev small{ display:block; margin-top:5px; color:var(--lco-mut); font-size:12px; } .lct-mega[data-mega] .lct-mega-reactie{ display:grid; gap:6px; font-size:13px; } .lct-mega[data-mega] .lct-mega-reactie b{ color:var(--lco-navy); } .lct-mega[data-mega] .lct-mega-reactie-di{ color:var(--lco-mut); font-size:12px; } .lct-mega[data-mega] .lct-mega-uren{ display:grid; gap:3px; margin-top:12px; font-size:12.5px; color:var(--lco-mut); } .lct-mega[data-mega] .lct-mega-uren i{ display:inline-block; width:74px; font-style:normal; font-weight:700; color:var(--lco-ink); } /** * Onder de 1100 pixels twee kolommen, en de promo eruit. * * Het megamenu is een muisding: op een telefoon staat het hamburgermenu. * Maar een kleine laptop bestaat wel, en daar passen drie kolommen met een * fotoblok van 190 hoog niet meer zonder dat de kaarten onleesbaar worden. * Dan liever twee goede kolommen dan drie slechte. */ @media (max-width:1100px){ .lct-mega[data-mega] .lct-mega-in{ grid-template-columns:1.4fr 1fr; } .lct-mega[data-mega] .lct-mega-promo{ display:none; } .lct-mega[data-mega] .lct-mega-hoofd--breed, .lct-mega[data-mega] .lct-mega-zij--breed{ grid-column:auto; } .lct-mk-rij--3{ grid-template-columns:repeat(2,1fr); } } /* ===================================================================== DE TEGEL MEET ZICHZELF: CONTAINER QUERIES (v5.0.589) HET INZICHT DAT DIT MOGELIJK MAAKT Bij een raster met auto-fill is de tegel het BREEDST op een telefoon (daar is er één van 350 tot 390) en het SMALST op een groot scherm (daar passen er vijf van 258 naast elkaar). Dat is precies omgekeerd aan wat een gewone media query aanneemt, en daarom viel er met schermbreedte niets zinnigs over de tegel te zeggen: hetzelfde getal betekent op de beginpagina iets anders dan in de resultatenkolom van /cruises/. Een container query meet de tegel zelf. Daarmee kan de inhoud zich aanpassen aan de ruimte die er ECHT is, waar hij ook staat. WAT ER AL WAS, EN WAAROM DAT NIETS MEER DEED In index.css staat al een container query, maar die richt zich op .lc-cruise-card, de kaart van vóór 5.0.562. Die staat nergens meer op de site, dus dat blok is stille dode code geworden. De techniek was er dus al; hij wees alleen naar een element dat niet meer bestaat. ===================================================================== */ .lct-tegel{ container-type:inline-size; container-name:tegel; } /** * Standaard: één datum in beeld, met de teller die daarbij hoort. * * Dit is de veilige vorm, want hij past in de smalste tegel die het raster * kan maken (240 pixels). Alles wat breder is krijgt hieronder meer. */ .lct-tegel-datum--extra, .lct-tegel-datameer--twee{ display:none; } @container tegel (min-width: 320px){ /** * Vanaf 320 past de tweede datum erbij. * * Gemeten: label plus twee data plus een teller van twee cijfers vraagt 202 * pixels binnenwerk, en dat heeft een tegel van 320 (met 16 padding aan * weerszijden en 16 in het blokje) ruim. De grens staat op 320 en niet op * 300, zodat ook een datum MET jaartal ("21 feb 2027") er nog bij past. */ .lct-tegel-datum--extra{ display:inline; } .lct-tegel-datameer--een{ display:none; } .lct-tegel-datameer--twee{ display:inline; } } @container tegel (min-width: 340px){ /* Ruimte zat: de aanleghavens mogen een regel langer, en de titel ook. */ .lct-tegel-havenslijst{ -webkit-line-clamp:3; line-clamp:3; } .lct-tegel-titel{ font-size:16px; } } /* ===================================================================== CONTENT-VISIBILITY: WAT NIET IN BEELD IS, NIET TEKENEN (v5.0.589) /cruises/ is ruim 9.000 pixels hoog met 24 tegels en 148 afbeeldingen; een cruisepagina is 17.000. De browser rekent en tekent dat nu allemaal, ook het deel dat twintig schermen lager staat. content-visibility:auto laat hem dat werk uitstellen tot een blok in de buurt van het beeld komt. De afbeeldingen deden dat al (loading=lazy), maar de OPMAAK niet. contain-intrinsic-size IS HIER GEEN DETAIL. Zonder die geschatte hoogte denkt de browser dat een overgeslagen blok nul hoog is, en dan springt de schuifbalk en verspringt de pagina onder je duim zodra je scrollt. De waarde is een schatting van een tegelrij: hoogte van een tegel maal het aantal rijen dat er ongeveer past. ===================================================================== */ .lct-tegelrij, .lc-card-grid.lct-tegelrij{ content-visibility:auto; contain-intrinsic-size:auto 640px; } /** * Uit zodra er binnenin iets openstaat. * * Een uitgeklapte databalk verandert de hoogte van de rij, en een blok dat * tegelijk overgeslagen mag worden en van hoogte verandert is precies waar * de schuifbalk van gaat springen. :has() maakt dat in één regel zichtbaar * voor de css, zonder javascript. */ .lct-tegelrij:has(.lct-tegel-datavak[open]){ content-visibility:visible; } /* ===================================================================== v5.0.595: DE EMOJI'S UIT DE OPMAAK, HET EIGEN ICOONSET ERIN WAT ER STOND. De site heeft een eigen set tekeningen (lct_icon, 56 stuks), en die wordt op de tegel, in het megamenu en in het filter overal gebruikt. Maar op een paar plekken stond in plaats daarvan een emoji in de opmaak: een vuurtje bij "Lopende acties", een cadeautje bij "Inclusief pakketten", een stoomboot als er geen foto is, een ster bij de reviews. Die tekenen per apparaat anders (Apple, Android en Windows hebben elk hun eigen plaatjes), ze pakken de huiskleur niet op, en naast een tekening uit de eigen set zie je meteen dat het iets anders is. DE PLEKKEN DIE NU OM ZIJN: acties (vier), rederij (vier), havenpagina (twee), blogarchief (twee). Niet om: een emoji in een