/* Kate O'Donovan — site styles. Plain CSS, no build step. Themes: light is the default — a visitor with JavaScript disabled sees the site exactly as it always has. The light / dark / auto choice is resolved to data-theme="dark"|"light" on by the inline script in index.html before first paint; main.js owns the switch in the header. The [data-theme="dark"] block below overrides every palette variable. */ :root { --ink: #23303a; --ink-soft: #55646f; --teal: #2f6f6b; --teal-dark: #245653; --sand: #f6f2ec; --line: #e2dcd3; --white: #fff; --on-teal: #fff; /* text on teal fills: buttons, switch */ --teal-wash: rgba(47, 111, 107, 0.08); /* quiet teal: hovers, selected option */ --header-veil: rgba(255, 255, 255, 0.95); /* The contact block prints inverted — dark ground in the light theme. */ --contact-bg: #23303a; --contact-heading: #fff; --contact-text: #eef2f4; --contact-soft: #c3ced5; --contact-link: #fff; --contact-small: #9fadb6; --contact-btn-bg: #fff; --contact-btn-ink: #23303a; --contact-btn-hover: #dfe7ea; --footer-bg: #1a242c; --footer-text: #8f9ea8; --footer-link: #b9c6cf; --footer-address: #c3ced5; --wrap: 1080px; } /* Dark theme: a charcoal-teal ground, the accent lifted so it holds contrast on dark. --teal-dark keeps its jobs (link colour, button hover) but points at a lighter value — on a dark ground "hover" goes up, not down. */ [data-theme="dark"] { --ink: #e7ecee; --ink-soft: #9fb0b5; --teal: #56b3a9; --teal-dark: #7ccfc6; --sand: #182226; --line: #263439; --white: #10181b; --on-teal: #0e1a19; --teal-wash: rgba(92, 181, 171, 0.16); --header-veil: rgba(16, 24, 27, 0.92); --contact-bg: #162126; --contact-heading: #f2f6f7; --contact-text: #dfe8ea; --contact-soft: #a3b4ba; --contact-link: #8ed3ca; --contact-small: #8fa0a6; --contact-btn-bg: #fff; --contact-btn-ink: #142024; --contact-btn-hover: #dfe7ea; --footer-bg: #0a1013; } /* main.js adds .theming to for a third of a second while the theme changes, so colours ease over rather than snapping. Colour properties only, and briefly, so it never fights the hover transitions. */ html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, fill 0.28s ease, stroke 0.28s ease !important; } * { box-sizing: border-box; } body { margin: 0; font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: 18px; line-height: 1.65; color: var(--ink); background: var(--white); } h1, h2, h3, h4, .brand-name, .btn, nav a, .eyebrow { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } h1 { font-size: 2.4rem; line-height: 1.15; margin: 0 0 1rem; letter-spacing: -0.02em; } h2 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 0.8rem; letter-spacing: -0.01em; } h3 { font-size: 1.3rem; margin: 0 0 0.5rem; } h4 { font-size: 1.02rem; margin: 0 0 0.4rem; } img { max-width: 100%; height: auto; display: block; } a { color: var(--teal-dark); } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .narrow { max-width: 760px; } .center { text-align: center; } /* Header */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--header-veil); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .brand { text-decoration: none; color: inherit; } .brand-name { display: block; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; } .brand-sub { display: block; font-size: 0.8rem; color: var(--ink-soft); } nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } nav a { text-decoration: none; font-size: 0.9rem; color: var(--ink-soft); } nav a:hover { color: var(--teal); } .nav-cta { background: var(--teal); color: var(--on-teal) !important; padding: 8px 16px; border-radius: 999px; } .nav-cta:hover { background: var(--teal-dark); } /* Light / dark / auto as a three-state capsule — the pill vocabulary the rest of the design already uses. main.js owns the state; the buttons are a proper radiogroup (arrow keys move, roving tabindex). */ .theme-switch { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; } .theme-opt { display: grid; place-items: center; width: 30px; height: 25px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; transition: color 0.16s ease, background-color 0.16s ease; } .theme-opt:hover { color: var(--ink); } .theme-opt[aria-checked="true"] { background: var(--teal-wash); color: var(--teal); } .theme-opt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .theme-opt .icon-half { fill: currentColor; stroke: none; } /* Hero */ .hero { background: var(--sand); border-bottom: 1px solid var(--line); } .hero-inner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; } .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--teal); margin: 0 0 12px; } .lead { font-size: 1.1rem; color: var(--ink-soft); } .hero-text p { color: var(--ink-soft); } .hero-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; } .hero .strap { font-size: 1.15rem; margin: -0.4rem 0 1.2rem; } .hero-image img { width: 100%; height: auto; max-width: 340px; border-radius: 10px; box-shadow: 0 18px 40px rgba(35, 48, 58, 0.16); } .caption { max-width: 340px; margin: 14px 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--ink-soft); } /* Buttons */ .btn { display: inline-block; background: var(--teal); color: var(--on-teal); text-decoration: none; padding: 13px 26px; border-radius: 999px; font-size: 0.95rem; } .btn:hover { background: var(--teal-dark); } .btn-quiet { background: transparent; color: var(--teal-dark); border: 1px solid var(--teal); } .btn-quiet:hover { background: var(--teal-wash); } /* Sections */ .section { padding: 72px 0; } .section-alt { background: var(--sand); } .section-intro { color: var(--ink-soft); margin-top: 0; max-width: 620px; } /* Split rows — used for services, about and how-it-works */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .split-reverse .split-image { order: 2; } .split-image img { border-radius: 10px; } .split-text p { color: var(--ink-soft); } .split-text ul { padding-left: 20px; color: var(--ink-soft); } .split-text li { margin-bottom: 6px; } .steps { padding-left: 22px; color: var(--ink-soft); } .steps li { margin-bottom: 12px; } /* Service rows */ .service { align-items: start; margin-top: 56px; } .service .split-image { position: sticky; top: 100px; } .service h3 { font-size: 1.5rem; margin-bottom: 0.35rem; } .service h4 { color: var(--ink-soft); font-weight: 600; margin: 0 0 1.1rem; } .strap { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.95rem; color: var(--teal) !important; margin: 0 0 1rem; } .highlight { border-left: 3px solid var(--teal); padding-left: 16px; font-size: 0.96rem; } /* About — long text column, image stays alongside */ #about .split { grid-template-columns: 0.85fr 1.15fr; align-items: start; } #about .split-image { position: sticky; top: 100px; } #about h3 { margin-top: 1.8rem; color: var(--teal-dark); } #about h3:first-of-type { margin-top: 1rem; } /* FAQ */ .faq-group { margin: 40px 0 4px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal); } .faq { border-top: 1px solid var(--line); padding: 20px 0; } .faq p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; } .faq ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 0.96rem; } .faq li { margin-bottom: 8px; } .faq li:last-child { margin-bottom: 0; } /* Contact */ .contact { background: var(--contact-bg); color: var(--contact-text); } .contact h2, .contact h3 { color: var(--contact-heading); } .contact p { color: var(--contact-soft); } .contact a { color: var(--contact-link); } .contact .btn { background: var(--contact-btn-bg); color: var(--contact-btn-ink); word-break: break-word; } .contact .btn:hover { background: var(--contact-btn-hover); } .contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 36px 0 28px; } .contact-cols h3 { font-size: 1.1rem; } .contact-lines { font-size: 0.98rem; line-height: 1.9; } .small { font-size: 0.85rem; color: var(--contact-small); } /* Footer */ .site-footer { padding: 32px 0; background: var(--footer-bg); color: var(--footer-text); } .site-footer p { margin: 0 0 6px; font-size: 0.85rem; } .site-footer a { color: var(--footer-link); } .footer-address { color: var(--footer-address); font-size: 0.9rem !important; line-height: 1.7; margin-bottom: 14px !important; } /* Responsive */ @media (max-width: 900px) { .hero-inner, .split, #about .split, .contact-cols { grid-template-columns: 1fr; gap: 32px; } .split-reverse .split-image { order: 0; } /* sticky images only make sense beside a tall text column */ .service .split-image, #about .split-image { position: static; } .hero-image img, .caption { max-width: 300px; } h1 { font-size: 2rem; } .section, .hero-inner { padding-top: 48px; padding-bottom: 48px; } .service { margin-top: 48px; } } @media (max-width: 620px) { body { font-size: 17px; } /* stacked header is tall on phones — don't pin it to the top */ .site-header { position: static; } .header-inner { flex-direction: column; align-items: flex-start; } nav { gap: 14px; } }