/* Theme Name: ICCLR Theme URI: https://icclr.nl Author: Cleverstone Description: Custom theme voor het Islamitisch Cultureel Centrum Leidsche Rijn — gebouwd naar het ICCLR Website Redesign v3 (Claude Design). Server-rendered, flat design, licht/donker thema, gebedstijden via Mawaqit, ACF Free voor pagina-velden. Version: 1.4.0 Requires PHP: 8.0 Text Domain: icclr */ /* ============================================================ 1. Design tokens (uit het ICCLR design system + v3-overrides) ============================================================ */ :root{ /* Green scale */ --green-950:#092220;--green-900:#0B2E2B;--green-800:#104039;--green-700:#14524B;--green-600:#1A6B61;--green-500:#248579;--green-200:#BFDCD7;--green-100:#E3EFED;--green-50:#EEF4F3; --gold-600:#A8822C;--gold-500:#C49A3C;--gold-200:#EAD9AC;--gold-100:#F4EAD3;--gold-50:#FBF6E9; --orange-700:#B85A12;--orange-600:#E9701E;--orange-500:#F0842F;--orange-200:#FBD8B8;--orange-100:#FCE7D3;--orange-50:#FEF4EB; --ink:#1A1C1B;--gray-700:#444B49;--gray-500:#6B7370;--gray-400:#9AA29F;--gray-200:#D8DEDC;--gray-100:#EEF1F0;--gray-50:#FAFBFA;--white:#FFFFFF; /* Semantiek — v3 gebruikt oranje als brand op de site */ --brand-primary:#E9701E;--brand-primary-hover:#C96014;--brand-primary-active:#A94F12;--brand-accent:var(--gold-500); --text-heading:var(--green-900);--text-body:var(--ink);--text-muted:var(--gray-500);--text-on-brand:#fff; --text-link:#BC5310;--text-link-hover:#A94F12; --surface-page:#FFFFFF;--surface-alt:#F4F4F2;--surface-card:#FFFFFF;--surface-brand:var(--green-900);--surface-accent-tint:var(--gold-50); --border-default:#E4E4E1;--border-strong:var(--gray-400);--focus-ring:#E9701E; --status-success:#2E7D4F;--status-success-bg:#E7F2EB;--status-error:#B3362B;--status-error-bg:#F9E9E7; /* Typografie — Arabische tekens vallen via unicode-range automatisch naar het Arabische font, Latijnse blijven bij Inter. */ --font-sans:"Inter","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif; --font-arabic:"Noto Kufi Arabic","Geeza Pro","Segoe UI","Tahoma",sans-serif; --leading-body:1.65;--tracking-heading:-0.01em;--tracking-caps:0.08em; /* Ruimte / vormen */ --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px; /* Flat design: geen schaduwen — vlakken worden gescheiden door kleur en 1px randen. */ --dur-fast:120ms;--dur-med:220ms;--ease-out:cubic-bezier(.25,.6,.35,1); } /* Donker thema — overgenomen uit het v3-design, gekeyd op */ html[data-theme="donker"]{ --surface-page:#0A201E;--surface-alt:#0D2A27;--surface-card:#11332F;--surface-brand:#061715; --text-heading:#F1F7F6;--text-body:#D9E5E3;--text-muted:#93A8A4; --text-link:#F2A56B;--text-link-hover:#F8C69B; --border-default:rgba(255,255,255,.14);--border-strong:rgba(255,255,255,.32); --brand-primary:#E9701E;--brand-primary-hover:#C96014;--brand-primary-active:#A94F12; --focus-ring:#F2A56B;--surface-accent-tint:#241D0C; } /* ============================================================ 2. Basis ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:16px;line-height:var(--leading-body);transition:background-color .22s ease,color .22s ease} img{max-width:100%;height:auto} a{color:var(--text-link)} a:hover{color:var(--text-link-hover)} h1,h2,h3,h4{color:var(--text-heading);letter-spacing:var(--tracking-heading)} /* Sierwoorden in Kufi. Let op: níét op [dir="rtl"] selecteren — dat raakt en zet dan de complete Arabische site in het display-font. */ .arabic{font-family:var(--font-arabic)} :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .wrap{max-width:1240px;margin:0 auto;padding:10px 20px 20px} main.wrap{display:flex;flex-direction:column;gap:16px} /* Secties / tegels */ .tile{background:var(--surface-alt);border-radius:20px;padding:28px;transition:background-color .22s ease} .tile--hero{padding:clamp(28px,4vw,48px)} .card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:20px;padding:28px;transition:background-color .22s ease} .card--sm{border-radius:12px;padding:24px;border:1px solid var(--border-default)} .grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:16px} .span-4{grid-column:span 4;min-width:0} .span-5{grid-column:span 5;min-width:0} .span-7{grid-column:span 7;min-width:0} .auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px} /* ============================================================ 3. Knoppen & links ============================================================ */ .btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;height:40px;border-radius:var(--radius-md);border:none;background:var(--brand-primary);color:#fff;font-family:var(--font-sans);font-weight:600;font-size:15px;text-decoration:none;transition:background-color var(--dur-fast) ease} .btn:hover{background:var(--brand-primary-hover);color:#fff} .btn:active{background:var(--brand-primary-active)} .btn--secondary{background:transparent;border:1px solid var(--border-strong);color:var(--text-heading)} .btn--secondary:hover{background:var(--surface-alt);color:var(--text-heading)} .btn--sm{height:34px;padding:0 14px;font-size:14px} .btn--lg{height:auto;padding:13px 24px;border-radius:10px;font-size:16px} .btn--white{background:#fff;color:#A94F12} .btn--white:hover{background:#FFF3E9;color:#A94F12} .btn--green{background:var(--green-700);color:#fff} .btn--green:hover{background:var(--green-900);color:#fff} .btn--outline-light{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff} .btn--outline-light:hover{background:rgba(255,255,255,.08);color:#fff} .btn--white-green{background:#fff;color:var(--green-900)} .btn--white-green:hover{background:var(--green-50);color:var(--green-900)} .link-arrow{font-size:14px;font-weight:600;text-decoration:none} .link-arrow:hover{text-decoration:underline} .icon-btn{cursor:pointer;width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--dur-fast) ease} .icon-btn:hover{background:var(--surface-alt);color:var(--text-heading)} /* ============================================================ 4. Header + navigatie ============================================================ */ .site-header{position:sticky;top:0;z-index:50;background:var(--surface-page);transition:background-color .22s ease} .site-header__inner{max-width:1240px;margin:0 auto;padding:14px 20px 10px;display:flex;align-items:center;gap:20px;flex-wrap:wrap} .site-header__logo{cursor:pointer;display:flex;align-items:center;text-decoration:none} .site-header__logo img{height:46px;display:block;width:auto} img.logo--dark{display:none} html[data-theme="donker"] img.logo--light{display:none} html[data-theme="donker"] img.logo--dark{display:block} .pill-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:0 auto;padding:5px;border-radius:var(--radius-pill);background:var(--surface-alt);transition:background-color .22s ease;list-style:none} .pill-nav ul{display:contents;list-style:none;margin:0;padding:0} .pill-nav li{display:contents} .pill-nav a{padding:8px 12px;border-radius:var(--radius-pill);font-size:14px;text-decoration:none;font-weight:500;color:var(--text-muted);background:transparent;transition:color .15s ease,background-color .15s ease} .pill-nav a:hover{color:var(--text-heading)} .pill-nav .current-menu-item>a,.pill-nav .current_page_item>a{font-weight:600;color:var(--text-heading);background:var(--surface-card)} .header-actions{display:flex;align-items:center;gap:10px;margin-inline-start:auto} .mobile-nav-btn{display:none;width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-heading);align-items:center;justify-content:center;cursor:pointer} .mobile-nav{display:none;flex-direction:column;gap:4px;padding:10px 16px 18px;border-bottom:1px solid var(--border-default)} .mobile-nav.is-open{display:flex} .mobile-nav ul{display:contents;list-style:none;margin:0;padding:0} .mobile-nav li{display:contents} .mobile-nav a{cursor:pointer;padding:14px 16px;border-radius:var(--radius-lg);font-size:17px;text-decoration:none;font-weight:600;color:var(--text-muted)} .mobile-nav .current-menu-item>a,.mobile-nav .current_page_item>a{color:var(--text-heading);background:var(--surface-alt)} .mobile-nav__donate{margin-top:6px;padding:14px 16px;border-radius:var(--radius-lg);font-size:17px;text-decoration:none;font-weight:600;text-align:center;color:#fff;background:var(--brand-primary)} /* ============================================================ 5. Home / hero ============================================================ */ .hero{background:var(--surface-alt);border-radius:20px;overflow:hidden;position:relative;transition:background-color .22s ease} .hero__watermark{position:absolute;inset-inline-end:-90px;bottom:-120px;width:480px;height:480px;opacity:.06;pointer-events:none} .hero__grid{padding:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:44px;align-items:center;position:relative} .hero h1{margin:0 0 20px;font-size:clamp(38px,5vw,60px);font-weight:700;line-height:1.08;letter-spacing:-0.02em;color:var(--text-heading);text-wrap:pretty} .hero h1 .accent{color:var(--brand-primary)} .hero__intro{margin:0 0 30px;max-width:48ch;font-size:17px;line-height:1.65;color:var(--text-muted)} .page-title{margin:0 0 14px;font-size:clamp(30px,3.5vw,40px);font-weight:700;color:var(--text-heading);letter-spacing:var(--tracking-heading)} .page-intro{margin:0;max-width:62ch;line-height:1.65;color:var(--text-muted)} /* Onderwijs-kaartjes op home */ .programma-mini{cursor:pointer;text-decoration:none;background:var(--surface-card);border:1px solid var(--border-default);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s ease,background-color .22s ease} .programma-mini:hover{border-color:var(--brand-primary)} .programma-kaart{transition:border-color .15s ease,background-color .22s ease} .programma-kaart:hover{border-color:var(--brand-primary)} .programma-kaart h3{color:var(--text-heading)} .programma-mini .ar{font-family:var(--font-arabic);font-size:26px;color:var(--brand-primary);line-height:1.4} .programma-mini strong{font-size:17px;color:var(--text-heading)} .programma-mini span.sub{font-size:13.5px;color:var(--text-muted);line-height:1.5} /* Agenda datumblokken */ .date-block{width:50px;height:50px;flex:none;border-radius:12px;background:var(--surface-alt);display:flex;flex-direction:column;align-items:center;justify-content:center} .date-block strong{font-size:17px;font-weight:700;color:var(--text-heading);line-height:1} .date-block span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)} .date-block--brand{width:72px;height:72px;border-radius:16px;background:var(--brand-primary)} .date-block--brand strong{font-size:26px;color:#fff} .date-block--brand span{font-size:12px;color:#fff;letter-spacing:.05em} /* Mededelingen */ .mededeling-item{padding:12px 0;border-top:1px solid var(--border-default)} .mededeling-item time{font-size:12.5px;color:var(--text-muted);display:block} .mededeling-item a{font-size:15px;font-weight:600;color:var(--text-heading);text-decoration:none} .mededeling-item a:hover{color:var(--text-link)} .mededeling-item .title{font-size:15px;font-weight:600;color:var(--text-heading)} /* ============================================================ 6. Gebedstijden ============================================================ */ .prayer-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:16px;padding:22px 22px 18px;width:100%;max-width:400px;justify-self:end;transition:background-color .22s ease} .prayer-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap} .prayer-card__head h2{margin:0;font-size:17px;font-weight:600;color:var(--text-heading)} .prayer-card__head time{font-size:13px;color:var(--text-muted)} .prayer-rows{display:flex;flex-direction:column;gap:2px} .prayer-row{display:flex;align-items:baseline;gap:10px;padding:7px 10px;border-radius:var(--radius-md);background:transparent} .prayer-row .name{font-size:15px;font-weight:500;color:var(--text-body)} .prayer-row .tag{display:none;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-link)} .prayer-row .time{margin-inline-start:auto;font-size:15px;font-variant-numeric:tabular-nums;font-weight:500;color:var(--text-body)} .prayer-row.is-shurooq .name,.prayer-row.is-shurooq .time{color:var(--text-muted)} .prayer-row.is-next{background:var(--surface-alt)} .prayer-row.is-next .name,.prayer-row.is-next .time{font-weight:700;color:var(--text-heading)} .prayer-row.is-next .tag{display:inline} .next-prayer-banner{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:12px;background:var(--surface-card);border:1px solid var(--border-default)} .next-prayer-banner .label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-link)} .next-prayer-banner .val{font-size:18px;font-weight:700;color:var(--text-heading);font-variant-numeric:tabular-nums} .prayer-table-scroll{overflow-x:auto;border-radius:14px} .prayer-table{min-width:720px;width:100%;border-collapse:collapse;background:var(--surface-card);border-radius:14px;overflow:hidden} .prayer-table th,.prayer-table td{padding:12px 16px;text-align:start;font-size:14.5px;border-bottom:1px solid var(--border-default)} .prayer-table th{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)} .prayer-table td{font-variant-numeric:tabular-nums;color:var(--text-body)} .prayer-table td:first-child{font-weight:600;color:var(--text-heading);white-space:nowrap} .prayer-table tr.is-today td{background:var(--surface-alt);font-weight:700;color:var(--text-heading)} .prayer-table tr:last-child td{border-bottom:none} /* ============================================================ 7. Formulieren ============================================================ */ .field{display:flex;flex-direction:column;gap:6px} .field>label{font-size:13.5px;font-weight:600;color:var(--text-heading)} .input,.select,.textarea{width:100%;padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:15px;transition:border-color var(--dur-fast) ease} .input:focus,.select:focus,.textarea:focus{border-color:var(--focus-ring);outline:2px solid var(--focus-ring);outline-offset:1px} .textarea{resize:vertical} .form-msg{display:none;padding:12px 16px;border-radius:var(--radius-md);font-size:14.5px;font-weight:500} .form-msg.is-success{display:block;background:var(--status-success-bg);color:var(--status-success)} .form-msg.is-error{display:block;background:var(--status-error-bg);color:var(--status-error)} .hp-field{position:absolute;inset-inline-start:-9999px;opacity:0;height:0;overflow:hidden} /* Badges */ .badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;background:var(--surface-alt);color:var(--text-heading);border:1px solid var(--border-default)} .badge--gold{background:var(--surface-accent-tint);color:var(--gold-600);border:none} .badge--green{background:var(--green-50);color:var(--green-700);border:none} html[data-theme="donker"] .badge--green{background:rgba(255,255,255,.08);color:#9fd0c8} /* Bestuur */ .bestuur-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px} .bestuur-lid{text-align:center} .bestuur-lid .avatar{width:96px;height:96px;border-radius:50%;background:var(--surface-alt);color:var(--text-link);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;font-weight:700} .bestuur-lid .naam{font-weight:600;font-size:15px;color:var(--text-heading)} .bestuur-lid .rol{font-size:13px;color:var(--text-muted);margin-top:4px;line-height:1.5} /* Uitvaart stappen */ .step-circle{width:36px;height:36px;border-radius:50%;background:var(--green-700);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;margin-bottom:14px} /* Foto-placeholder */ .img-slot{border-radius:20px;overflow:hidden;position:relative;min-height:300px;background:var(--green-100)} html[data-theme="donker"] .img-slot{background:var(--surface-card)} .img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .img-slot .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--green-700);font-size:14px;font-weight:500;text-align:center;padding:20px} html[data-theme="donker"] .img-slot .placeholder{color:var(--text-muted)} /* ============================================================ 7a. Vrije pagina-inhoud (page.php, Gutenberg) ============================================================ */ .pagina-inhoud{font-size:15.5px;line-height:1.7;max-width:100%} .pagina-inhoud>*{max-width:72ch} .pagina-inhoud h2{font-size:24px;font-weight:700;margin:1.6em 0 .5em} .pagina-inhoud h3{font-size:19px;font-weight:700;margin:1.4em 0 .4em} .pagina-inhoud h2:first-child,.pagina-inhoud h3:first-child,.pagina-inhoud p:first-child{margin-top:0} .pagina-inhoud ul,.pagina-inhoud ol{padding-inline-start:1.4em} .pagina-inhoud li{margin-bottom:.35em} .pagina-inhoud blockquote{margin:1.2em 0;padding:14px 20px;border-inline-start:3px solid var(--brand-primary);background:var(--surface-alt);border-radius:0 var(--radius-lg) var(--radius-lg) 0} .pagina-inhoud table{border-collapse:collapse;width:100%;font-size:14.5px} .pagina-inhoud th,.pagina-inhoud td{padding:10px 14px;border:1px solid var(--border-default);text-align:start} .pagina-inhoud th{background:var(--surface-alt);font-weight:600;color:var(--text-heading)} .pagina-inhoud img{border-radius:var(--radius-lg)} .pagina-inhoud .wp-block-button__link{display:inline-flex;padding:11px 20px;border-radius:var(--radius-md);background:var(--brand-primary);color:#fff;font-weight:600;font-size:15px;text-decoration:none} .pagina-inhoud .wp-block-button__link:hover{background:var(--brand-primary-hover);color:#fff} .pagina-inhoud hr{border:none;border-top:1px solid var(--border-default);margin:2em 0} .pagina-inhoud .fluentform{max-width:640px} /* ============================================================ 7b. Fluent Forms in de huisstijl (flat, tokens, RTL-proof) ============================================================ */ .fluentform .ff-el-group{margin-bottom:16px} .fluentform .ff-el-input--label label{font-size:13.5px;font-weight:600;color:var(--text-heading)} .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after{color:var(--brand-primary)} .fluentform .ff-el-form-control{width:100%;padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:15px;box-shadow:none;height:auto;line-height:1.5} .fluentform .ff-el-form-control:focus{border-color:var(--focus-ring);outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:none} .fluentform textarea.ff-el-form-control{resize:vertical} .fluentform .ff-el-form-check-label{font-size:15px;color:var(--text-body)} .fluentform .ff-el-form-check input[type=radio], .fluentform .ff-el-form-check input[type=checkbox]{accent-color:var(--brand-primary)} .fluentform .ff-btn-submit{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;height:44px;border-radius:var(--radius-md);border:none;background:var(--brand-primary)!important;color:#fff!important;font-family:var(--font-sans);font-weight:600;font-size:15.5px;transition:background-color var(--dur-fast) ease;box-shadow:none} .fluentform .ff-btn-submit:hover{background:var(--brand-primary-hover)!important} .fluentform .ff-el-section-break{border-bottom:1px solid var(--border-default);margin:8px 0 20px;padding-bottom:8px} .fluentform .ff-el-section-title{font-size:18px;font-weight:700;color:var(--text-heading);margin:0} .fluentform .error,.fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--status-error)} .fluentform .error-text,.fluentform .text-danger{color:var(--status-error);font-size:13.5px} .fluentform .ff-message-success{background:var(--status-success-bg);color:var(--status-success);border:none;border-radius:var(--radius-lg);padding:18px 22px;font-size:15px;box-shadow:none} .fluentform .ff-el-progress,.fluentform .ff-upload-preview{border-radius:var(--radius-md)} html[data-theme="donker"] .fluentform .ff-el-form-control{background:var(--surface-card)} html[dir="rtl"] .fluentform .ff-el-input--label label{letter-spacing:normal} /* ============================================================ 8. Footer ============================================================ */ .site-footer{margin-top:28px;background:var(--surface-page);transition:background-color .22s ease} .site-footer__inner{max-width:1240px;margin:0 auto;padding:0 20px} /* De drie linkkolommen krijgen alleen de breedte die ze nodig hebben en staan dicht bij elkaar; het merkblok absorbeert de rest, zodat adres en IBANs niet meer over twee regels breken. */ .footer-grid{padding:44px 0 32px;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,max-content);gap:40px 52px} .footer-brand{display:flex;flex-direction:column;gap:12px} .footer-brand img{height:40px;width:max-content} .footer-brand .adres{font-size:14px;line-height:1.8;color:var(--text-body)} .footer-brand .zakelijk{font-size:12.5px;line-height:1.7;color:var(--text-muted)} .footer-col{display:flex;flex-direction:column;gap:8px} .footer-col strong{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px} .footer-col a{color:var(--text-body);text-decoration:none;font-size:14px} .footer-col a:hover{color:var(--text-link)} .footer-bottom{border-top:1px solid var(--border-default);padding:16px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)} /* ============================================================ 9. Portaal ============================================================ */ .login-wrap{background:var(--surface-alt);border-radius:20px;padding:clamp(40px,6vw,80px) 20px;display:flex;justify-content:center;transition:background-color .22s ease} .login-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:20px;padding:36px 32px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px} .login-card img{height:44px;width:max-content} .login-card h1{margin:0 0 6px;font-size:24px;font-weight:700;color:var(--text-heading)} .login-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-muted)} .login-card .btn{width:100%;height:auto;padding:12px 20px;font-size:15.5px} .portal-rij{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px;border:1px solid var(--border-default);border-radius:14px} .portal-betaling{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border-default)} /* ============================================================ 10. Arabisch / rechts-naar-links ============================================================ */ /* De lay-out spiegelt vanzelf mee: alles staat in flex/grid met logische eigenschappen. Hier alleen wat typografisch anders moet in het Arabisch. */ /* Koppen in Kufi (merkstijl); lopende tekst blijft Noto Sans Arabic. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .hero h1, html[dir="rtl"] .page-title{font-family:var(--font-arabic);font-weight:700} /* Arabisch schrift verbindt: letterspatiëring trekt de letters uit elkaar. */ html[dir="rtl"] :is(h1,h2,h3,h4,.badge,.footer-col strong,.prayer-row .tag, .prayer-table th,.date-block span,.next-prayer-banner .label){letter-spacing:normal} /* Iets meer regelafstand: Arabisch heeft hoge en lage uithalen. */ html[dir="rtl"] body, html[dir="rtl"] p, html[dir="rtl"] .page-intro{line-height:1.85} /* Cijferreeksen (telefoon, IBAN, tijden) blijven links-naar-rechts staan, anders draait de bidi-afhandeling de groepen om: 030 210 24 77. */ .ltr{direction:ltr;unicode-bidi:isolate} html[dir="rtl"] .prayer-row .time, html[dir="rtl"] .prayer-table td:not(:first-child), html[dir="rtl"] .next-prayer-banner .val{direction:ltr;unicode-bidi:isolate} /* Het logo is een vaste lockup en spiegelt niet mee. */ html[dir="rtl"] .site-header__logo img, html[dir="rtl"] .footer-brand img{transform:none} /* Taalknop: Arabisch label iets groter zodat het optisch klopt naast NL. */ .lang-btn{font-size:13px;font-weight:600;text-decoration:none;color:var(--text-muted)} .lang-btn:hover{color:var(--text-heading)} .lang-btn[lang="ar"]{font-family:var(--font-arabic);font-size:14px} /* ============================================================ 11. Responsive — breakpoints exact uit het v3-design ============================================================ */ @media (max-width:860px){ .grid-12{display:flex;flex-direction:column} } @media (max-width:1180px){ .pill-nav{display:none} .mobile-nav-btn{display:inline-flex} .site-header__inner{display:grid;grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr);gap:12px} .site-header__logo{justify-self:center} .header-actions{justify-self:end;margin-inline-start:0} .header-donate{display:none} .footer-grid{display:flex;flex-direction:column;gap:12px;padding:24px 0} .footer-brand,.footer-col{background:var(--surface-alt);border-radius:16px;padding:24px 22px} .footer-brand{align-items:center;text-align:center} .footer-brand img{align-self:center} .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:4px;justify-content:center} .prayer-card{justify-self:stretch;max-width:none} } /* ============================================================ 12. Paginaovergangen ============================================================ */ /* Cross-document View Transitions: de browser vervaagt zelf tussen twee paginaladingen, zonder JS en met behoud van de terugknop. */ @view-transition{navigation:auto} /* De oude pagina blijft staan en de nieuwe vervaagt eroverheen. Bij de standaard kruisvervaging (oud uit + nieuw in) zakt de dekking van gedeelde delen — header, footer — halverwege naar ~75%, waardoor ze zichtbaar dippen terwijl ze niet eens veranderen. Alleen de nieuwe laag animeren houdt die delen exact stil. */ ::view-transition-old(root){animation:none} ::view-transition-new(root){animation:icclr-pagina-in var(--dur-med) var(--ease-out) both} @keyframes icclr-pagina-in{from{opacity:0}to{opacity:1}} /* Terugval voor browsers zonder cross-document transitions (klasse uit header.php): dan animeert alleen de binnenkomst van de inhoud. */ html.geen-paginaovergang main.wrap{animation:icclr-pagina-in var(--dur-med) var(--ease-out) both} @media (prefers-reduced-motion:reduce){ ::view-transition-new(root){animation:none} html.geen-paginaovergang main.wrap{animation:none} }