/* DataChassis — main stylesheet Design spec: planning/design.md ─────────────────────────────────────────────────────────────── */ @import './tokens.css'; /* Note: Google Fonts are loaded via in each HTML page's . Self-hosting copies is planned for a later iteration (privacy). */ /* ── Reset ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } img, svg, video { display: block; max-width: 100%; } ul, ol { list-style: none; } button { font-family: inherit; } /* ── Base ──────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.65; color: var(--colour-text); background: var(--colour-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--colour-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--colour-text); } /* Focus ring — visible on keyboard nav, hidden on mouse click */ :focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 3px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* ── Buttons ───────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 600; font-family: var(--font-sans); text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background-color 80ms ease, color 80ms ease, border-color 80ms ease, box-shadow 80ms ease; line-height: 1; white-space: nowrap; } /* Primary — solid cobalt blue */ .btn--primary { background: var(--colour-primary); color: var(--colour-text-inverse); border-color: var(--colour-primary); } .btn--primary:hover { background: var(--colour-primary-hover); border-color: var(--colour-primary-hover); text-decoration: none; } /* Secondary — white background, cobalt border and text */ .btn--secondary { background: var(--colour-bg); color: var(--colour-primary); border-color: var(--colour-primary); } .btn--secondary:hover { background: var(--colour-primary-light); text-decoration: none; } /* Light — white fill with cobalt text (hero and other dark sections) */ .btn--light { background: var(--colour-text-inverse); color: var(--colour-primary); border-color: var(--colour-text-inverse); } .btn--light:hover { background: var(--colour-primary-light); border-color: var(--colour-primary-light); text-decoration: none; } /* Ghost — transparent, white border and text (dark sections only) */ .btn--ghost { background: transparent; color: var(--colour-text-inverse); border-color: rgba(255, 255, 255, 0.45); } .btn--ghost:hover { border-color: var(--colour-text-inverse); background: rgba(255, 255, 255, 0.08); text-decoration: none; } .btn--sm { padding: 8px 16px; font-size: var(--text-sm); } /* ── Nav ───────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background: var(--colour-bg); border-bottom: 1px solid var(--colour-border); } .nav__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 8px; } .nav__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; margin-right: auto; } .nav__logo img { height: 30px; width: auto; } .nav__wordmark { font-size: var(--text-lg); font-weight: 700; color: var(--colour-text); letter-spacing: -0.02em; white-space: nowrap; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__link { display: block; padding: 6px 12px; font-size: var(--text-sm); font-weight: 500; color: var(--colour-text); text-decoration: none; border-radius: var(--radius-md); transition: color 80ms ease, background-color 80ms ease; } .nav__link:hover { color: var(--colour-primary); background: var(--colour-bg-subtle); text-decoration: none; } .nav__link--active { color: var(--colour-primary); } .nav__cta { margin-left: 16px; flex-shrink: 0; } /* ── Nav: hamburger (mobile) ───────────────────────────────────── */ .nav__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 8px; border-radius: var(--radius-md); transition: background-color 80ms ease; } .nav__hamburger:hover { background: var(--colour-bg-subtle); } .nav__hamburger span { display: block; width: 20px; height: 2px; background: var(--colour-text); border-radius: 2px; transition: transform 150ms ease, opacity 150ms ease; } /* ── Nav: mobile drawer ────────────────────────────────────────── */ .nav__drawer { display: none; position: fixed; inset: 0; background: var(--colour-bg); z-index: 200; flex-direction: column; padding: 0; overflow-y: auto; } .nav__drawer.is-open { display: flex; } .nav__drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; height: 64px; border-bottom: 1px solid var(--colour-border); } .nav__drawer-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; color: var(--colour-text); border-radius: var(--radius-md); font-size: 20px; line-height: 1; transition: background-color 80ms ease; } .nav__drawer-close:hover { background: var(--colour-bg-subtle); } .nav__drawer-links { display: flex; flex-direction: column; padding: 16px 16px 0; flex: 1; } .nav__drawer-link { display: block; font-size: var(--text-xl); font-weight: 600; color: var(--colour-text); text-decoration: none; padding: 14px 8px; border-bottom: 1px solid var(--colour-border); transition: color 80ms ease; } .nav__drawer-link:hover { color: var(--colour-primary); text-decoration: none; } .nav__drawer-cta { padding: 24px; border-top: 1px solid var(--colour-border); margin-top: auto; } .nav__drawer-cta .btn { width: 100%; } /* ── Responsive: nav ───────────────────────────────────────────── */ @media (max-width: 767px) { .nav__links, .nav__cta { display: none; } .nav__logo { margin-right: 0; } .nav__hamburger { display: flex; margin-left: auto; } } /* ── Hero ──────────────────────────────────────────────────────── */ .hero { background-color: var(--colour-bg-dark); /* Subtle dot-grid pattern */ background-image: radial-gradient( circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px ); background-size: 32px 32px; padding: 112px 24px 96px; text-align: center; } .hero__inner { max-width: var(--max-width-narrow); margin: 0 auto; } .hero h1 { font-size: var(--text-6xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: var(--colour-text-inverse); margin-bottom: 24px; } .hero__sub { font-size: var(--text-xl); line-height: 1.65; color: rgba(255, 255, 255, 0.72); margin-bottom: 40px; max-width: 580px; margin-left: auto; margin-right: auto; } .hero__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } @media (max-width: 767px) { .hero { padding: 80px 24px 64px; } .hero h1 { font-size: var(--text-5xl); } .hero__sub { font-size: var(--text-lg); } } @media (max-width: 480px) { .hero h1 { font-size: var(--text-4xl); } .hero__ctas { flex-direction: column; align-items: stretch; } .hero__ctas .btn { width: 100%; } } /* ── Footer ────────────────────────────────────────────────────── */ .footer { background: var(--colour-bg-dark); padding: 64px 24px 0; } .footer__inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start; } .footer__brand { display: flex; flex-direction: column; gap: 10px; } .footer__logo { display: inline-block; text-decoration: none; } .footer__logo img { height: 26px; width: auto; } .footer__wordmark { font-size: var(--text-lg); font-weight: 700; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.02em; white-space: nowrap; } .footer__tagline { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.4); font-style: italic; } .footer__cols { display: flex; gap: 56px; } .footer__col-heading { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); margin-bottom: 12px; } .footer__col-links { display: flex; flex-direction: column; gap: 8px; } .footer__col-link { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 80ms ease; } .footer__col-link:hover { color: var(--colour-text-inverse); text-decoration: none; } .footer__bottom { max-width: var(--max-width); margin: 40px auto 0; padding: 20px 0 24px; border-top: 1px solid var(--colour-border-dark); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.3); } /* Release version stamp — content is written by tools/package.sh --release */ .footer__version { margin-left: 10px; color: rgba(255, 255, 255, 0.18); } @media (max-width: 767px) { .footer__inner { grid-template-columns: 1fr; gap: 40px; } .footer__cols { gap: 32px; flex-wrap: wrap; } } /* ── How It Works ──────────────────────────────────────────────── */ .how-it-works { background: var(--colour-bg-dark); padding: var(--section-padding-y) 24px; } .how-it-works__inner { max-width: var(--max-width); margin: 0 auto; } .how-it-works__heading { font-size: var(--text-4xl); font-weight: 700; text-align: center; color: var(--colour-text-inverse); letter-spacing: -0.02em; margin-bottom: 72px; } .how-it-works__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; position: relative; } /* Connecting line between step circles */ .how-it-works__steps::after { content: ''; position: absolute; top: 24px; /* vertically centred on the 48px circles */ left: 16%; right: 16%; height: 1px; background: var(--colour-border-dark); pointer-events: none; } .how-it-works__step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; } .how-it-works__step-number { width: 48px; height: 48px; border-radius: 50%; background: var(--colour-bg-dark-alt); border: 1px solid var(--colour-border-dark); display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); font-weight: 700; color: var(--colour-primary-light); margin-bottom: 20px; flex-shrink: 0; } .how-it-works__step-content { flex: 1; } .how-it-works__step-title { font-size: var(--text-xl); font-weight: 700; color: var(--colour-text-inverse); margin-bottom: 10px; } .how-it-works__step-body { font-size: var(--text-base); line-height: 1.7; color: rgba(255, 255, 255, 0.65); } @media (max-width: 767px) { .how-it-works { padding: var(--section-padding-y-mob) 24px; } .how-it-works__heading { font-size: var(--text-3xl); margin-bottom: 48px; } .how-it-works__steps { grid-template-columns: 1fr; gap: 32px; } .how-it-works__steps::after { display: none; } .how-it-works__step { flex-direction: row; align-items: flex-start; text-align: left; gap: 20px; } .how-it-works__step-number { margin-bottom: 0; } } /* ── Features grid ─────────────────────────────────────────────── */ .features { background: var(--colour-bg); padding: var(--section-padding-y) 24px; } .features__inner { max-width: var(--max-width); margin: 0 auto; } .features__heading { font-size: var(--text-4xl); font-weight: 700; text-align: center; letter-spacing: -0.02em; margin-bottom: 64px; } .features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 56px; } .feature { display: flex; flex-direction: column; gap: 10px; } .feature__icon { width: 36px; height: 36px; color: var(--colour-primary); margin-bottom: 4px; } .feature__icon svg { width: 36px; height: 36px; } .feature__title { font-size: var(--text-lg); font-weight: 700; color: var(--colour-text); } .feature__body { font-size: var(--text-base); line-height: 1.65; color: var(--colour-text-secondary); } @media (max-width: 1023px) { .features__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } } @media (max-width: 767px) { .features { padding: var(--section-padding-y-mob) 24px; } .features__heading { font-size: var(--text-3xl); margin-bottom: 48px; } .features__grid { grid-template-columns: 1fr; gap: 32px; } } /* ── Credibility bar ───────────────────────────────────────────── */ .credibility-bar { background: var(--colour-bg-subtle); border-bottom: 1px solid var(--colour-border); padding: 20px 24px; text-align: center; } .credibility-bar__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--colour-text-secondary); margin-bottom: 10px; } .credibility-bar__tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: var(--text-sm); font-weight: 500; color: var(--colour-text-secondary); } .credibility-bar__tag { padding: 2px 12px; } .credibility-bar__sep { color: var(--colour-border); user-select: none; } /* ── Problem / Agitation ───────────────────────────────────────── */ .problem { background: var(--colour-bg); padding: var(--section-padding-y) 24px; } .problem__inner { max-width: var(--max-width); margin: 0 auto; } .problem__heading { font-size: var(--text-4xl); font-weight: 700; text-align: center; letter-spacing: -0.02em; max-width: 680px; margin: 0 auto 56px; } .problem__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .problem__col-icon { width: 40px; height: 40px; margin-bottom: 16px; } .problem__col-icon svg { width: 40px; height: 40px; } .problem__col--pain .problem__col-icon { color: var(--colour-accent); } .problem__col--promise .problem__col-icon { color: var(--colour-primary); } .problem__col-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--colour-text-secondary); margin-bottom: 12px; } .problem__col p { font-size: var(--text-lg); line-height: 1.75; color: var(--colour-text); } @media (max-width: 767px) { .problem { padding: var(--section-padding-y-mob) 24px; } .problem__heading { font-size: var(--text-3xl); margin-bottom: 40px; } .problem__cols { grid-template-columns: 1fr; gap: 40px; } } /* ── Avatar cards ──────────────────────────────────────────────── */ .avatars { background: var(--colour-bg-subtle); padding: var(--section-padding-y) 24px; } .avatars__inner { max-width: var(--max-width); margin: 0 auto; } .avatars__heading { font-size: var(--text-4xl); font-weight: 700; text-align: center; letter-spacing: -0.02em; margin-bottom: 12px; } .avatars__sub { font-size: var(--text-lg); color: var(--colour-text-secondary); text-align: center; margin-bottom: 56px; } .avatars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .avatar-card { background: var(--colour-bg); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); padding: var(--card-padding); display: flex; flex-direction: column; transition: transform 150ms ease, box-shadow 150ms ease; } .avatar-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 31, 92, 0.09); } .avatar-card__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--colour-primary-light); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--colour-primary); flex-shrink: 0; } .avatar-card__icon svg { width: 24px; height: 24px; } .avatar-card__title { font-size: var(--text-xl); font-weight: 700; color: var(--colour-text); margin-bottom: 12px; } .avatar-card__body { font-size: var(--text-base); line-height: 1.7; color: var(--colour-text); flex: 1; margin-bottom: 24px; } .avatar-card__body p + p { margin-top: 10px; } .avatar-card__link { font-size: var(--text-sm); font-weight: 600; color: var(--colour-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: gap 80ms ease; margin-top: auto; } .avatar-card__link:hover { text-decoration: underline; gap: 8px; } @media (max-width: 1023px) { .avatars__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } } @media (max-width: 767px) { .avatars { padding: var(--section-padding-y-mob) 24px; } .avatars__heading { font-size: var(--text-3xl); margin-bottom: 8px; } .avatars__sub { margin-bottom: 40px; } } /* ── Newsletter ─────────────────────────────────────────────────── */ .newsletter { background: var(--colour-bg-dark); padding: var(--section-padding-y) 24px; text-align: center; } .newsletter__inner { max-width: var(--max-width-tight); margin: 0 auto; } .newsletter__heading { font-size: var(--text-4xl); font-weight: 700; color: var(--colour-text-inverse); letter-spacing: -0.02em; margin-bottom: 16px; } .newsletter__sub { font-size: var(--text-lg); line-height: 1.65; color: rgba(255, 255, 255, 0.65); margin-bottom: 36px; } .newsletter-form__row { display: flex; gap: 12px; justify-content: center; } .newsletter-form__input { flex: 1; max-width: 320px; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: var(--colour-text-inverse); font-family: var(--font-sans); font-size: var(--text-base); transition: border-color 80ms ease, background-color 80ms ease; } .newsletter-form__input::placeholder { color: rgba(255, 255, 255, 0.35); } .newsletter-form__input:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); } .newsletter-form__note { margin-top: 14px; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.35); } @media (max-width: 767px) { .newsletter { padding: var(--section-padding-y-mob) 24px; } .newsletter__heading { font-size: var(--text-3xl); } } @media (max-width: 480px) { .newsletter-form__row { flex-direction: column; align-items: stretch; } .newsletter-form__input { max-width: none; } } /* ── Final CTA ──────────────────────────────────────────────────── */ .final-cta { background: var(--colour-bg-subtle); padding: var(--section-padding-y) 24px; text-align: center; } .final-cta__inner { max-width: var(--max-width-tight); margin: 0 auto; } .final-cta__heading { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; } .final-cta__sub { font-size: var(--text-lg); line-height: 1.65; color: var(--colour-text-secondary); margin-bottom: 36px; max-width: 500px; margin-left: auto; margin-right: auto; } @media (max-width: 767px) { .final-cta { padding: var(--section-padding-y-mob) 24px; } .final-cta__heading { font-size: var(--text-3xl); } } /* ── How It Works page ──────────────────────────────────────────── */ .hiw-section { padding: var(--section-padding-y) 24px; } .hiw-section--light { background: var(--colour-bg); } .hiw-section--subtle { background: var(--colour-bg-subtle); } .hiw-section--dark { background: var(--colour-bg-dark); } .hiw-section__inner { max-width: var(--max-width-narrow); margin: 0 auto; } /* Step layout: large number on the left, content on the right */ .hiw-section__inner--step { display: grid; grid-template-columns: 72px 1fr; gap: 48px; align-items: start; } .hiw-step-number { width: 64px; height: 64px; border-radius: 50%; background: var(--colour-primary-light); border: 2px solid var(--colour-primary); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); font-weight: 800; color: var(--colour-primary); flex-shrink: 0; margin-top: 6px; /* align baseline with eyebrow text */ } /* Step number on subtle bg — give it a white inner */ .hiw-section--subtle .hiw-step-number { background: var(--colour-bg); } .hiw-section__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--colour-primary); margin-bottom: 8px; } .hiw-section__eyebrow--light { color: rgba(255, 255, 255, 0.5); } .hiw-section__heading { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; color: var(--colour-text); margin-bottom: 24px; } .hiw-section__heading--light { color: var(--colour-text-inverse); } .hiw-section__lead { font-size: var(--text-xl); line-height: 1.65; color: var(--colour-text-secondary); margin-bottom: 40px; } .hiw-section__body { display: flex; flex-direction: column; gap: 16px; } .hiw-section__body p { font-size: var(--text-lg); line-height: 1.75; color: var(--colour-text); } .hiw-section__body--light p { color: rgba(255, 255, 255, 0.7); } .hiw-section__body--two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 8px; } .hiw-section__callout { margin-top: 32px; font-size: var(--text-xl); font-weight: 700; color: var(--colour-primary); } /* Security feature grid */ .hiw-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 56px; } .hiw-feature { display: flex; flex-direction: column; gap: 8px; } .hiw-feature__icon { width: 40px; height: 40px; color: var(--colour-primary); margin-bottom: 4px; } .hiw-feature__icon svg { width: 40px; height: 40px; } .hiw-feature__title { font-size: var(--text-lg); font-weight: 700; color: var(--colour-text); } .hiw-feature__body { font-size: var(--text-base); line-height: 1.65; color: var(--colour-text-secondary); } /* Dual CTA at the bottom of the page */ .hiw-cta { background: var(--colour-bg-subtle); padding: var(--section-padding-y) 24px; } .hiw-cta__inner { max-width: var(--max-width-narrow); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .hiw-cta__card { display: flex; flex-direction: column; gap: 12px; padding: 32px 40px; } .hiw-cta__divider { width: 1px; height: 120px; background: var(--colour-border); flex-shrink: 0; } .hiw-cta__card-heading { font-size: var(--text-2xl); font-weight: 700; color: var(--colour-text); } .hiw-cta__card-body { font-size: var(--text-base); line-height: 1.65; color: var(--colour-text-secondary); flex: 1; margin-bottom: 4px; } /* Responsive */ @media (max-width: 1023px) { .hiw-section__body--two-col { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 767px) { .hiw-section { padding: var(--section-padding-y-mob) 24px; } .hiw-section__inner--step { grid-template-columns: 1fr; gap: 20px; } .hiw-step-number { width: 48px; height: 48px; font-size: var(--text-xl); margin-top: 0; } .hiw-section__heading { font-size: var(--text-3xl); } .hiw-feature-grid { grid-template-columns: 1fr; gap: 24px; } .hiw-cta { padding: var(--section-padding-y-mob) 24px; } .hiw-cta__inner { grid-template-columns: 1fr; } .hiw-cta__divider { width: 100%; height: 1px; } .hiw-cta__card { padding: 32px 0; } } /* ── Page hero (inner pages) ────────────────────────────────────── */ .page-hero { background: var(--colour-bg-dark); padding: 72px 24px 64px; text-align: center; } .page-hero__inner { max-width: var(--max-width-tight); margin: 0 auto; } .page-hero h1 { font-size: var(--text-5xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: var(--colour-text-inverse); margin-bottom: 16px; } .page-hero__sub { font-size: var(--text-xl); line-height: 1.65; color: rgba(255, 255, 255, 0.65); } @media (max-width: 767px) { .page-hero { padding: 56px 24px 48px; } .page-hero h1 { font-size: var(--text-4xl); } .page-hero__sub { font-size: var(--text-lg); } } /* ── Booking section ────────────────────────────────────────────── */ .booking { background: var(--colour-bg); padding: var(--section-padding-y) 24px; } .booking__inner { max-width: var(--max-width); margin: 0 auto; } .booking__heading { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; } .booking__sub { font-size: var(--text-lg); color: var(--colour-text-secondary); margin-bottom: 48px; } .booking__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .booking-card { border: 1px solid var(--colour-border); border-radius: var(--radius-lg); padding: var(--card-padding); display: flex; flex-direction: column; gap: 12px; } .booking-card__meta { display: flex; align-items: center; gap: 10px; } .booking-card__badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--colour-primary-light); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--colour-primary); } .booking-card__title { font-size: var(--text-2xl); font-weight: 700; color: var(--colour-text); } .booking-card__body { font-size: var(--text-base); line-height: 1.7; color: var(--colour-text-secondary); } .booking-card__cal { flex: 1; min-height: 650px; margin-top: 4px; border-radius: var(--radius-md); overflow: hidden; } @media (max-width: 1023px) { .booking__grid { grid-template-columns: 1fr; max-width: 640px; } } @media (max-width: 767px) { .booking { padding: var(--section-padding-y-mob) 24px; } .booking__heading { font-size: var(--text-3xl); } .booking__sub { margin-bottom: 32px; } } /* ── Contact divider ────────────────────────────────────────────── */ .contact-divider { display: flex; align-items: center; justify-content: center; padding: 0 24px; background: var(--colour-bg); } .contact-divider::before, .contact-divider::after { content: ''; flex: 1; max-width: 200px; height: 1px; background: var(--colour-border); } .contact-divider__text { padding: 0 20px; font-size: var(--text-sm); font-weight: 600; color: var(--colour-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; } /* ── Contact form section ───────────────────────────────────────── */ .contact-form-section { background: var(--colour-bg); padding: var(--section-padding-y) 24px; } .contact-form-section__inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; } .contact-form-section__heading { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; } .contact-form-section__sub { font-size: var(--text-base); line-height: 1.7; color: var(--colour-text-secondary); margin-bottom: 40px; } .contact-direct__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--colour-text-secondary); margin-bottom: 8px; } .contact-direct__email { font-size: var(--text-lg); font-weight: 600; color: var(--colour-primary); text-decoration: none; word-break: break-all; } .contact-direct__email:hover { text-decoration: underline; } /* Form elements */ .contact-form { display: flex; flex-direction: column; gap: 20px; } .form-row { display: flex; flex-direction: column; gap: 20px; } .form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: var(--text-sm); font-weight: 600; color: var(--colour-text); } .form-required { color: var(--colour-accent); } .form-optional { font-weight: 400; color: var(--colour-text-secondary); } .form-input, .form-textarea { padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--colour-border); background: var(--colour-bg); color: var(--colour-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; transition: border-color 80ms ease, box-shadow 80ms ease; width: 100%; } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--colour-primary); box-shadow: 0 0 0 3px var(--colour-primary-light); } .form-input::placeholder, .form-textarea::placeholder { color: var(--colour-text-secondary); opacity: 0.7; } .form-textarea { resize: vertical; min-height: 120px; } .form-notice { margin-bottom: 20px; padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.6; } .form-notice--success { background: #e8f5ec; border: 1px solid #9fd4ae; color: #1a6b33; } .form-notice--error { background: #fdeeea; border: 1px solid #f0b5a6; color: #a83214; } /* Honeypot container — off-screen, not display:none, so bots still fill it */ .form-trap { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 1023px) { .contact-form-section__inner { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 767px) { .contact-form-section { padding: var(--section-padding-y-mob) 24px; } .form-row--two { grid-template-columns: 1fr; } .contact-form-section__heading { font-size: var(--text-2xl); } } /* ── What to expect ─────────────────────────────────────────────── */ .what-to-expect { background: var(--colour-bg-subtle); padding: var(--section-padding-y) 24px; } .what-to-expect__inner { max-width: var(--max-width); margin: 0 auto; } .what-to-expect__heading { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 48px; } .what-to-expect__items { display: flex; flex-direction: column; gap: 32px; } .wte-item { display: flex; gap: 20px; align-items: flex-start; } .wte-item__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--colour-primary-light); display: flex; align-items: center; justify-content: center; color: var(--colour-primary); flex-shrink: 0; } .wte-item__icon svg { width: 24px; height: 24px; } .wte-item__title { font-size: var(--text-lg); font-weight: 700; color: var(--colour-text); margin-bottom: 6px; } .wte-item__body { font-size: var(--text-base); line-height: 1.7; color: var(--colour-text-secondary); } @media (max-width: 767px) { .what-to-expect { padding: var(--section-padding-y-mob) 24px; } .what-to-expect__heading { font-size: var(--text-3xl); margin-bottom: 32px; } } /* ── Pricing page ───────────────────────────────────────────────── */ .pricing-model { background: var(--colour-bg-dark); padding: var(--section-padding-y) 24px; } .pricing-model__inner { max-width: var(--max-width-narrow); margin: 0 auto; } .pricing-model__intro { margin-bottom: 48px; } .pricing-model__heading { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; color: var(--colour-text-inverse); margin-bottom: 16px; } .pricing-model__sub { font-size: var(--text-xl); line-height: 1.65; color: rgba(255, 255, 255, 0.65); } .pricing-usp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 48px; } .pricing-usp-item { display: flex; align-items: flex-start; gap: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--colour-border-dark); border-radius: var(--radius-lg); padding: 20px; } .pricing-usp-item__check { color: var(--colour-primary-light); font-size: var(--text-xl); font-weight: 700; line-height: 1.4; flex-shrink: 0; } .pricing-usp-item p { font-size: var(--text-base); line-height: 1.6; color: rgba(255, 255, 255, 0.8); } .pricing-model__tagline { font-size: var(--text-2xl); font-weight: 700; color: var(--colour-text-inverse); text-align: center; letter-spacing: -0.01em; margin-bottom: 8px; line-height: 1.4; } .pricing-model__tagline span { color: rgba(255, 255, 255, 0.5); font-weight: 400; font-size: var(--text-lg); } .pricing-unit { margin-top: 40px; border: 1px solid var(--colour-border-dark); border-radius: var(--radius-lg); padding: 28px 32px; text-align: center; } .pricing-unit__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-bottom: 12px; } .pricing-unit__spec { display: flex; justify-content: center; align-items: center; gap: 16px; font-size: var(--text-2xl); font-weight: 700; color: var(--colour-text-inverse); margin-bottom: 12px; flex-wrap: wrap; } .pricing-unit__sep { color: rgba(255, 255, 255, 0.25); } .pricing-unit__note { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.4); } /* Plan tiers */ .pricing-tiers { background: var(--colour-bg-subtle); padding: var(--section-padding-y) 24px; } .pricing-tiers__inner { max-width: var(--max-width); margin: 0 auto; } .pricing-tiers__heading { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; } .pricing-tiers__sub { font-size: var(--text-lg); color: var(--colour-text-secondary); margin-bottom: 56px; } .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .plan-card { background: var(--colour-bg); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 24px; position: relative; } .plan-card--featured { border-color: var(--colour-primary); box-shadow: 0 0 0 1px var(--colour-primary); } .plan-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--colour-primary); color: var(--colour-text-inverse); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 14px; border-radius: var(--radius-pill); white-space: nowrap; } .plan-card__name { font-size: var(--text-2xl); font-weight: 700; color: var(--colour-text); margin-bottom: 4px; } .plan-card__price { font-size: var(--text-base); color: var(--colour-text-secondary); margin-bottom: 6px; } .plan-card__price strong { color: var(--colour-text); } .plan-card__tagline { font-size: var(--text-sm); color: var(--colour-text-secondary); line-height: 1.5; } .plan-card__features { display: flex; flex-direction: column; gap: 10px; flex: 1; } .plan-card__features li { font-size: var(--text-sm); color: var(--colour-text); padding-left: 20px; position: relative; line-height: 1.5; } .plan-card__features li::before { content: '✓'; position: absolute; left: 0; color: var(--colour-primary); font-weight: 700; } /* FAQ */ .pricing-faq { background: var(--colour-bg); padding: var(--section-padding-y) 24px; } .pricing-faq__inner { max-width: var(--max-width-narrow); margin: 0 auto; } .pricing-faq__heading { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 48px; } .faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--colour-border); } .faq-item { border-bottom: 1px solid var(--colour-border); } .faq-item__question { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: var(--text-lg); font-weight: 600; color: var(--colour-text); cursor: pointer; list-style: none; gap: 16px; } .faq-item__question::-webkit-details-marker { display: none; } .faq-item__question::after { content: '+'; font-size: var(--text-2xl); font-weight: 300; color: var(--colour-text-secondary); flex-shrink: 0; transition: transform 150ms ease; line-height: 1; } .faq-item[open] .faq-item__question::after { transform: rotate(45deg); } .faq-item__answer { padding: 0 0 20px; display: flex; flex-direction: column; gap: 12px; } .faq-item__answer p { font-size: var(--text-base); line-height: 1.7; color: var(--colour-text-secondary); } @media (max-width: 767px) { .pricing-model, .pricing-tiers, .pricing-faq { padding: var(--section-padding-y-mob) 24px; } .pricing-model__heading, .pricing-tiers__heading, .pricing-faq__heading { font-size: var(--text-3xl); } .pricing-usp-grid { grid-template-columns: 1fr; } .plan-grid { grid-template-columns: 1fr; max-width: 480px; } } @media (max-width: 1023px) { .plan-grid { grid-template-columns: 1fr; max-width: 480px; } } /* ── About page ─────────────────────────────────────────────────── */ .about-section { padding: var(--section-padding-y) 24px; } .about-section--light { background: var(--colour-bg); } .about-section--subtle { background: var(--colour-bg-subtle); } .about-section--dark { background: var(--colour-bg-dark); } .about-section__inner { max-width: var(--max-width-narrow); margin: 0 auto; } .about-section__inner--narrow { max-width: 580px; } .about-section__heading { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; color: var(--colour-text); margin-bottom: 24px; } .about-section__body { display: flex; flex-direction: column; gap: 16px; } .about-section__body p { font-size: var(--text-lg); line-height: 1.75; color: var(--colour-text); } /* Team */ .team-grid { display: flex; flex-direction: column; gap: 40px; } .team-member { display: flex; gap: 32px; align-items: flex-start; } .team-member__photo { flex-shrink: 0; } .team-member__photo img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; } .team-member__photo-placeholder { width: 96px; height: 96px; border-radius: 50%; background: var(--colour-bg-subtle); border: 2px dashed var(--colour-border); } .team-member__name { font-size: var(--text-xl); font-weight: 700; color: var(--colour-text); margin-bottom: 2px; } .team-member__role { font-size: var(--text-sm); font-weight: 600; color: var(--colour-primary); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; } .team-member__bio { font-size: var(--text-base); line-height: 1.7; color: var(--colour-text-secondary); } /* Values */ .values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 56px; } .value-item__name { font-size: var(--text-xl); font-weight: 700; color: var(--colour-text-inverse); margin-bottom: 8px; } .value-item__body { font-size: var(--text-base); line-height: 1.7; color: rgba(255, 255, 255, 0.65); } /* Company details */ .about-details { display: flex; flex-direction: column; gap: 20px; } .about-detail { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: baseline; } .about-detail__label { font-size: var(--text-sm); font-weight: 600; color: var(--colour-text-secondary); } .about-detail__value { font-size: var(--text-base); color: var(--colour-text); line-height: 1.5; } .about-detail__value a { color: var(--colour-primary); } @media (max-width: 767px) { .about-section { padding: var(--section-padding-y-mob) 24px; } .about-section__heading { font-size: var(--text-3xl); } .team-member { flex-direction: column; gap: 20px; } .values-grid { grid-template-columns: 1fr; gap: 24px; } .about-detail { grid-template-columns: 1fr; gap: 4px; } } /* ── Privacy page ───────────────────────────────────────────────── */ .page-hero--compact { padding: 48px 24px; } .page-hero--compact .page-hero__sub { font-size: var(--text-base); color: rgba(255, 255, 255, 0.4); } .privacy-content { background: var(--colour-bg); padding: var(--section-padding-y) 24px; } .privacy-content__inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; } .privacy-section h2 { font-size: var(--text-2xl); font-weight: 700; color: var(--colour-text); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--colour-border); } .privacy-section p, .privacy-section li { font-size: var(--text-base); line-height: 1.75; color: var(--colour-text); margin-bottom: 12px; } .privacy-section ul, .privacy-section ol { padding-left: 24px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .privacy-section ul { list-style: disc; } .privacy-section ol { list-style: decimal; } .privacy-section ol[type="a"] { list-style: lower-alpha; } .privacy-section ol[type="i"] { list-style: lower-roman; } .privacy-section a { color: var(--colour-primary); } .privacy-section strong { font-weight: 600; color: var(--colour-text); } .privacy-section table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; } .privacy-section th, .privacy-section td { border: 1px solid var(--colour-border); padding: 10px 14px; text-align: left; vertical-align: top; font-size: var(--text-sm); line-height: 1.65; } .privacy-section th { background: var(--colour-bg-subtle); font-weight: 600; } .privacy-section td p { font-size: var(--text-sm); margin-bottom: 10px; } .privacy-section td p:last-child { margin-bottom: 0; } @media (max-width: 767px) { .privacy-content { padding: var(--section-padding-y-mob) 24px; } .privacy-section th, .privacy-section td { padding: 8px 10px; } } /* ── Accessibility helpers ──────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }