/* =========================================================================== VKV Group — Brand system, final layer (Module 43 final) Loaded LAST. It holds the ONE final rule for each shared surface: 1. Colour hero (CSS only — no images) 5. Closing CTA band 2. Multicolour heading accents 6. Form controls 3. Section rhythm (white → tint → white) 7. Footer + copyright strip 4. Boxes: one border, brand hover Colours come from tokens in design-system.css and the page pair on (--pa / --pa2, from app/includes/page-colors.php). Black is type and structure only — never a highlight, hover, CTA or section fill. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Hero — premium colour composition (CSS only, no images) Three layers, back → front: section warm-white canvas with soft primary/support radial fields and the slim two-colour base rule; ::after a translucent tinted plane (primary → support, 12–16%) with a faint dot grid that steps the eye from white into colour; ::before the saturated field: one hue deepening top → bottom, a crisp support-colour disc in the corner (the colours never blend), fine rings and line texture, and a soft top highlight. The copy column always sits on the light canvas, so type stays AA. --------------------------------------------------------------------------- */ main .hero, main .page-hero { --h-a: var(--pa, var(--vkv-blue)); --h-b: var(--pa2, var(--vkv-coral)); --h-deep: var(--pa-deep, var(--vkv-blue-deep)); position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(90deg, var(--h-a) 0 58%, #FFFFFF 58% calc(58% + 3px), var(--h-b) calc(58% + 3px) 100%) left bottom / 100% 5px no-repeat, radial-gradient(44% 60% at 0% 0%, color-mix(in srgb, var(--h-a) 11%, transparent), transparent 72%), radial-gradient(34% 50% at 46% 104%, color-mix(in srgb, var(--h-b) 9%, transparent), transparent 72%), linear-gradient(180deg, #FFFFFF 0%, var(--vkv-off-white) 100%); border: 0; box-shadow: none; } /* Saturated field. */ main .hero::before, main .page-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; right: 0; bottom: 5px; width: 40%; background: radial-gradient(circle at 76% 64%, transparent 0 116px, rgba(255, 255, 255, 0.32) 117px 119px, transparent 120px), radial-gradient(circle at 76% 64%, transparent 0 190px, rgba(255, 255, 255, 0.16) 191px 192px, transparent 193px), radial-gradient(circle at 104% 104%, var(--h-b) 0 30%, rgba(255, 255, 255, 0.9) 30% 30.5%, transparent 30.6%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 18px), radial-gradient(70% 50% at 70% 0%, rgba(255, 255, 255, 0.24), transparent 70%), linear-gradient(170deg, color-mix(in srgb, var(--h-a) 82%, #FFFFFF) 0%, var(--h-a) 42%, var(--h-deep) 100%); clip-path: polygon(20% 0, 100% 0, 100% 100%, 4% 100%); } /* Translucent step plane between the canvas and the field. */ main .hero::after, main .page-hero::after { content: ""; position: absolute; z-index: -2; pointer-events: none; top: 0; right: 0; bottom: 5px; width: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--h-a) 30%, transparent) 1.2px, transparent 1.8px) 0 0 / 20px 20px, linear-gradient(160deg, color-mix(in srgb, var(--h-a) 15%, #FFFFFF) 0%, color-mix(in srgb, var(--h-b) 13%, #FFFFFF) 100%); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); opacity: 0.9; } main .hero > .container, main .page-hero > .container { position: relative; z-index: 2; } /* Banners without the enquiry card keep a smaller corner composition so centred copy never sits on colour. */ main .hero:not(.has-banner-lead)::before, main .page-hero:not(.has-banner-lead)::before { width: 22%; clip-path: polygon(44% 0, 100% 0, 100% 100%, 86% 100%); } main .hero:not(.has-banner-lead)::after, main .page-hero:not(.has-banner-lead)::after { width: 30%; clip-path: polygon(46% 0, 100% 0, 100% 100%, 80% 100%); } /* Hero type. */ html body main :is(.hero, .page-hero) .eyebrow, main .ia-eyebrow { color: var(--pa-ink, var(--blue-ink)); } html body main :is(.hero, .page-hero) .eyebrow::before, main .ia-eyebrow::before { background: linear-gradient(90deg, var(--h-a) 0 60%, var(--h-b) 60% 100%); width: 28px; height: 3px; border-radius: 2px; } main :is(.hero, .page-hero) :is(.hero-sub, .ia-lead) { color: var(--text); } /* The enquiry card sits over the colour field: solid white, one border. */ main :is(.hero, .page-hero) .banner-lead { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 30px 60px -28px rgba(16, 24, 40, 0.35), 0 2px 6px rgba(16, 24, 40, 0.06); } main :is(.hero, .page-hero) .banner-lead::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--h-a) 0 50%, var(--h-b) 50% 100%); } @media (max-width: 980px) { /* Stacked: the field becomes a slanted base panel behind the form, with the tinted plane stepping up just above it. The copy stays on white. */ main .hero.has-banner-lead::before, main .page-hero.has-banner-lead::before { top: auto; left: 0; width: auto; height: 300px; /* px, not %: always inside the form's band */ clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); } main .hero.has-banner-lead::after, main .page-hero.has-banner-lead::after { top: auto; left: 0; width: auto; height: 360px; clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); } } @media (max-width: 640px) { main .hero:not(.has-banner-lead)::before, main .page-hero:not(.has-banner-lead)::before { width: 16%; } main .hero:not(.has-banner-lead)::after, main .page-hero:not(.has-banner-lead)::after { width: 22%; } } /* --------------------------------------------------------------------------- 2. Multicolour headings — ONE accent phrase per heading (written in the templates; hl_class()/hl_phrase() for shared ones). Deep shades keep AA at every size; orange is a highlighter behind ink. --------------------------------------------------------------------------- */ .hl { font-weight: inherit; } .hl-blue { color: var(--vkv-blue-deep); } .hl-coral { color: var(--vkv-coral-deep); } .hl-green { color: var(--vkv-green-deep); } .hl-orange { color: inherit; background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--vkv-orange) 55%, transparent) 58%, color-mix(in srgb, var(--vkv-orange) 55%, transparent) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.06em; } /* --------------------------------------------------------------------------- 3. Section rhythm — white → soft page tint → white. --------------------------------------------------------------------------- */ main .section-alt, main .ia-section-alt, main .trust-strip { background: radial-gradient(50% 80% at 100% 0%, color-mix(in srgb, var(--pa2, var(--vkv-coral)) 5%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--pa, var(--vkv-blue)) 6%, #FFFFFF) 0%, color-mix(in srgb, var(--pa, var(--vkv-blue)) 3%, var(--vkv-off-white)) 100%); } main .section-alt, main .ia-section-alt { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pa, var(--vkv-blue)) 12%, transparent); } /* Section kickers / eyebrows carry the page colour pair. */ main .section .eyebrow, main .ia-kicker { color: var(--pa-ink, var(--blue-ink)); } /* --------------------------------------------------------------------------- 4. Boxes — exactly ONE visible border, white surface, refined shadow. Hover: border → page colour, faint tint, icon colour, slight lift. --------------------------------------------------------------------------- */ html body :is( .card, .related-card, .why-card, .pain-card, .ia-card, .service-card, .contact-card, .channel-card, .who-card, .testimonial, .post-card, .pricing-card, .mv-card, .value-card, .wa-card, .scope-card, .project-card, .leader-card, .team-card, .person-card, .location-card, .pricing-bundle, .bento-tile, .industry-card, .ia-note, .ia-form-card, .banner-lead, .accordion-item, .ia-ind-group, .stat, .form-card, .approach-note, .cta-band, .industry ) { background-color: #FFFFFF; background-image: none; border: 1px solid var(--box-line); border-radius: var(--card-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px -16px rgba(16, 24, 40, 0.16); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-out); } html body :is( .card, .related-card, .why-card, .pain-card, .ia-card, .service-card, .contact-card, .channel-card, .who-card, .testimonial, .post-card, .pricing-card, .mv-card, .value-card, .wa-card, .scope-card, .project-card, .leader-card, .team-card, .person-card, .location-card, .pricing-bundle, .bento-tile, .industry-card, .ia-note, .ia-ind-group, .stat, .approach-note, .industry ):hover { border-color: var(--pa, var(--vkv-blue)); background-color: color-mix(in srgb, var(--pa, var(--vkv-blue)) 3%, #FFFFFF); box-shadow: 0 2px 6px rgba(16, 24, 40, 0.05), 0 22px 44px -22px color-mix(in srgb, var(--pa, var(--vkv-blue)) 50%, transparent); transform: translateY(-3px); } html body :is(.accordion-item, .banner-lead, .ia-form-card, .form-card):hover, html body :is(.accordion-item, .banner-lead, .ia-form-card, .form-card):focus-within { border-color: color-mix(in srgb, var(--pa, var(--vkv-blue)) 60%, var(--box-line)); } /* Icons inside a hovered box take the page colour. */ html body :is(.card, .why-card, .pain-card, .service-card, .contact-card, .channel-card, .who-card, .value-card, .mv-card, .scope-card, .related-card, .industry-card, .ia-card):hover :is(svg, .card-icon, .why-icon, .icon) { color: var(--pa-ink, var(--blue-ink)); } /* Short copy inside boxes follows the box alignment (no justified gaps in narrow cards). */ html body :is(.card, .why-card, .pain-card, .ia-card, .service-card, .contact-card, .channel-card, .who-card, .value-card, .mv-card, .scope-card, .related-card, .industry-card, .pricing-card, .post-card) p { text-align: inherit; hyphens: manual; -webkit-hyphens: manual; } /* Featured pricing keeps a coloured border at rest. */ html body .pricing-card.is-featured { border-color: var(--pa, var(--vkv-blue)); } /* Inner parts never add a second border. */ html body :is(.card, .ia-card, .service-card, .post-card, .pricing-card) :is(.card-body, .card-footer, .card-header) { border: 0; } /* The former black "not sure?" card becomes a page-colour tint card. */ html body .ia-link-card-cta { background: linear-gradient(145deg, color-mix(in srgb, var(--pa) 10%, #FFFFFF), color-mix(in srgb, var(--pa2) 10%, #FFFFFF)); border-color: color-mix(in srgb, var(--pa) 40%, var(--box-line)); } html body .ia-link-card-cta h3 { color: var(--ink); } html body .ia-link-card-cta .ia-go { color: var(--pa-ink); } /* Accordion (FAQ): trigger colour + icon follow the page colour. */ .accordion-trigger:hover, .accordion-trigger[aria-expanded="true"] { color: var(--pa-ink, var(--blue-ink)); } .accordion-trigger[aria-expanded="true"] .accordion-icon { color: var(--pa-ink, var(--blue-ink)); } @media (prefers-reduced-motion: reduce) { html body :is(.card, .ia-card, .service-card, .post-card, .pricing-card, .why-card, .pain-card, .contact-card, .channel-card, .who-card, .value-card, .mv-card, .scope-card, .related-card, .industry-card, .ia-note, .ia-ind-group, .stat, .project-card, .testimonial, .approach-note):hover { transform: none; } } /* --------------------------------------------------------------------------- 5. Closing CTA band — white surface, page-colour fields, brand rule. --------------------------------------------------------------------------- */ html body main .cta-band { position: relative; overflow: hidden; text-align: center; background: radial-gradient(55% 120% at 100% 0%, color-mix(in srgb, var(--pa2) 14%, transparent), transparent 70%), radial-gradient(55% 120% at 0% 100%, color-mix(in srgb, var(--pa) 14%, transparent), transparent 70%), #FFFFFF; border-color: color-mix(in srgb, var(--pa) 35%, var(--box-line)); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--pa) 45%, transparent); } html body main .cta-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; inset-block-start: 0; background: linear-gradient(90deg, var(--pa) 0 58%, var(--pa2) 58% 100%); filter: none; border-radius: 0; } html body main .cta-band h2 { color: var(--ink); font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); line-height: 1.14; letter-spacing: -0.02em; text-wrap: balance; } html body main .cta-band p { color: var(--text); margin-inline: auto; max-width: 62ch; } html body main .cta-band .pulse-glow { display: none; } /* --------------------------------------------------------------------------- 6. Form controls — one border, brand focus. --------------------------------------------------------------------------- */ main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea), .site-footer :is(input[type="email"], input[type="text"]) { background-color: #FFFFFF; border: 1px solid var(--box-line); box-shadow: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover { border-color: color-mix(in srgb, var(--pa, var(--vkv-blue)) 45%, var(--box-line)); } main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus, .site-footer input[type="email"]:focus { border-color: var(--pa, var(--vkv-blue)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa, var(--vkv-blue)) 20%, transparent); outline: 0; } input[type="checkbox"] { accent-color: var(--vkv-blue-deep); } /* --------------------------------------------------------------------------- 7. Footer — 4 columns, one VKV colour per column, compact copyright strip. --------------------------------------------------------------------------- */ .site-footer .footer-main { position: relative; background: #FFFFFF; padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) clamp(1rem, 0.8rem + 0.6vw, 1.35rem); } .site-footer .footer-main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--vkv-blue) 0 25%, var(--vkv-coral) 25% 50%, var(--vkv-orange) 50% 75%, var(--vkv-green) 75% 100%); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); } .footer-col { --fc: var(--vkv-blue); --fc-ink: var(--vkv-blue-deep); min-width: 0; } .footer-col:nth-child(2) { --fc: var(--vkv-coral); --fc-ink: var(--vkv-coral-deep); } .footer-col:nth-child(3) { --fc: var(--vkv-orange); --fc-ink: var(--vkv-orange-deep); } .footer-col:nth-child(4) { --fc: var(--vkv-green); --fc-ink: var(--vkv-green-deep); } .footer-col-brand .footer-about { margin: 0; max-width: 40ch; color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; } .footer-col-brand .footer-about::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; margin-bottom: 0.9rem; background: linear-gradient(90deg, var(--vkv-blue) 0 50%, var(--vkv-green) 50% 100%); } .site-footer .footer-heading { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 1rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .site-footer .footer-heading::before { content: ""; flex: none; width: 18px; height: 3px; border-radius: 2px; background: var(--fc); } .site-footer .footer-subheading { margin: 1.4rem 0 0.7rem; font-family: var(--font-display); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .site-footer .footer-links { display: grid; gap: 0.55rem; font-size: 0.9rem; margin: 0; padding: 0; } .site-footer .footer-links a { color: var(--text-muted); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); } .site-footer .footer-links a:hover, .site-footer .footer-links a:focus-visible { color: var(--fc-ink); text-decoration-color: var(--fc); } /* Social icons: each takes a VKV colour on hover and lifts. */ .site-footer .social-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; } .site-footer .social-link { --sc: var(--vkv-blue-deep); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--box-line); color: var(--text-muted); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease); } .site-footer .social-list li:nth-child(4n+2) .social-link { --sc: var(--vkv-coral-deep); } .site-footer .social-list li:nth-child(4n+3) .social-link { --sc: var(--vkv-green-deep); } .site-footer .social-list li:nth-child(4n+4) .social-link { --sc: var(--vkv-orange-deep); } .site-footer .social-link:hover, .site-footer .social-link:focus-visible { background: var(--sc); border-color: var(--sc); color: #FFFFFF; transform: translateY(-3px); box-shadow: 0 10px 20px -10px var(--sc); } /* Newsletter: one bordered input + brand button, aligned consent checkbox. */ .site-footer .newsletter-row { display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: nowrap; } .site-footer .newsletter-row input[type="email"] { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.9rem; } .site-footer .newsletter-row .btn { flex: none; min-height: 44px; padding-inline: 1.1rem; } .site-footer .consent-sm { display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 0.7rem; font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); } .site-footer .consent-sm input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0.15rem 0 0; } /* Copyright strip — separate, ultra-compact, the last thing on the page. One hairline above it; no min-height, no margins, 5px block padding. */ .site-footer .footer-legal-bar { margin: 0; padding-block: 5px; min-height: 0; background: #FFFFFF; border-top: 1px solid var(--box-line); } .site-footer .footer-legal-bar > .container { padding-block: 0; } .site-footer .footer-legal-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 9px; margin: 0; max-width: none; text-align: center; font-size: 0.78rem; line-height: 1.25; color: var(--text-muted); } .site-footer .footer-legal-line a { color: var(--text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); } .site-footer .footer-legal-line a:hover, .site-footer .footer-legal-line a:focus-visible { color: var(--vkv-coral-deep); text-decoration-color: currentColor; } .site-footer .footer-legal-line a.footer-legal-brand { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.05em; color: var(--vkv-blue-deep); } .site-footer .footer-legal-line a.footer-legal-brand:hover, .site-footer .footer-legal-line a.footer-legal-brand:focus-visible { color: var(--vkv-green-deep); } .site-footer .footer-legal-line .sep { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--vkv-blue); } .site-footer .footer-legal-line .sep-coral { background: var(--vkv-coral); } .site-footer .footer-legal-line .sep-orange { background: var(--vkv-orange); } .site-footer .footer-legal-line .sep-green { background: var(--vkv-green); } @media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } .site-footer .footer-legal-line { font-size: 0.72rem; gap: 1px 7px; } } @media (prefers-reduced-motion: reduce) { .site-footer .social-link:hover { transform: none; } } /* Footer statistic cards stay centred whatever their count. */ .site-footer .footer-numbers { grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); justify-content: center; } /* Dropdown (mega menu) panel: one border, white surface. */ .site-header .mega { border: 1px solid var(--box-line); border-top-color: var(--box-line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .site-header .mega-links a:hover, .site-header .mega-links a:focus-visible { color: var(--col-accent-ink, var(--blue-ink)); } .site-header .mega-accent-blue { --col-accent-ink: var(--vkv-blue-deep); } .site-header .mega-accent-red { --col-accent-ink: var(--vkv-coral-deep); } .site-header .mega-accent-orange{ --col-accent-ink: var(--vkv-orange-deep); } .site-header .mega-accent-green { --col-accent-ink: var(--vkv-green-deep); } .site-footer .social-link svg { width: 18px; height: 18px; } .site-footer .footer-about { text-align: left; hyphens: manual; -webkit-hyphens: manual; } /* Social icons outside the footer share the same base. */ .social-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .social-link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--box-line); color: var(--text-muted); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease-out); } .social-link svg { width: 18px; height: 18px; } .social-link:hover, .social-link:focus-visible { background: var(--vkv-blue-deep); border-color: var(--vkv-blue-deep); color: #FFFFFF; transform: translateY(-3px); }