/* ========================================================================== ITD site stylesheet ========================================================================== Part 2 Design tokens Part 3 Base styles Part 4 Shared header and footer Part 5 Components Part 6 Responsive and accessibility Part numbering starts at 2. Part 1 held the overrides needed while the home page was still a Framer export; that page is now hand-built like the rest, so the whole block was removed rather than left to rot. Every page carries .itd-page on and is styled entirely from here. Colour scheme ------------- Values carried over from the original design so the palette is unchanged: #0b0d0e page background #a6acae muted text #141719 raised surface #f5f5f2 primary text, off-white #1c2022 hover surface #d7ff3f lime accent #303638 border No glow ------- The accent is used as a flat colour only. There are deliberately no coloured box-shadows and no lime radial gradients anywhere in this file. Spacing ------- Vertical rhythm, gutters and grid gaps are all driven by clamp() so they scale continuously from a 320px phone to a large desktop, rather than snapping at a handful of breakpoints. The container widens on very large screens so line lengths stay comfortable instead of the layout stranding itself in the middle of a 2560px display. Iconography ----------- No decorative icons and no embedded graphics. Affordances such as the dropdown arrow, the menu button and list markers are drawn with CSS. ========================================================================== */ /* ========================================================================== PART 2 DESIGN TOKENS ========================================================================== */ :root { /* Surfaces */ --itd-bg: #0b0d0e; --itd-bg-alt: #141719; --itd-surface: #141719; --itd-surface-raised: #1c2022; --itd-surface-hover: #242a2c; --itd-surface-subtle: rgba(245, 245, 242, 0.04); /* Borders */ --itd-border: #303638; --itd-border-strong: #414a4d; /* Text */ --itd-text: #f5f5f2; --itd-text-muted: #a6acae; --itd-text-dim: #7d8587; /* Brand accent, flat, no glow */ --itd-accent: #d7ff3f; --itd-accent-hover: #e4ff70; --itd-accent-ink: #0b0d0e; /* readable text on the accent */ --itd-accent-soft: rgba(215, 255, 63, 0.10); --itd-accent-border: rgba(215, 255, 63, 0.30); /* Typography */ --itd-font-display: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --itd-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Fluid spacing. Vertical section rhythm: 2.5rem on a phone up to 7rem on a desktop. Gutter: 1rem on a phone up to 2.5rem on a desktop. Grid gap: 1rem up to 1.5rem. */ --itd-section-y: clamp(2.5rem, 6.5vw, 7rem); --itd-gutter: clamp(1rem, 3.5vw, 2.5rem); --itd-gap: clamp(1rem, 1.6vw, 1.5rem); /* Fixed spacing steps, for use inside components. */ --itd-space-1: 0.25rem; --itd-space-2: 0.5rem; --itd-space-3: 0.75rem; --itd-space-4: 1rem; --itd-space-5: 1.5rem; --itd-space-6: 2rem; --itd-space-7: 3rem; --itd-container: 1180px; --itd-radius: 10px; --itd-radius-lg: 16px; --itd-header-h: clamp(58px, 8vw, 72px); --itd-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Large desktops: widen the container and open the rhythm up a little so a 2560px screen does not leave a narrow column floating in the middle. */ @media (min-width: 1600px) { :root { --itd-container: 1340px; --itd-section-y: 7.5rem; } } @media (min-width: 2000px) { :root { --itd-container: 1480px; } } /* ========================================================================== PART 3 BASE, hand-built pages carry .itd-page on ========================================================================== */ .itd-page *, .itd-page *::before, .itd-page *::after { box-sizing: border-box; } html:has(.itd-page) { scroll-behavior: smooth; } .itd-page { margin: 0; padding: 0; background: var(--itd-bg); color: var(--itd-text); font-family: var(--itd-font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .itd-page h1, .itd-page h2, .itd-page h3, .itd-page h4 { font-family: var(--itd-font-display); font-weight: 600; line-height: 1.14; letter-spacing: -0.022em; margin: 0 0 0.5em; color: var(--itd-text); text-wrap: balance; } /* Type scale. Lower bounds are conservative so headings stay readable at 320px; upper bounds only engage on large screens. */ .itd-page h1 { font-size: clamp(1.95rem, 1.2rem + 3.4vw, 3.75rem); } .itd-page h2 { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem); } .itd-page h3 { font-size: clamp(1.12rem, 1rem + 0.6vw, 1.4rem); } .itd-page h4 { font-size: 1.0625rem; font-weight: 600; } .itd-page p { margin: 0 0 1.1em; color: var(--itd-text-muted); } .itd-page p:last-child { margin-bottom: 0; } /* Body links are accent coloured, but buttons must keep their own colours. Without the :not() this rule wins on specificity (0-1-1 against the 0-1-0 of .itd-btn--primary) and paints button labels in the accent colour, which on a primary button means lime text on a lime background. The label is still there, just invisible. */ .itd-page a:not(.itd-btn) { color: var(--itd-accent); text-decoration: none; } .itd-page a:not(.itd-btn):hover { text-decoration: underline; } .itd-page img, .itd-page video { max-width: 100%; height: auto; display: block; } .itd-page strong { color: var(--itd-text); font-weight: 600; } .itd-page hr { border: 0; border-top: 1px solid var(--itd-border); margin: var(--itd-space-7) 0; } .itd-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .itd-skip { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 2000; padding: 0.75rem 1.25rem; background: var(--itd-accent); color: var(--itd-accent-ink); font-weight: 600; border-radius: 0 0 10px 10px; transition: top 0.18s var(--itd-ease); } .itd-skip:focus { top: 0; text-decoration: none; } /* .itd-block A self-contained typographic scope. Used for a band that needs to set its own background and type without inheriting the surrounding page rules. */ .itd-block { background: var(--itd-bg); color: var(--itd-text); font-family: var(--itd-font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .itd-block *, .itd-block *::before, .itd-block *::after { box-sizing: border-box; } .itd-block h2, .itd-block h3, .itd-block h4 { font-family: var(--itd-font-display); font-weight: 600; line-height: 1.14; letter-spacing: -0.022em; margin: 0 0 0.5em; color: var(--itd-text); text-wrap: balance; } .itd-block h2 { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem); } .itd-block h3 { font-size: clamp(1.12rem, 1rem + 0.6vw, 1.4rem); } .itd-block h4 { font-size: 1.0625rem; } .itd-block p { margin: 0 0 1.1em; color: var(--itd-text-muted); } .itd-block p:last-child { margin-bottom: 0; } /* Same exclusion as .itd-page above, for the same specificity reason. */ .itd-block a:not(.itd-btn) { color: var(--itd-accent); text-decoration: none; } .itd-block a:not(.itd-btn):hover { text-decoration: underline; } .itd-block strong { color: var(--itd-text); font-weight: 600; } .itd-block img { max-width: 100%; display: block; } .itd-block ul { margin: 0; padding: 0; } /* ========================================================================== PART 4 LAYOUT, HEADER, FOOTER ========================================================================== */ .itd-container { width: 100%; max-width: var(--itd-container); margin: 0 auto; padding: 0 var(--itd-gutter); } .itd-section { padding: var(--itd-section-y) 0; } .itd-section--tight { padding: calc(var(--itd-section-y) * 0.55) 0; } .itd-section--alt { background: var(--itd-bg-alt); } .itd-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--itd-font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--itd-accent); margin: 0 0 var(--itd-space-4); } /* A rule, not an icon. */ .itd-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--itd-accent); flex: none; } .itd-lead { font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.15rem); color: var(--itd-text-muted); max-width: 62ch; } .itd-section-head { max-width: 740px; margin-bottom: clamp(1.75rem, 3.5vw, 3.25rem); } .itd-section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .itd-section-head--center .itd-lead { margin-left: auto; margin-right: auto; } .itd-section-head--center .itd-eyebrow { justify-content: center; } /* Header ------------------------------------------------------------------ */ .itd-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--itd-header-h); display: flex; align-items: center; background: rgba(11, 13, 14, 0.82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: background 0.25s var(--itd-ease), border-color 0.25s var(--itd-ease); font-family: var(--itd-font-body); } .itd-header.is-stuck { background: rgba(11, 13, 14, 0.96); border-bottom-color: var(--itd-border); } .itd-header__inner { width: 100%; max-width: var(--itd-container); margin: 0 auto; padding: 0 var(--itd-gutter); display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); } .itd-logo { display: inline-flex; align-items: baseline; gap: 0.5rem; color: var(--itd-text); font-family: var(--itd-font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.35rem); letter-spacing: -0.03em; text-decoration: none; flex: none; } .itd-logo:hover { text-decoration: none; } .itd-logo__mark { color: var(--itd-accent); } .itd-logo__sub { font-family: var(--itd-font-body); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.05em; color: var(--itd-text-dim); text-transform: uppercase; white-space: nowrap; } .itd-nav { margin-left: auto; } .itd-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.1rem; } .itd-nav__item { position: relative; } .itd-nav__link { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.75rem; border-radius: 8px; color: var(--itd-text-muted); font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; font-family: inherit; transition: color 0.16s, background 0.16s; } .itd-nav__link:hover { color: var(--itd-text); background: var(--itd-surface-subtle); text-decoration: none; } .itd-nav__link[aria-current="page"] { color: var(--itd-accent); font-weight: 600; } /* Dropdown indicator, drawn with CSS borders. */ .itd-nav__caret { width: 6px; height: 6px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--itd-ease); } .itd-nav__link[aria-expanded="true"] .itd-nav__caret { transform: translateY(1px) rotate(225deg); } .itd-nav__panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 280px; padding: 0.4rem; list-style: none; margin: 0; background: var(--itd-surface-raised); border: 1px solid var(--itd-border); border-radius: var(--itd-radius); box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.75); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s var(--itd-ease), transform 0.18s var(--itd-ease), visibility 0.18s; } .itd-nav__item.is-open .itd-nav__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .itd-nav__sublink { display: block; padding: 0.6rem 0.7rem; border-radius: 8px; color: var(--itd-text); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: background 0.16s; } .itd-nav__sublink:hover { background: var(--itd-surface-subtle); text-decoration: none; } .itd-nav__sublink span { display: block; font-size: 0.79rem; font-weight: 400; color: var(--itd-text-dim); margin-top: 0.1rem; } .itd-header .itd-btn { flex: none; } /* Menu button, drawn with CSS. */ .itd-burger { display: none; margin-left: auto; width: 42px; height: 42px; align-items: center; justify-content: center; background: var(--itd-surface-subtle); border: 1px solid var(--itd-border); border-radius: 9px; color: var(--itd-text); cursor: pointer; } .itd-burger__bars { width: 17px; height: 11px; position: relative; } .itd-burger__bars::before, .itd-burger__bars::after { content: ''; position: absolute; left: 0; right: 0; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform 0.22s var(--itd-ease), top 0.22s var(--itd-ease); } .itd-burger__bars::before { top: 0; } .itd-burger__bars::after { top: 9px; } .itd-burger[aria-expanded="true"] .itd-burger__bars::before { top: 5px; transform: rotate(45deg); } .itd-burger[aria-expanded="true"] .itd-burger__bars::after { top: 5px; transform: rotate(-45deg); } /* Footer ------------------------------------------------------------------ */ .itd-footer { background: var(--itd-bg-alt); border-top: 1px solid var(--itd-border); padding: clamp(2.25rem, 5vw, 4rem) 0 1.5rem; font-family: var(--itd-font-body); font-size: 0.92rem; } .itd-footer__grid { display: grid; /* Reflows on its own: 4 columns on desktop, 2 on tablet, 1 on phone. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: clamp(2rem, 4vw, 3rem); } /* Give the intro column more room once there is space for it. */ @media (min-width: 1000px) { .itd-footer__grid { grid-template-columns: 1.7fr repeat(3, 1fr); } } .itd-footer__about p { color: var(--itd-text-muted); font-size: 0.9rem; max-width: 36ch; margin: 0.9rem 0 0; } .itd-footer h4 { font-family: var(--itd-font-body); font-size: 0.71rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--itd-text-dim); margin: 0 0 1rem; } .itd-footer ul { list-style: none; margin: 0; padding: 0; } .itd-footer li { margin-bottom: 0.6rem; line-height: 1.5; } .itd-footer a { color: var(--itd-text-muted); text-decoration: none; } .itd-footer a:hover { color: var(--itd-accent); text-decoration: underline; } /* Address and office hours in the "Get in touch" column. These are plain text, not links, so they are stepped back from the link colour to keep the enquiry link as the obvious thing to click. */ .itd-footer__addr { color: var(--itd-text-muted); } .itd-footer__hours { color: var(--itd-text-dim); } .itd-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--itd-space-4); padding-top: var(--itd-space-5); border-top: 1px solid var(--itd-border); color: var(--itd-text-dim); font-size: 0.83rem; } .itd-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; } /* Social links render as text labels, not icons. */ .itd-footer__social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.1rem; font-size: 0.88rem; } /* Design credit. Sits inline with the legal links, so it inherits their size and colour and wraps with them on narrow screens. */ .itd-footer__credit { color: var(--itd-text-dim); } .itd-footer__credit a { color: var(--itd-text-dim); } .itd-footer__credit a:hover { color: var(--itd-accent); } /* ========================================================================== PART 5 COMPONENTS ========================================================================== */ /* Buttons ---------------------------------------------------------------- */ .itd-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.4rem; border: 1px solid transparent; border-radius: 999px; font-family: var(--itd-font-body); font-size: 0.92rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform 0.16s var(--itd-ease), background 0.16s, border-color 0.16s, color 0.16s; } .itd-btn:hover { text-decoration: none; transform: translateY(-1px); } .itd-btn:active { transform: translateY(0); } .itd-btn--primary { background: var(--itd-accent); color: var(--itd-accent-ink); } .itd-btn--primary:hover { background: var(--itd-accent-hover); } .itd-btn--ghost { background: transparent; border-color: var(--itd-border-strong); color: var(--itd-text); } .itd-btn--ghost:hover { background: var(--itd-surface-raised); border-color: var(--itd-accent); color: var(--itd-accent); } .itd-btn--sm { padding: 0.55rem 1.05rem; font-size: 0.85rem; } .itd-btn--lg { padding: 0.9rem 1.75rem; font-size: 0.97rem; } .itd-btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--itd-space-6); } /* Page hero -------------------------------------------------------------- */ .itd-hero { position: relative; padding: calc(var(--itd-header-h) + clamp(2rem, 5vw, 4.5rem)) 0 clamp(1.75rem, 4vw, 3.5rem); border-bottom: 1px solid var(--itd-border); background: var(--itd-bg); overflow: hidden; } .itd-hero__inner { position: relative; z-index: 2; max-width: 800px; } .itd-hero h1 { margin-bottom: 1rem; } /* Optional photographic hero. The scrim keeps text legible over any image without a coloured glow. */ .itd-hero--image .itd-hero__bg { position: absolute; inset: 0; z-index: 0; } .itd-hero--image .itd-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .itd-hero--image .itd-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(11, 13, 14, 0.95) 0%, rgba(11, 13, 14, 0.82) 45%, rgba(11, 13, 14, 0.55) 100% ); } /* Breadcrumbs ------------------------------------------------------------ */ .itd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 0 0 var(--itd-space-5); padding: 0; font-size: 0.81rem; color: var(--itd-text-dim); } .itd-crumbs a { color: var(--itd-text-dim); } .itd-crumbs a:hover { color: var(--itd-accent); text-decoration: none; } .itd-crumbs li + li::before { content: '/'; margin-right: 0.4rem; opacity: 0.5; } /* Cards and grids ------------------------------------------------------- auto-fit with a minimum column width means these reflow continuously at any viewport rather than relying on breakpoints. min() stops the track overflowing on very narrow phones. */ .itd-grid { display: grid; gap: var(--itd-gap); } .itd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); } .itd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); } .itd-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } /* Cap the columns on very wide screens so a 4-up grid does not become 6-up. */ @media (min-width: 1600px) { .itd-grid--2 { grid-template-columns: repeat(2, 1fr); } .itd-grid--3 { grid-template-columns: repeat(3, 1fr); } .itd-grid--4 { grid-template-columns: repeat(4, 1fr); } } .itd-card { background: var(--itd-surface); border: 1px solid var(--itd-border); border-radius: var(--itd-radius-lg); padding: clamp(1.2rem, 2.2vw, 1.75rem); transition: border-color 0.2s, transform 0.2s var(--itd-ease), background 0.2s; } .itd-card:hover { border-color: var(--itd-border-strong); background: var(--itd-surface-raised); transform: translateY(-2px); } .itd-card h3 { margin-bottom: 0.5rem; } .itd-card p { font-size: 0.93rem; margin: 0; } a.itd-card { display: block; color: inherit; } a.itd-card:hover { text-decoration: none; } a.itd-card h3 { color: var(--itd-text); } /* Text marker used instead of an illustrative icon. */ .itd-card__step { font-family: var(--itd-font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--itd-accent); margin: 0 0 0.6rem; } /* Card with a photograph at the top. */ .itd-card--media { padding: 0; overflow: hidden; } .itd-card--media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-bottom: 1px solid var(--itd-border); } .itd-card--media .itd-card__body { padding: clamp(1.2rem, 2.2vw, 1.75rem); } /* Split feature row ------------------------------------------------------ */ .itd-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 1600px) { .itd-split { grid-template-columns: repeat(2, 1fr); } } .itd-split__media { border: 1px solid var(--itd-border); border-radius: var(--itd-radius-lg); overflow: hidden; background: var(--itd-surface); } .itd-split__media img, .itd-split__media video { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; } /* Feature and spec list, marker is a CSS square --------------------------- */ .itd-list { list-style: none; margin: var(--itd-space-5) 0 0; padding: 0; } .itd-list li { position: relative; padding-left: 1.4rem; margin-bottom: 0.75rem; color: var(--itd-text-muted); font-size: 0.93rem; line-height: 1.55; } .itd-list li::before { content: ''; position: absolute; left: 0; top: 0.58em; width: 6px; height: 6px; background: var(--itd-accent); border-radius: 1px; } .itd-list strong { display: block; color: var(--itd-text); font-weight: 600; } /* Stat band -------------------------------------------------------------- */ .itd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 1px; background: var(--itd-border); border: 1px solid var(--itd-border); border-radius: var(--itd-radius-lg); overflow: hidden; } .itd-stat { background: var(--itd-bg); padding: clamp(1.2rem, 2.2vw, 1.6rem); } .itd-stat__value { font-family: var(--itd-font-display); font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; color: var(--itd-accent); line-height: 1; } .itd-stat__label { font-size: 0.84rem; color: var(--itd-text-dim); margin-top: 0.45rem; } /* Pill ------------------------------------------------------------------- */ .itd-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--itd-space-5); } .itd-pill { display: inline-flex; align-items: center; padding: 0.35rem 0.8rem; border: 1px solid var(--itd-border); border-radius: 999px; background: var(--itd-surface); font-size: 0.81rem; color: var(--itd-text-muted); } /* Call to action band, flat, no glow ------------------------------------- */ .itd-cta { border: 1px solid var(--itd-accent-border); border-radius: var(--itd-radius-lg); background: var(--itd-surface); padding: clamp(1.6rem, 4vw, 3rem); text-align: center; } .itd-cta h2 { margin-bottom: 0.6rem; } .itd-cta .itd-lead { margin: 0 auto; } .itd-cta .itd-btn-row { justify-content: center; } /* A centred section heading centres its button row too. Keeping this in the stylesheet rather than an inline style is what lets the site ship a Content Security Policy with no 'unsafe-inline'. */ .itd-section-head--center .itd-btn-row { justify-content: center; } /* Forms ------------------------------------------------------------------ */ /* Centred panel for a standalone form, used on the contact page. */ .itd-form-wrap { max-width: 760px; margin: 0 auto; padding: clamp(1.25rem, 3.5vw, 2.5rem); background: var(--itd-surface); border: 1px solid var(--itd-border); border-radius: var(--itd-radius-lg); } .itd-form__note { margin: 0; font-size: 0.85rem; color: var(--itd-text-dim); } .itd-form { display: grid; gap: var(--itd-space-4); } .itd-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--itd-space-4); } .itd-field { display: flex; flex-direction: column; gap: 0.4rem; } .itd-field label { font-size: 0.85rem; font-weight: 500; color: var(--itd-text); } .itd-field label .itd-req { color: var(--itd-accent); margin-left: 0.15rem; } .itd-field input, .itd-field select, .itd-field textarea { width: 100%; padding: 0.72rem 0.95rem; background: var(--itd-bg); border: 1px solid var(--itd-border); border-radius: 9px; color: var(--itd-text); font-family: var(--itd-font-body); /* 16px minimum stops iOS Safari zooming the page on focus. */ font-size: 1rem; transition: border-color 0.16s, background 0.16s; appearance: none; } .itd-field textarea { min-height: 140px; resize: vertical; } .itd-field input::placeholder, .itd-field textarea::placeholder { color: var(--itd-text-dim); } .itd-field input:focus, .itd-field select:focus, .itd-field textarea:focus { outline: none; border-color: var(--itd-accent); background: var(--itd-surface-raised); } /* Select arrow is a CSS triangle on the wrapper, so no graphic is needed. */ .itd-field--select { position: relative; } .itd-field--select::after { content: ''; position: absolute; right: 1rem; bottom: 1.2rem; width: 0; height: 0; pointer-events: none; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 5px solid var(--itd-text-muted); } .itd-field select { padding-right: 2.4rem; cursor: pointer; } .itd-field select option { background: var(--itd-surface-raised); color: var(--itd-text); } .itd-field--error input, .itd-field--error select, .itd-field--error textarea { border-color: #ff6b6b; } .itd-field__error { font-size: 0.8rem; color: #ff8787; min-height: 1em; } /* Honeypot: hidden from people, visible to naive bots. */ .itd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .itd-form__consent { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.87rem; color: var(--itd-text-muted); } .itd-form__consent input { width: 17px; height: 17px; margin: 0.2rem 0 0; flex: none; accent-color: var(--itd-accent); cursor: pointer; } .itd-form__status { padding: 0.85rem 1rem; border-radius: 9px; font-size: 0.9rem; display: none; } .itd-form__status.is-visible { display: block; } .itd-form__status--ok { background: var(--itd-accent-soft); border: 1px solid var(--itd-accent-border); color: var(--itd-accent); } .itd-form__status--err { background: rgba(255, 107, 107, 0.10); border: 1px solid rgba(255, 107, 107, 0.35); color: #ffc9c9; } .itd-btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; } /* Contact detail rows ---------------------------------------------------- */ .itd-contact-list { display: grid; gap: var(--itd-space-4); } .itd-contact-item { padding: 1.15rem 1.25rem; background: var(--itd-surface); border: 1px solid var(--itd-border); border-radius: var(--itd-radius); } .itd-contact-item h4 { font-family: var(--itd-font-body); font-size: 0.71rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--itd-text-dim); margin: 0 0 0.35rem; } .itd-contact-item p { margin: 0; color: var(--itd-text); font-size: 0.94rem; } .itd-contact-item a { color: var(--itd-text); } .itd-contact-item a:hover { color: var(--itd-accent); } /* Prose, used on the legal pages ---------------------------------------- */ .itd-prose { max-width: 74ch; } .itd-prose h2 { margin-top: var(--itd-space-7); font-size: clamp(1.28rem, 1.1rem + 0.8vw, 1.65rem); } .itd-prose h3 { margin-top: var(--itd-space-6); font-size: 1.07rem; } .itd-prose ul, .itd-prose ol { color: var(--itd-text-muted); padding-left: 1.35rem; } .itd-prose li { margin-bottom: 0.5rem; } .itd-prose table { width: 100%; border-collapse: collapse; margin: var(--itd-space-5) 0; font-size: 0.9rem; } .itd-prose th, .itd-prose td { text-align: left; padding: 0.7rem 0.85rem; border: 1px solid var(--itd-border); color: var(--itd-text-muted); } .itd-prose th { color: var(--itd-text); background: var(--itd-surface-raised); font-weight: 600; } .itd-prose__meta { font-size: 0.85rem; color: var(--itd-text-dim); padding-bottom: var(--itd-space-5); margin-bottom: var(--itd-space-6); border-bottom: 1px solid var(--itd-border); } /* Keep wide tables usable on narrow screens. */ .itd-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Figure with a natural aspect ratio ------------------------------------- Unlike .itd-split__media, which crops to a fixed 4:3, this frames a photograph at its own proportions. Used where the composition matters and cropping would spoil it, such as a side-by-side of two machines. */ .itd-figure { margin: var(--itd-space-6) 0 0; border: 1px solid var(--itd-border); border-radius: var(--itd-radius-lg); overflow: hidden; background: var(--itd-surface); } .itd-figure img { width: 100%; height: auto; display: block; } .itd-figure figcaption { padding: 0.7rem 1rem; font-size: 0.83rem; color: var(--itd-text-dim); border-top: 1px solid var(--itd-border); } /* Note / scope callout --------------------------------------------------- A short, deliberate statement such as a scope-of-service note. Accent tinted with a heavier left rule so it reads as a considered aside rather than an error message. No icon, in keeping with the rest of the site. */ .itd-note { margin-top: var(--itd-space-6); padding: clamp(1.15rem, 2.4vw, 1.7rem) clamp(1.2rem, 2.6vw, 1.85rem); background: var(--itd-accent-soft); border: 1px solid var(--itd-accent-border); border-left-width: 3px; border-radius: var(--itd-radius); } .itd-note h3 { font-size: 1.0625rem; margin: 0 0 0.4rem; } .itd-note p { margin: 0; font-size: 0.92rem; color: var(--itd-text-muted); } .itd-note p + p { margin-top: 0.5rem; } /* ========================================================================== PART 6 RESPONSIVE AND ACCESSIBILITY ========================================================================== */ /* Hide the descriptor beside the logo before it can collide with the nav. */ @media (max-width: 1100px) { .itd-logo__sub { display: none; } } /* Mobile and tablet navigation ------------------------------------------ The breakpoint is set at 900px so the menu collapses before the links start crowding on a portrait tablet. */ @media (max-width: 900px) { .itd-burger { display: inline-flex; } /* Hide the header's standalone call to action; the in-menu one takes over. */ .itd-header__inner > .itd-btn { display: none; } .itd-nav { position: fixed; top: var(--itd-header-h); left: 0; right: 0; bottom: 0; margin: 0; padding: 1.1rem var(--itd-gutter) 2.5rem; background: var(--itd-bg); border-top: 1px solid var(--itd-border); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform 0.26s var(--itd-ease), visibility 0.26s; } .itd-nav.is-open { transform: translateX(0); visibility: visible; } .itd-nav__list { flex-direction: column; align-items: stretch; gap: 0.1rem; } .itd-nav__link { width: 100%; justify-content: space-between; padding: 0.85rem 0.5rem; font-size: 1.02rem; border-radius: 9px; } .itd-nav__panel { position: static; transform: none; min-width: 0; opacity: 1; visibility: visible; pointer-events: auto; display: none; background: var(--itd-surface-subtle); border-color: transparent; box-shadow: none; margin: 0.1rem 0 0.4rem; } .itd-nav__item.is-open .itd-nav__panel { display: block; transform: none; } .itd-nav__cta { margin-top: 1.1rem; } .itd-nav__cta .itd-btn { width: 100%; } } /* Above the mobile breakpoint the in-menu call to action is redundant. */ @media (min-width: 901px) { .itd-nav__cta { display: none; } } /* Phones ---------------------------------------------------------------- */ @media (max-width: 600px) { .itd-footer__bottom { flex-direction: column; align-items: flex-start; } /* Full width buttons read better than two cramped pills. */ .itd-btn-row .itd-btn { width: 100%; } /* Tighten the hero so the heading is not pushed below the fold. */ .itd-hero { padding-bottom: 1.5rem; } } /* Focus visibility for keyboard users ----------------------------------- */ .itd-page a:focus-visible, .itd-page button:focus-visible, .itd-page input:focus-visible, .itd-page select:focus-visible, .itd-page textarea:focus-visible, .itd-block a:focus-visible, .itd-header a:focus-visible, .itd-header button:focus-visible, .itd-footer a:focus-visible { outline: 2px solid var(--itd-accent); outline-offset: 2px; border-radius: 6px; } /* Respect reduced motion preferences ------------------------------------ */ @media (prefers-reduced-motion: reduce) { html:has(.itd-page) { scroll-behavior: auto; } .itd-page *, .itd-block *, .itd-header *, .itd-footer * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Print ----------------------------------------------------------------- */ @media print { .itd-header, .itd-burger, .itd-nav, .itd-cta, .itd-skip { display: none !important; } .itd-page, .itd-block { background: #fff; color: #000; } .itd-card { border: 1px solid #ccc; } }