/* * Gedeelde stijl voor de startpagina (`/`) en de inlogschermen van beide * panelen. Bewust één bestand: die schermen horen er hetzelfde uit te zien, * en dan moeten ze ook uit dezelfde bron komen. * * Beide panelen registreren dit als paneel-asset; `filament:assets` zet het * publiek (/css/app/qontrol-auth.css) en de startpagina laadt datzelfde * bestand via FilamentAsset::getStyleHref() (zie HomeController). De * productieserver bouwt geen frontend-assets, dus dit is gewone CSS zonder * Tailwind — net als admin-compact.css. * * Let op: paneel-assets laden vóór het kernthema van Filament (zie de * volgorde van de -tags in de ). Een overschrijving heeft daarom * een samengestelde selector nodig — `.fi-simple-layout .fi-simple-main` in * plaats van `.fi-simple-main` — anders wint het kernthema bij gelijke * specificiteit. * * Licht/donker: de panelen zetten `.dark` op ; de startpagina doet * hetzelfde met een scriptje dat dezelfde localStorage-sleutel leest, zodat * één themakeuze voor alles geldt. */ :root { --qh-accent: #ffa900; /* Het merkoranje is te licht voor tekst op een lichte achtergrond (contrast < 4.5:1). Voor tekst dus een donkerder tint van dezelfde kleur — dezelfde afweging die Filament maakt voor links in het lichte thema. */ --qh-accent-text: #a06a00; /* Zelfde grijstinten als Filament (zinc), zodat de startpagina en de panelen naadloos op elkaar aansluiten. */ --qh-page: #fafafa; --qh-surface: #ffffff; --qh-border: #e4e4e7; --qh-text: #09090b; --qh-muted: #71717a; --qh-shadow: 0 1px 2px rgb(0 0 0 / 0.05); --qh-shadow-hover: 0 12px 24px -12px rgb(0 0 0 / 0.25); /* Zachte merkgloed boven de inhoud; blijft ver onder de contrastdrempel zodat tekst leesbaar blijft. */ --qh-glow: radial-gradient( 60rem 32rem at 50% -8rem, rgb(255 169 0 / 0.12), transparent 70% ); } .dark { /* Op een donkere achtergrond haalt het merkoranje zelf ruim voldoende contrast. */ --qh-accent-text: #ffa900; --qh-page: #09090b; --qh-surface: #18181b; --qh-border: #3f3f46; --qh-text: #ffffff; --qh-muted: #a1a1aa; --qh-shadow: none; --qh-shadow-hover: 0 12px 24px -12px rgb(0 0 0 / 0.6); } /* -------------------------------------------------------------------------- Woordmerk Beuningen IT (resources/views/auth/brand.blade.php) De accolade en "euningen IT" in de tekstkleur, de B en de tagline in de accentkleur — net als op het briefpapier (resources/images/letterhead.jpg). De blokgrootte staat op de wrapper en de twee regels schalen daar in em aan mee, zodat de verhouding van het logo altijd klopt. -------------------------------------------------------------------------- */ .qh-brand-block { font-size: clamp(2rem, 1.25rem + 3.2vw, 3.5rem); text-align: center; line-height: 1.1; } .qh-brand { margin: 0; font-size: 1em; font-weight: 800; letter-spacing: -0.02em; color: var(--qh-text); } .qh-brand-mark { color: var(--qh-accent-text); } .qh-tagline { margin: 0.14em 0 0; font-size: 0.32em; font-weight: 600; letter-spacing: 0.28em; /* De laatste letter krijgt de spatiëring ook nog achter zich; die compenseren we zodat de regel optisch gecentreerd blijft. */ text-indent: 0.28em; text-transform: uppercase; color: var(--qh-accent-text); } /* -------------------------------------------------------------------------- Startpagina (resources/views/home.blade.php) -------------------------------------------------------------------------- */ .qh-body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 2.5rem 1.25rem; background-color: var(--qh-page); background-image: var(--qh-glow); background-repeat: no-repeat; color: var(--qh-text); font-family: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; } .qh-body *, .qh-body *::before, .qh-body *::after { box-sizing: border-box; } .qh-shell { width: 100%; max-width: 52rem; text-align: center; } .qh-title { margin: 3rem 0 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; } .qh-lead { margin: 0.625rem auto 0; max-width: 34rem; color: var(--qh-muted); } .qh-choices { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; } .qh-choice { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1.5rem 1.5rem; border: 1px solid var(--qh-border); border-radius: 1rem; background-color: var(--qh-surface); box-shadow: var(--qh-shadow); color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .qh-choice:hover { border-color: var(--qh-accent); box-shadow: var(--qh-shadow-hover); transform: translateY(-2px); } .qh-choice:focus-visible { outline: 2px solid var(--qh-accent); outline-offset: 3px; } .qh-choice-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 0.25rem; border-radius: 0.875rem; background-color: rgb(255 169 0 / 0.12); color: var(--qh-accent); } .qh-choice-icon svg { width: 1.75rem; height: 1.75rem; } .qh-choice-title { font-size: 1.125rem; font-weight: 600; } .qh-choice-description { font-size: 0.875rem; color: var(--qh-muted); text-wrap: balance; } .qh-choice-cta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--qh-accent-text); } .qh-choice-cta svg { width: 1rem; height: 1rem; transition: transform 0.15s ease; } .qh-choice:hover .qh-choice-cta svg { transform: translateX(0.25rem); } .qh-footer { margin: 2rem auto 0; font-size: 0.8125rem; color: var(--qh-muted); } @media (prefers-reduced-motion: reduce) { .qh-choice, .qh-choice-cta svg { transition: none; } .qh-choice:hover, .qh-choice:hover .qh-choice-cta svg { transform: none; } } /* -------------------------------------------------------------------------- Inlogschermen: Filaments "simple pages" (inloggen, wachtwoord vergeten, wachtwoord opnieuw instellen) in dezelfde vorm als de startpagina — woordmerk boven een gecentreerde kaart, met dezelfde achtergrond, randen en typografie. -------------------------------------------------------------------------- */ .fi-body .fi-simple-layout { /* Woordmerk, kaart en kruisverwijzing vormen samen één gecentreerde stapel in plaats van een kaart die de hoogte opvult. `safe` voorkomt dat de bovenkant wegvalt als de inhoud hoger is dan het scherm. */ justify-content: center; justify-content: safe center; gap: 2rem; /* Zelfde marge rondom als de startpagina; zonder de zijkant plakt de kaart op smalle schermen tegen de schermrand. */ padding: 2.5rem 1.25rem; background-color: var(--qh-page); background-image: var(--qh-glow); background-repeat: no-repeat; } .fi-body .fi-simple-layout .fi-simple-main-ctn { flex-grow: 0; } .fi-simple-layout .fi-simple-main { /* De onderlinge afstanden komen van de `gap` hierboven. */ margin-block: 0; border: 1px solid var(--qh-border); border-radius: 1rem; background-color: var(--qh-surface); /* Overschrijft ook de ring van Filament (die zit in dezelfde box-shadow), zodat er niet twee randen over elkaar liggen. */ box-shadow: var(--qh-shadow); } /* De paginakop noemt zelf al waar je bent ("Qontrol", "Klantportaal") en het woordmerk staat erboven; het kleine merk-logo zou dat dubbel tonen. */ .fi-simple-layout .fi-simple-header .fi-logo { display: none; } .fi-simple-layout .fi-simple-header-heading { font-size: 1.875rem; letter-spacing: -0.02em; color: var(--qh-text); } .fi-simple-layout .fi-simple-header-subheading { margin-top: 0.625rem; font-size: 1rem; color: var(--qh-muted); } /* Kruisverwijzing onder de kaart (auth/panel-switch-link), zelfde vorm als de voetregel op de startpagina. */ .qh-auth-footer { margin: 0; max-width: 34rem; text-align: center; font-size: 0.8125rem; color: var(--qh-muted); }