/* site.css - single hand-written stylesheet for meikleconsulting.com.au * * Palette sampled from the existing brand: the lighthouse "MC" logo is * periwinkle/indigo (#7860f8) on a near-black indigo, paired here with a deep * navy background. No CSS framework: plain, responsive, readable at 375px and up. * * Design language: a restrained, premium dark theme in the style of specialist * cyber and sovereign-technology consultancies. Overlines, numbered sections, * a credibility bar, capability pillars and sector cards do the heavy lifting; * motion is subtle and honours prefers-reduced-motion. */ /* Theme system * ------------- * The palette lives in CSS custom properties so a single set of rules can serve * a light and a dark theme. Resolution follows the platform convention: * - no explicit choice -> follow the operating system (prefers-color-scheme) * - an explicit choice -> the visitor's toggle wins, stored in localStorage * and reflected as data-theme="light" / "dark" on (set by theme.js * before first paint, so there is no flash of the wrong theme). * The dark theme is the original brand look; the light theme is its counterpart. */ :root { /* Shared, theme-independent tokens */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --measure: 66ch; --wrap: 74rem; --radius: 12px; --radius-sm: 8px; /* Accent gradients (purple leaning into indigo-blue, evoking the light path). These reference the active theme's accent variables, so they adapt. */ --grad-accent: linear-gradient(135deg, var(--colour-accent), var(--colour-accent-2)); --grad-accent-soft: linear-gradient(135deg, color-mix(in srgb, var(--colour-accent) 22%, transparent), color-mix(in srgb, var(--colour-accent-2) 14%, transparent)); /* Text placed on a filled purple accent (buttons, skip link) is always white. */ --colour-ink: #ffffff; /* The photo-backed hero and CTA band stay dark in both themes, so these "ink" tokens never change and keep the overlaid text legible. */ --ink-bg: #0b0d1a; --ink-text: #eceef7; --ink-muted: #c7cbe4; --ink-accent: #9f8fff; --ink-accent-2: #5b8cff; } /* Light theme: the default, and whenever the visitor forces "light". */ :root, :root[data-theme="light"] { color-scheme: light; --colour-bg: #f5f6fc; /* soft indigo-tinted paper */ --colour-bg-2: #eef0f9; /* base for gradients */ --colour-surface: #ffffff; /* raised panels/cards */ --colour-surface-2: #f3f4fb; /* slightly deeper panel */ --colour-border: #d8dbec; /* hairlines */ --colour-border-soft: #e6e8f4; /* fainter hairlines */ --colour-text: #14162a; /* primary text, near-black indigo */ --colour-muted: #4b5070; /* secondary text */ --colour-faint: #6c7191; /* tertiary text, labels */ --colour-accent: #6b52f0; /* brand purple, tuned for fills on light */ --colour-accent-soft: #5b3fd6; /* darker purple for links/text on light */ --colour-accent-2: #3f66df; /* cool blue for gradient depth */ --colour-focus: #6d28d9; /* high-contrast focus ring on light */ --colour-footer-bg: #eef0f8; /* gently deeper than the page */ --shadow: 0 18px 40px -22px rgba(20, 22, 55, 0.25); --shadow-lift: 0 26px 60px -30px rgba(20, 22, 55, 0.28); } /* Dark theme: automatically for visitors whose OS prefers dark and who have not forced a theme. Duplicated below for the explicit "dark" choice so a forced dark theme wins even when the OS is set to light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --colour-bg: #0b0d1a; --colour-bg-2: #0c0e1c; --colour-surface: #14182c; --colour-surface-2: #1a1f3a; --colour-border: #262c4a; --colour-border-soft: #1e2440; --colour-text: #eceef7; --colour-muted: #a6abc9; --colour-faint: #7f85a8; --colour-accent: #7860f8; --colour-accent-soft: #9f8fff; --colour-accent-2: #5b8cff; --colour-focus: #ffd166; --colour-footer-bg: color-mix(in srgb, var(--colour-bg) 85%, black); --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7); --shadow-lift: 0 26px 60px -24px rgba(24, 16, 74, 0.85); } } :root[data-theme="dark"] { color-scheme: dark; --colour-bg: #0b0d1a; --colour-bg-2: #0c0e1c; --colour-surface: #14182c; --colour-surface-2: #1a1f3a; --colour-border: #262c4a; --colour-border-soft: #1e2440; --colour-text: #eceef7; --colour-muted: #a6abc9; --colour-faint: #7f85a8; --colour-accent: #7860f8; --colour-accent-soft: #9f8fff; --colour-accent-2: #5b8cff; --colour-focus: #ffd166; --colour-footer-bg: color-mix(in srgb, var(--colour-bg) 85%, black); --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7); --shadow-lift: 0 26px 60px -24px rgba(24, 16, 74, 0.85); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: radial-gradient(1100px 620px at 82% -8%, color-mix(in srgb, var(--colour-accent) 16%, transparent), transparent 60%), radial-gradient(900px 520px at 0% 0%, color-mix(in srgb, var(--colour-accent-2) 10%, transparent), transparent 55%), var(--colour-bg); background-attachment: fixed; color: var(--colour-text); font-family: var(--font-sans); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } main { flex: 1 0 auto; } .wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2rem, 52rem); margin-inline: auto; } h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; } p { text-wrap: pretty; } a { color: var(--colour-accent-soft); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--colour-text); } :focus-visible { outline: 3px solid var(--colour-focus); outline-offset: 2px; border-radius: 2px; } img { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--colour-border-soft); margin-block: 2.5rem; } /* Skip link for keyboard users */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--colour-accent); color: var(--colour-ink); padding: 0.5rem 0.9rem; border-radius: 0 0 var(--radius) 0; font-weight: 700; } .skip-link:focus { left: 0; z-index: 10; } /* Overline / eyebrow label, used to head sections and the hero */ .overline { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem; color: var(--colour-accent-soft); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74rem; font-weight: 700; } .overline::before { content: ""; width: 1.6rem; height: 2px; background: var(--grad-accent); border-radius: 2px; } /* Header and nav */ .site-header { border-bottom: 1px solid var(--colour-border-soft); background: color-mix(in srgb, var(--colour-bg) 82%, transparent); backdrop-filter: saturate(150%) blur(10px); position: sticky; top: 0; z-index: 5; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--colour-text); text-decoration: none; } .brand:hover { color: var(--colour-text); } .brand-logo { width: 36px; height: 36px; display: block; /* The logo PNG is a purple disc on a square black field; clip to a circle so the hard black corners do not show. */ border-radius: 50%; } .site-nav { display: flex; align-items: center; gap: clamp(0.75rem, 0.4rem + 1.6vw, 1.9rem); } .site-nav a { color: var(--colour-muted); text-decoration: none; font-weight: 500; font-size: 0.98rem; } .site-nav a:hover { color: var(--colour-text); } .site-nav .nav-cta { color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: 999px; padding: 0.4rem 1rem; } .site-nav .nav-cta:hover { border-color: var(--colour-accent); background: color-mix(in srgb, var(--colour-accent) 14%, transparent); } /* Light/dark toggle. Sits at the end of the nav (top right), where visitors expect it. Rendered hidden and revealed by theme.js, so it never shows as a dead control when JavaScript is unavailable (the theme then follows the OS). */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; flex: none; border: 1px solid var(--colour-border); border-radius: 999px; background: transparent; color: var(--colour-muted); cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .theme-toggle:hover { color: var(--colour-text); border-color: var(--colour-accent); background: color-mix(in srgb, var(--colour-accent) 12%, transparent); } .theme-toggle .icon { display: block; } /* Show the sun in dark mode (click to go light) and the moon in light mode (click to go dark). theme.js always sets an explicit data-theme, so exactly one icon shows. */ .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Hero with the Brisbane marina photo behind a dark, purple-tinted overlay */ .hero { position: relative; padding-block: clamp(3.75rem, 2rem + 9vw, 8rem); border-bottom: 1px solid var(--colour-border-soft); background-image: linear-gradient(180deg, color-mix(in srgb, var(--ink-bg) 66%, transparent), color-mix(in srgb, var(--ink-bg) 90%, transparent) 78%, var(--ink-bg)), linear-gradient(105deg, color-mix(in srgb, var(--ink-accent) 30%, transparent), transparent 52%), url("/images/brisbane-marina-dusk.jpg"); background-size: cover; background-position: center 42%; overflow: hidden; } .hero-inner { position: relative; max-width: 46rem; } .hero-title { margin: 0; color: var(--ink-text); font-size: clamp(2.15rem, 1.2rem + 4vw, 3.6rem); max-width: 18ch; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5); } .hero-title .accent { background: linear-gradient(120deg, var(--ink-accent), var(--ink-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lead { margin: 1.2rem 0 0; color: var(--ink-text); font-size: clamp(1.05rem, 1rem + 0.55vw, 1.3rem); max-width: 42ch; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); } .hero-cta { margin-top: 2rem; display: flex; gap: 0.8rem; flex-wrap: wrap; } /* Row of small trust markers under the hero copy */ .hero-trust { margin: 2.25rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem 1.5rem; color: var(--ink-text); font-size: 0.9rem; font-weight: 600; } .hero-trust li { display: inline-flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); } .hero-trust li::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--grad-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--colour-accent) 70%, transparent); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--grad-accent); color: #fff; font-weight: 700; padding: 0.72rem 1.5rem; border-radius: 999px; text-decoration: none; border: 1px solid transparent; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--colour-accent) 75%, transparent); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--colour-accent) 85%, transparent); } .btn-ghost { background: transparent; color: var(--colour-text); border-color: var(--colour-border); box-shadow: none; } .btn-ghost:hover { background: color-mix(in srgb, var(--colour-accent) 12%, transparent); color: var(--colour-text); border-color: var(--colour-accent); } /* Inline "read more" style link with arrow */ .arrow-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; text-decoration: none; color: var(--colour-accent-soft); } .arrow-link::after { content: "\2192"; transition: transform 0.18s ease; } .arrow-link:hover { color: var(--colour-text); } .arrow-link:hover::after { transform: translateX(3px); } /* Credibility bar: a strip of factual trust markers below the hero */ .cred-bar { border-bottom: 1px solid var(--colour-border-soft); background: color-mix(in srgb, var(--colour-surface) 55%, transparent); } .cred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1px; background: var(--colour-border-soft); } .cred-item { background: var(--colour-bg); padding: 1.4rem 1.25rem; display: flex; gap: 0.85rem; align-items: flex-start; } .cred-item .icon { flex: none; color: var(--colour-accent-soft); margin-top: 0.1rem; } .cred-item strong { display: block; font-size: 1rem; letter-spacing: -0.01em; } .cred-item span { display: block; color: var(--colour-muted); font-size: 0.88rem; line-height: 1.5; } /* Section rhythm */ .section { padding-block: clamp(3rem, 1.8rem + 5.5vw, 5.5rem); } .section-alt { background: color-mix(in srgb, var(--colour-surface) 45%, transparent); border-block: 1px solid var(--colour-border-soft); } .section-head { max-width: 56rem; margin-bottom: 2rem; } .section-head h2 { margin: 0; font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.25rem); } .section-head .section-lead { margin: 0.85rem 0 0; color: var(--colour-muted); font-size: 1.08rem; max-width: var(--measure); } .section h2 { margin-top: 0; } .section-lead { color: var(--colour-muted); max-width: var(--measure); } /* Icon tile used by pillars and features */ .icon-tile { width: 3rem; height: 3rem; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--colour-accent-soft); background: var(--grad-accent-soft); border: 1px solid color-mix(in srgb, var(--colour-accent) 30%, transparent); } /* Capability pillars grid */ .pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.1rem; } /* Force an even three-up grid (3 + 3 for six items) on wider screens */ .pillar-grid.cols-3 { grid-template-columns: 1fr; } @media (min-width: 40rem) { .pillar-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 60rem) { .pillar-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } .pillar { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.6rem; position: relative; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .pillar:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--colour-accent) 55%, var(--colour-border)); box-shadow: var(--shadow-lift); } .pillar h3 { margin: 1.1rem 0 0.5rem; font-size: 1.18rem; } .pillar p { margin: 0; color: var(--colour-muted); } /* Generic card grid (services summaries on home) */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.1rem; margin-top: 1.5rem; } .card { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); padding: 1.4rem 1.45rem; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--colour-accent) 55%, var(--colour-border)); box-shadow: var(--shadow-lift); } /* Sector cards carry a sector-appropriate photograph as a backdrop. A tinted overlay keeps the surface dark on the left where the text sits, fading to reveal the photo on the right, with a faint brand-purple wash to unify them. */ .bg-tile { position: relative; overflow: hidden; /* Keep every sector card the same size regardless of copy length */ min-height: 9.5rem; display: flex; flex-direction: column; } /* Photo layer */ .bg-tile::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } /* Readability + brand-tint overlay, painted above the photo */ .bg-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--colour-surface) 0%, color-mix(in srgb, var(--colour-surface) 82%, transparent) 44%, color-mix(in srgb, var(--colour-surface) 32%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--colour-accent) 16%, transparent), transparent 62%); pointer-events: none; z-index: 0; } .bg-tile > * { position: relative; z-index: 1; } .bg-tile--government::before { background-image: url("/images/sectors/government.jpg"); } .bg-tile--health::before { background-image: url("/images/sectors/health.jpg"); } .bg-tile--defence::before { background-image: url("/images/sectors/defence.jpg"); } .bg-tile--super::before { background-image: url("/images/sectors/super.jpg"); } .bg-tile--insurance::before { background-image: url("/images/sectors/insurance.jpg"); } .bg-tile--finance::before { background-image: url("/images/sectors/finance.jpg"); } .card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; } .card p { margin: 0; color: var(--colour-muted); } .card p:not(:last-child) { margin-bottom: 0.6rem; } /* Partner cards. Logos come in many colours (often dark), so each sits on a white chip for consistent legibility against the dark surface. */ .partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.1rem; margin-top: 1.5rem; } .partner { display: flex; flex-direction: column; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); padding: 1.25rem 1.3rem 1.4rem; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .partner:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--colour-accent) 55%, var(--colour-border)); box-shadow: var(--shadow-lift); } .partner-logo { display: flex; align-items: center; justify-content: center; height: 4.75rem; padding: 0.9rem 1rem; margin-bottom: 1rem; background: #ffffff; border-radius: var(--radius-sm); } .partner-logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; } .partner h3 { margin: 0 0 0.4rem; font-size: 1.1rem; } .partner p { margin: 0; color: var(--colour-muted); font-size: 0.95rem; } /* Numbered service list (Services page and capability detail) */ .numbered { display: grid; gap: 1rem; margin-top: 1.75rem; counter-reset: item; } .numbered-item { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); padding: 1.5rem 1.6rem; display: grid; gap: 0.35rem 1.4rem; grid-template-columns: auto 1fr; align-items: start; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .numbered-item:hover { border-color: color-mix(in srgb, var(--colour-accent) 45%, var(--colour-border)); box-shadow: var(--shadow-lift); } .numbered-item::before { counter-increment: item; content: counter(item, decimal-leading-zero); grid-row: 1 / span 2; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; color: var(--colour-accent-soft); background: var(--grad-accent-soft); border: 1px solid color-mix(in srgb, var(--colour-accent) 30%, transparent); border-radius: var(--radius-sm); padding: 0.35rem 0.6rem; } .numbered-item h3 { margin: 0; font-size: 1.2rem; align-self: center; } .numbered-item p { margin: 0; color: var(--colour-muted); } /* Sector cards: markets served / clients grouped by sector */ .sector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.1rem; margin-top: 1.75rem; } .sector { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); padding: 1.5rem 1.6rem; } .sector h3 { margin: 0 0 0.3rem; font-size: 1.12rem; } .sector .sector-tag { display: inline-block; margin-bottom: 0.75rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--colour-accent-soft); } .sector ul { margin: 0; padding: 0; list-style: none; } .sector li { padding: 0.55rem 0; border-top: 1px solid var(--colour-border-soft); color: var(--colour-muted); } .sector li:first-child { border-top: 0; padding-top: 0; } .sector li strong { display: block; color: var(--colour-text); font-weight: 600; margin-bottom: 0.1rem; } /* Feature split: sovereign narrative with a bullet list */ .feature { display: grid; gap: 2rem; align-items: start; } @media (min-width: 46rem) { .feature { grid-template-columns: 1fr 1fr; gap: 3rem; } } .feature-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; } .feature-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; } .feature-list .icon-tile { width: 2.4rem; height: 2.4rem; } .feature-list strong { display: block; font-size: 1.02rem; } .feature-list span { color: var(--colour-muted); font-size: 0.95rem; } /* Generic pages and prose */ .page { padding-block: clamp(2.75rem, 1.6rem + 5vw, 4.75rem); } .page-header { max-width: 52rem; } .page-header h1 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem); } .page-lead { color: var(--colour-muted); font-size: 1.18rem; max-width: var(--measure); } .prose { max-width: var(--measure); } .prose h2 { margin-top: 2.25rem; font-size: 1.5rem; } .prose h3 { margin-bottom: 0.3rem; } .prose ul { padding-left: 1.2rem; } .prose li { margin-bottom: 0.4rem; } /* About profile */ .profile { display: grid; gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; } .profile-photo { width: 190px; height: 190px; border-radius: 50%; object-fit: cover; object-position: center; border: 3px solid var(--colour-accent); background: var(--colour-surface); /* Soft accent halo so the headshot sits deliberately on the dark background */ box-shadow: 0 0 0 6px color-mix(in srgb, var(--colour-accent) 12%, transparent), var(--shadow); } @media (min-width: 34rem) { .profile { grid-template-columns: 190px 1fr; gap: 2.25rem; } } /* On-brand call-to-action band using the illuminated garden photo */ .cta-band { position: relative; padding-block: clamp(3rem, 1.8rem + 5vw, 4.75rem); border-block: 1px solid var(--colour-border-soft); background-image: linear-gradient(180deg, color-mix(in srgb, var(--ink-bg) 74%, transparent), color-mix(in srgb, var(--ink-bg) 90%, transparent)), linear-gradient(105deg, color-mix(in srgb, var(--ink-accent) 26%, transparent), transparent 55%), url("/images/illuminated-garden.jpg"); background-size: cover; background-position: center; text-align: center; } .cta-band .overline { justify-content: center; } .cta-band h2 { margin-top: 0; color: var(--ink-text); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem); } .cta-band p { color: var(--ink-text); max-width: 48ch; margin-inline: auto; } .cta-band .hero-cta { justify-content: center; } /* The hero and CTA band stay dark in both themes, so their overlines, ghost buttons and accents use the fixed "ink" tokens rather than the theme palette, keeping their contrast against the dark photo overlay in light mode too. */ .hero .overline, .cta-band .overline { color: var(--ink-accent); } .hero .btn-ghost, .cta-band .btn-ghost { color: var(--ink-text); border-color: color-mix(in srgb, var(--ink-text) 42%, transparent); } .hero .btn-ghost:hover, .cta-band .btn-ghost:hover { color: var(--ink-text); border-color: var(--ink-accent); background: color-mix(in srgb, var(--ink-accent) 16%, transparent); } /* Footer */ .site-footer { border-top: 1px solid var(--colour-border); background: var(--colour-footer-bg); padding-block: 2.75rem; color: var(--colour-muted); font-size: 0.95rem; } .footer-top { display: grid; gap: 1.5rem 2rem; padding-bottom: 1.75rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--colour-border-soft); } @media (min-width: 44rem) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } } .footer-brand .brand { margin-bottom: 0.75rem; } .footer-brand p { margin: 0; max-width: 34ch; } .footer-col h2 { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--colour-faint); margin: 0 0 0.75rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .footer-col a { color: var(--colour-muted); text-decoration: none; } .footer-col a:hover { color: var(--colour-text); } .footer-bottom { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; } .copyright { margin: 0; } .footer-legal { margin: 0; font-size: 0.9rem; } .footer-legal a { color: var(--colour-muted); text-decoration: none; } .footer-legal a:hover { color: var(--colour-text); } .privacy-note { margin: 1rem 0 0; font-size: 0.86rem; color: var(--colour-faint); max-width: 70ch; } .acknowledgement { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--colour-border); font-size: 0.86rem; color: var(--colour-faint); max-width: 70ch; } /* Book a call panel on the contact page */ .book-cta { margin-top: 1.75rem; max-width: 40rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.4rem 1.6rem; background: var(--grad-accent-soft); border: 1px solid color-mix(in srgb, var(--colour-accent) 35%, transparent); border-radius: var(--radius); } .book-cta-text h2 { margin: 0 0 0.25rem; font-size: 1.2rem; } .book-cta-text p { margin: 0; color: var(--colour-muted); max-width: 34ch; } .book-cta .btn { flex: none; } .book-or { margin: 1.25rem 0 0; color: var(--colour-faint); font-size: 0.95rem; } /* Contact form */ .contact-form { margin-top: 1.75rem; max-width: 40rem; display: flex; flex-direction: column; gap: 1.1rem; } .field { display: flex; flex-direction: column; gap: 0.35rem; } .field label { font-weight: 600; } .field input, .field textarea { font: inherit; color: var(--colour-text); background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; width: 100%; } .field input:focus, .field textarea:focus { border-color: var(--colour-accent); } .field textarea { resize: vertical; min-height: 8rem; } .contact-form .btn { align-self: start; cursor: pointer; } /* Honeypot: kept in the DOM and accessibility tree out, but off-screen for sighted users. Do not use display:none (some bots skip those fields). */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }