/* Theme Name: CleanOps Theme Theme URI: https://cleanops.app Author: GRIP Facility Author URI: https://grip-facility.com Description: CleanOps marketing-website theme, sub-brand onder GRIP Facility. Astra parent child-theme met design-tokens uit master-plan. Template: astra Version: 0.1.0 Text Domain: cleanops-theme */ /* Design tokens (--co-*) en typography utilities worden geladen via: - cleanops-design-system.php (mu-plugin) — runtime injectie in - theme.json — Gutenberg block-editor presets Deze style.css bevat alleen theme-specifieke overrides en componenten. */ /* ============================================================ Body + basis ============================================================ */ body { font-family: var(--co-font-sans); font-size: var(--co-text-base); line-height: var(--co-leading-base); color: var(--co-ink); background: var(--co-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--co-font-sans); color: var(--co-ink); line-height: var(--co-leading-snug); } h1 { font-weight: 700; font-size: var(--co-text-4xl); letter-spacing: var(--co-tracking-tight); } h2 { font-weight: 600; font-size: var(--co-text-3xl); letter-spacing: var(--co-tracking-snug); } h3 { font-weight: 600; font-size: var(--co-text-2xl); letter-spacing: var(--co-tracking-snug); } h4 { font-weight: 600; font-size: var(--co-text-xl); } a { color: var(--co-brand-blue); text-decoration: none; transition: color var(--co-dur-fast) var(--co-ease-out); } a:hover { color: var(--co-brand-blue-hover); } a:focus-visible { outline: none; box-shadow: var(--co-ring-focus); border-radius: var(--co-r-1); } /* ============================================================ Containers ============================================================ */ .co-container { max-width: var(--co-container); margin-inline: auto; padding-inline: var(--co-gutter); } .co-container-narrow { max-width: var(--co-container-narrow); margin-inline: auto; padding-inline: var(--co-gutter); } /* ============================================================ Button-componenten (.co-btn-*) ============================================================ */ .co-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--co-s-2); padding: var(--co-s-3) var(--co-s-6); border: none; border-radius: var(--co-r-2); font-family: var(--co-font-sans); font-size: var(--co-text-base); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--co-dur-fast) var(--co-ease-out), color var(--co-dur-fast) var(--co-ease-out), box-shadow var(--co-dur-fast) var(--co-ease-out); } .co-btn:focus-visible { outline: none; box-shadow: var(--co-ring-focus); } /* Primary CTA (oranje) */ .co-btn-primary { background: var(--co-brand-orange); color: var(--co-surface) !important; } .co-btn-primary:hover { background: var(--co-brand-orange-hover); color: var(--co-surface) !important; } .co-btn-primary:active { background: var(--co-brand-orange-press); } /* Secondary CTA (blauw outline) */ .co-btn-secondary { background: transparent; color: var(--co-brand-blue) !important; border: 2px solid var(--co-brand-blue); padding: calc(var(--co-s-3) - 2px) calc(var(--co-s-6) - 2px); } .co-btn-secondary:hover { background: var(--co-brand-blue); color: var(--co-surface) !important; } /* Tertiary CTA (tekst-only) */ .co-btn-tertiary { background: transparent; color: var(--co-brand-blue) !important; padding: var(--co-s-2) var(--co-s-3); } .co-btn-tertiary:hover { color: var(--co-brand-blue-hover) !important; text-decoration: underline; } /* ============================================================ Card-componenten (.co-card) ============================================================ */ .co-card { background: var(--co-surface); border: 1px solid var(--co-line); border-radius: var(--co-r-4); padding: var(--co-s-6); box-shadow: var(--co-shadow-1); transition: box-shadow var(--co-dur-base) var(--co-ease-out), transform var(--co-dur-base) var(--co-ease-out); } .co-card:hover { box-shadow: var(--co-shadow-2); } .co-card--quiet { background: var(--co-surface-sunken); border-color: var(--co-line-soft); } .co-card--ink { background: var(--co-surface-ink); border-color: var(--co-fg-1); color: var(--co-surface); } /* ============================================================ Sections (verticale ritme) ============================================================ */ .co-section { padding-block: var(--co-s-9); } .co-section--hero { padding-block: var(--co-s-10); } .co-section--quiet { background: var(--co-surface-sunken); } .co-section--ink { background: var(--co-surface-ink); color: var(--co-surface); } .co-section--ink h1, .co-section--ink h2, .co-section--ink h3, .co-section--ink h4 { color: var(--co-surface); } /* ============================================================ Astra child overrides — minimaal ============================================================ */ /* Verberg Astra title-block standaard (we managen via Gutenberg) */ .entry-title, .ast-archive-title { font-family: var(--co-font-sans); color: var(--co-ink); } /* ============================================================ Header — logo grootte + site-title verbergen ============================================================ */ /* Beperk logo-hoogte zodat het netjes in de header past */ .site-branding.ast-site-identity { flex: 0 0 auto !important; min-width: 200px !important; width: auto !important; } .site-logo-img { display: inline-block !important; width: auto !important; height: auto !important; line-height: 0 !important; } .site-logo-img a, .custom-logo-link { display: inline-block !important; line-height: 0 !important; } .ast-site-identity .site-logo-img img, .ast-site-identity img.custom-logo, .site-branding img.custom-logo, .site-branding img { height: 64px !important; width: auto !important; max-height: 64px !important; /* Overschrijf de verouderde 779x462 img-attributen zodat de bijgesneden viewBox (639x158) de breedte bepaalt; anders perst de browser de SVG in een te smal vakje met witruimte erboven/onder. */ aspect-ratio: 639 / 158 !important; display: inline-block !important; } /* Verberg site-title naast logo (visueel duplicaat — logo bevat al "CleanOps") */ .ast-site-title-wrap, .site-title, .ast-site-identity .site-title { display: none !important; } /* Header-bar layout */ .ast-primary-header-bar { background: var(--co-surface) !important; border-bottom: 1px solid var(--co-line); } /* Site-branding ruimte beperken */ .site-branding { padding-block: var(--co-s-3) !important; } /* ============================================================ Footer styling ============================================================ */ .cleanops-footer-credits { font-family: var(--co-font-sans); font-size: var(--co-text-sm); color: var(--co-fg-3); text-align: center; padding-block: var(--co-s-4); } .cleanops-footer-credits a { color: var(--co-brand-blue); font-weight: 500; } .cleanops-footer-credits a:hover { color: var(--co-brand-blue-hover); }