/* fx.css · gedeelde effect-kit voor /stijlen/ · hoort bij fx.js Eigen code, nul externe verzoeken. Alles wat beweegt staat achter (prefers-reduced-motion: no-preference) en achter html:not(.rm); fx.js zet .rm op bij ?rm=1 of bij een systeemvoorkeur. */ /* --- 1. zelf-gehoste fonts (relatief pad, zelfde origin) --- */ /* de variabele Archivo krijgt geen local(): een lokaal geinstalleerde Archivo is bijna altijd een statische snit en dan valt "wght" 500-900 stil */ @font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-display:swap; src:url("fonts/archivo-400-900.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:local("IBM Plex Mono"),url("fonts/ibm-plex-mono-400.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap; src:local("IBM Plex Mono Medium"),url("fonts/ibm-plex-mono-500.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap; src:local("IBM Plex Mono SemiBold"),url("fonts/ibm-plex-mono-600.woff2") format("woff2")} /* --- 2. tokens (fx-voorvoegsel, botst nooit met de pagina) --- */ :root{ --fx-doek:#F6F4F0;--fx-papier:#FFFFFF;--fx-inkt:#131313;--fx-nacht:#0F0F0E; /* --fx-grijs en --fx-groen zijn gemeten op doek (#F6F4F0) en papier (#FFFFFF): beide boven 4,5:1, ook met de korrel erover. Pagina's erven ze via --grijs/--groen. */ --fx-doek-op-inkt:#EFECE6;--fx-grijs:#615D54;--fx-grijs-op-inkt:#8E897D; --fx-hair:#DFDBD2;--fx-hair-op-inkt:#2B2A27; --fx-groen:#0F6B41;--fx-groen-fel:#23A96A;--fx-geel:#FFD52D; --fx-archivo:"Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; --fx-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --fx-ease:cubic-bezier(.2,.65,.2,1);--fx-uit:cubic-bezier(.16,1,.3,1); } /* --- 3. merkteken en woordmerk --- */ .fx-logo{position:relative;display:inline-block;line-height:0;vertical-align:middle} .fx-logo canvas{display:block;background:transparent} .fx-logo .fx-logo-fallback{display:block} .fx-logo-actief>.fx-logo-fallback{display:none} /* canvas draait: SVG weg */ .fx-merk-wrap{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;color:inherit; view-transition-name:merk} .fx-merk{font-family:var(--fx-archivo);font-weight:700;font-variation-settings:"wght" 700; letter-spacing:.02em;line-height:1;text-transform:uppercase;text-decoration:none; color:inherit;display:inline-block} .fx-extrude{text-shadow:var(--fx-extrude,none)} /* fx.js schrijft de lagen */ /* --- 4. korrel (statisch) --- */ .fx-grain{position:fixed;inset:0;z-index:9998;pointer-events:none; opacity:var(--fx-grain-opacity,.06);mix-blend-mode:overlay; background-repeat:repeat;background-size:180px 180px; background-image:url("data:image/svg+xml;utf8,")} /* --- 5. canvassen --- */ .fx-aurora-vlak{position:relative;overflow:hidden} .fx-aurora-canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .fx-wire{display:block;width:100%;height:100%} /* --- 5b. ingebed (html.embed): de pagina hangt als poster in een kind-frame --- Er komt dan geen WebGL- en geen 2D-context bij: het beeld staat stil en komt uit CSS. fx.js zet .embed op bij ?embed=1; de inline oneliner in de doet dat al voor de eerste verf. */ html.embed .fx-aurora-canvas{display:none} /* fx.js schrijft de echte kleuren als inline background op dit vlak; deze regel is de vangnet-plaat voor het geval er geen script draait */ html.embed .fx-aurora-vlak{background-image:var(--fx-aurora-stil, linear-gradient(180deg,rgba(19,19,19,.10) 0%,rgba(19,19,19,.03) 55%,rgba(19,19,19,0) 100%))} /* draadmodel: dezelfde bol, maar als stilstaande ringen in de eigen lijnkleur */ .fx-wire-stil{background-repeat:no-repeat;background-position:50% 50%; background-size:72% 72%,100% 100%; background-image: repeating-radial-gradient(circle at 50% 50%, rgba(var(--fx-wire-kleur,255,213,45),.30) 0 1px,rgba(0,0,0,0) 1px 15px), radial-gradient(circle at 50% 50%, rgba(var(--fx-wire-kleur,255,213,45),.10) 0%,rgba(0,0,0,0) 60%)} /* de naam merk hoort bij de ouderpagina: een ingebed kind claimt hem nooit, anders vechten twee documenten om dezelfde view-transition-naam */ html.embed .fx-merk-wrap{view-transition-name:none} /* --- 6. tilt met conic-sheen --- */ .fx-tilt{transform-style:preserve-3d;transition:transform .5s var(--fx-uit); transform:perspective(var(--fx-persp,820px)) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) translateZ(0)} .fx-tilt.fx-tilt-bezig{transition:transform .09s linear;will-change:transform} .fx-tilt-glans{position:relative;isolation:isolate} .fx-tilt-glans::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:var(--fx-glans,0);transition:opacity .35s var(--fx-ease);mix-blend-mode:soft-light; background:conic-gradient(from 205deg at var(--px,50%) var(--py,50%), rgba(255,255,255,0) 0deg,rgba(255,255,255,.26) 42deg,rgba(255,255,255,0) 120deg, rgba(255,255,255,0) 240deg,rgba(255,255,255,.13) 300deg,rgba(255,255,255,0) 360deg)} /* --- 7. magneet en cursor-spot --- */ .fx-magneet{will-change:transform} .fx-spot{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;opacity:0; width:var(--fx-spot-maat,320px);height:var(--fx-spot-maat,320px);border-radius:50%; transform:translate3d(-50%,-50%,0);transition:opacity .5s var(--fx-ease); mix-blend-mode:var(--fx-spot-blend,overlay); background:radial-gradient(circle,var(--fx-spot-kleur,rgba(255,255,255,.16)) 0%,rgba(255,255,255,0) 66%)} .fx-spot.aan{opacity:1} /* --- 8. reveals --- */ @keyframes fx-onthul{ from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(5px)} to{opacity:1;transform:none;filter:blur(0)} } /* Het verbergen hangt aan .fx, de klasse die fx.js zelf zet: draait het script niet (of wordt het geblokkeerd), dan blijft alle inhoud gewoon staan. */ @media (prefers-reduced-motion: no-preference){ html.fx:not(.rm) .fx-reveal{opacity:0;transform:translateY(22px) scale(.985);filter:blur(5px); transition:opacity .75s var(--fx-uit),transform .75s var(--fx-uit),filter .75s var(--fx-uit); transition-delay:var(--fx-vertraag,0ms)} html.fx:not(.rm) .fx-reveal.aan{opacity:1;transform:none;filter:blur(0)} /* waar de browser view()-timelines kent doet de CSS het werk zelf */ html.fx.fx-tl:not(.rm) .fx-reveal{opacity:1;transform:none;filter:none;transition:none; animation:fx-onthul linear both;animation-timeline:view();animation-range:entry 0% cover 38%} } /* --- 9. flip-cijfers --- */ .fx-flip{display:inline-flex;gap:.06em;line-height:1;font-family:var(--fx-mono); font-variant-numeric:tabular-nums} .fx-flip .fx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fx-cijfer{position:relative;display:inline-block;width:.62em;height:1em;perspective:190px;overflow:hidden} .fx-cijfer.fx-vast{width:.34em} .fx-cijfer::after{content:"";position:absolute;left:0;right:0;top:calc(.5em - .5px);height:1px; background:currentColor;opacity:.16;z-index:5;pointer-events:none} /* scharnier */ .fx-h{position:absolute;left:0;right:0;height:.5em;overflow:hidden; backface-visibility:hidden;-webkit-backface-visibility:hidden} .fx-h i{position:absolute;left:0;right:0;display:block;height:1em;line-height:1; text-align:center;font-style:normal} .fx-boven{top:0}.fx-boven i{top:0} .fx-onder{top:.5em}.fx-onder i{top:-.5em} @keyframes fx-klap-uit{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}} @keyframes fx-klap-in{from{transform:rotateX(90deg)}to{transform:rotateX(0)}} @media (prefers-reduced-motion: no-preference){ html:not(.rm) .fx-uit{transform-origin:bottom;z-index:3;animation:fx-klap-uit .24s ease-in forwards} html:not(.rm) .fx-in{transform-origin:top;z-index:4;animation:fx-klap-in .24s .23s ease-out both} } /* --- 10. marquee --- */ .fx-marquee{overflow:hidden} .fx-marquee-track{display:flex;width:max-content;will-change:transform; transform:skewX(var(--fx-marquee-skew,0deg))} @media (prefers-reduced-motion: no-preference){ html:not(.rm) .fx-marquee-track{animation:fx-schuif 26s linear infinite} } @keyframes fx-schuif{to{transform:translateX(-50%) skewX(var(--fx-marquee-skew,0deg))}} /* --- 11. view transitions --- */ @view-transition{navigation:auto} .stijlwissel{view-transition-name:stijlwissel} @media (prefers-reduced-motion: reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:1ms !important} } html.rm::view-transition-group(*),html.rm::view-transition-old(*),html.rm::view-transition-new(*){ animation-duration:1ms !important} /* --- 12. stilstand --- */ @media (prefers-reduced-motion: reduce){ .fx-tilt{transform:none !important} .fx-tilt-glans::after{opacity:0 !important} .fx-marquee-track{animation:none !important;transform:none !important} .fx-spot{display:none} } html.rm .fx-tilt{transform:none !important} html.rm .fx-tilt-glans::after{opacity:0 !important} html.rm .fx-marquee-track{animation:none !important;transform:none !important} html.rm .fx-spot{display:none}