/* =========================================================================== All Training Solutions Ltd Written for this site. Palette taken from the client's own logo: the blue background and yellow head mark. Light theme on purpose. This is workplace training, not security, so it should read approachable and clinical rather than dark and heavy. Mobile first. Media queries only ever step UP with min-width. =========================================================================== */ /* ---- Tokens ------------------------------------------------------------- */ :root { /* From the logo */ --blue: #2f7fd4; --blue-dark: #1f5da0; --blue-deep: #143f6e; --blue-tint: #eaf3fd; --yellow: #f6d84f; --yellow-soft: #fdf6d8; --ink: #16202b; --body: #46586b; --muted: #74869a; --line: #dfe6ee; --line-soft: #eef2f7; --bg: #ffffff; --bg-alt: #f6f9fc; /* Surfaces that flip between themes */ --surface: #ffffff; --surface-strong: rgba(255, 255, 255, .95); --header-bg: rgba(255, 255, 255, .93); --ok: #1f8a5b; --alert: #c8492f; color-scheme: light; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --radius: 10px; --radius-lg: 18px; --container: 1140px; --header-h: 78px; --shadow-sm: 0 2px 8px rgba(20, 63, 110, .06); --shadow: 0 12px 30px -14px rgba(20, 63, 110, .28); --shadow-lg: 0 24px 60px -28px rgba(20, 63, 110, .4); } /* ---- Dark theme --------------------------------------------------------- Set by a small script in before the page paints, so there is no flash of the light theme. The user's choice is remembered; if they have never chosen, we follow their operating system. Only colour tokens change. No layout, no sizes, nothing structural. */ :root[data-theme="dark"] { --blue: #4d97e8; --blue-dark: #7ab6f2; /* on dark, hover goes lighter not darker */ --blue-deep: #0a1420; --blue-tint: #16293c; --yellow: #f6d84f; --yellow-soft: #2b2614; --ink: #eaf1f8; --body: #b0c0d0; --muted: #7e90a3; --line: #253444; --line-soft: #1a2634; --bg: #0d151e; --bg-alt: #121c27; --surface: #16212e; --surface-strong: rgba(22, 33, 46, .95); --header-bg: rgba(13, 21, 30, .9); --ok: #3fbd83; --alert: #ef7f68; --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3); --shadow: 0 12px 30px -14px rgba(0, 0, 0, .6); --shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, .8); color-scheme: dark; } /* The footer and callout are already dark blue in the light theme. In dark mode they would vanish into the page, so lift them slightly instead. */ :root[data-theme="dark"] .site-footer, :root[data-theme="dark"] .callout, :root[data-theme="dark"] .section--blue { background: #0a1420; } :root[data-theme="dark"] .site-footer { border-top: 1px solid var(--line); } /* The logo is a blue tile with white type, so it needs no inversion, but it does need a touch of separation from a dark header. */ :root[data-theme="dark"] .nav__logo img, :root[data-theme="dark"] .footer__brand img { box-shadow: 0 0 0 1px var(--line); } /* ---- Theme toggle -------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--body); cursor: pointer; transition: border-color .18s, color .18s, background-color .18s, transform .18s; } .theme-toggle:hover { border-color: var(--blue); color: var(--blue); transform: rotate(-15deg); } .theme-toggle svg { width: 19px; height: 19px; } /* Show the sun in dark mode, the moon in light mode: the icon shows what you will get, not what you have. */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .nav__actions { display: flex; align-items: center; gap: var(--s3); } /* ---- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s5)); -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--body); font-family: var(--font); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; } h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); } h2 { font-size: clamp(1.55rem, 3.8vw, 2.35rem); } h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); } p { text-wrap: pretty; } a { color: var(--blue-dark); text-underline-offset: 3px; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--yellow); color: var(--ink); } /* ---- Layout ------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s5); } .container--narrow { max-width: 820px; } .section { padding-block: var(--s8); } .section--tight { padding-block: var(--s7); } .section--alt { background: var(--bg-alt); } .section--blue { background: var(--blue-deep); color: #dce8f4; } .section--blue h2, .section--blue h3 { color: #fff; } .section__head { max-width: 62ch; margin-bottom: var(--s6); } .section__head--center { margin-inline: auto; text-align: center; } .section__title { margin-bottom: var(--s3); } .section__lead { color: var(--muted); font-size: 1.05rem; } .section--blue .section__lead { color: #a9c4de; } .eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: var(--s3); } .section--blue .eyebrow { color: var(--yellow); } @media (min-width: 768px) { .section { padding-block: var(--s9); } .section--tight { padding-block: var(--s8); } } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: .9rem 1.7rem; border: 2px solid transparent; border-radius: 999px; font-family: var(--font); font-size: .96rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: none; } .btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: var(--shadow); } .btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); } .btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); } .btn--ghost:hover { border-color: var(--blue); color: var(--blue-dark); } .btn--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--ink); } .btn--yellow:hover { background: #f0cd2e; border-color: #f0cd2e; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); } /* ---- Header ------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: var(--header-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; } .site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); width: 100%; } .nav__logo { display: flex; flex-shrink: 0; } .nav__logo img { height: 50px; width: auto; border-radius: 6px; } .nav__links { display: none; align-items: center; gap: var(--s5); list-style: none; padding: 0; } .nav__link { color: var(--body); font-size: .93rem; font-weight: 600; text-decoration: none; padding-block: var(--s2); border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; } .nav__link:hover { color: var(--blue-dark); } .nav__link.is-current { color: var(--blue-dark); border-bottom-color: var(--blue); } /* Dropdown, opens on hover and on keyboard focus, no JavaScript needed */ .nav__item { position: relative; } .nav__caret { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .2s; } .nav__menu { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); min-width: 290px; margin: 0; padding: var(--s2); list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; z-index: 10; } /* Bridge the gap so the menu does not close as the pointer travels to it */ .nav__item::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; } .nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 10px); } .nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); } .nav__menu a { display: block; padding: .6rem .85rem; border-radius: 7px; color: var(--body); font-size: .9rem; font-weight: 500; text-decoration: none; transition: background-color .15s, color .15s; } .nav__menu a:hover, .nav__menu a:focus-visible { background: var(--blue-tint); color: var(--blue-dark); } .nav__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 9px; background: none; border: 0; cursor: pointer; } .nav__toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__drawer { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s4) var(--s5) var(--s6); display: grid; gap: var(--s1); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; box-shadow: var(--shadow); } .nav__drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .nav__drawer a { display: block; padding: var(--s3) var(--s2); color: var(--ink); text-decoration: none; font-size: 1.02rem; font-weight: 600; border-bottom: 1px solid var(--line-soft); } .nav__drawer a.is-sub { padding-left: var(--s5); font-size: .95rem; font-weight: 500; color: var(--body); } .nav__drawer-label { display: block; padding: var(--s4) var(--s2) var(--s2); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .nav__drawer .btn { margin-top: var(--s4); } @media (min-width: 1000px) { .nav__links { display: flex; } .nav__toggle, .nav__drawer { display: none; } } /* ---- Hero --------------------------------------------------------------- */ .hero { position: relative; padding-top: calc(var(--header-h) + var(--s7)); padding-bottom: var(--s7); background: radial-gradient(60% 60% at 12% 0%, var(--blue-tint), transparent 70%), radial-gradient(50% 50% at 95% 10%, var(--yellow-soft), transparent 70%); } .hero__grid { display: grid; gap: var(--s7); align-items: center; } .hero__title { margin-bottom: var(--s4); } .hero__title em { font-style: normal; color: var(--blue); } .hero__lead { font-size: 1.1rem; max-width: 54ch; } .hero__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__badge { position: absolute; left: var(--s5); bottom: var(--s5); display: flex; align-items: center; gap: var(--s3); padding: .7rem 1.1rem; background: var(--surface-strong); border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--ink); box-shadow: var(--shadow); } .hero__badge svg { width: 18px; height: 18px; stroke: var(--ok); flex: 0 0 auto; } @media (min-width: 960px) { .hero { padding-top: calc(var(--header-h) + var(--s8)); padding-bottom: var(--s8); } .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: stretch; } .hero__media { aspect-ratio: auto; min-height: 430px; } } /* ---- Trust strip -------------------------------------------------------- */ .trust { border-block: 1px solid var(--line); background: var(--bg); padding-block: var(--s5); } .trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s4) var(--s6); } .trust__label { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .trust__item { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--blue-deep); padding: .4rem .9rem; background: var(--blue-tint); border-radius: 999px; } /* ---- Stats -------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s3); margin-top: var(--s6); } .stat__value { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--blue); line-height: 1; margin-bottom: var(--s2); } .stat__label { display: block; font-size: .74rem; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* ---- Cards -------------------------------------------------------------- */ .cards { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .22s, transform .22s, box-shadow .22s; } .card:hover { border-color: var(--blue); transform: translateY(-4px); box-shadow: var(--shadow); } /* The box sets the height, not the photo. Most of the client's images are cropped to this ratio already, but one of them is portrait and without this it renders 600px tall and drags the whole row out of line with the cards beside it. */ .card__media { background: var(--blue-tint); } .card__media img { width: 100%; aspect-ratio: 600 / 277; height: auto; object-fit: cover; } .card__top { padding: var(--s5) var(--s5) 0; } .card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent-tint, var(--blue-tint)); margin-bottom: var(--s4); } .card__icon svg { width: 26px; height: 26px; stroke: var(--accent, var(--blue)); } .card__body { display: flex; flex-direction: column; gap: var(--s2); padding: 0 var(--s5) var(--s5); flex: 1; } .card__title { color: var(--ink); transition: color .2s; } .card:hover .card__title { color: var(--blue-dark); } .card__text { color: var(--muted); font-size: .94rem; } .card__meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); } .card__chip { font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--blue-dark); background: var(--blue-tint); padding: .25rem .65rem; border-radius: 999px; } .card__more { margin-top: auto; padding-top: var(--s4); color: var(--blue); font-size: .9rem; font-weight: 700; } /* ---- Prose and lists ---------------------------------------------------- */ .prose { max-width: 68ch; } .prose > * + * { margin-top: var(--s4); } .prose h2 { margin-top: var(--s7); } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: var(--s5); } .prose strong { color: var(--ink); font-weight: 700; } .prose ul { padding-left: 1.2rem; } .prose li + li { margin-top: var(--s2); } .checklist { list-style: none; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } .checklist li { display: flex; align-items: flex-start; gap: var(--s3); color: var(--ink); font-size: .95rem; line-height: 1.5; } .checklist li::before { content: ''; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center; } /* ---- Course facts ------------------------------------------------------- */ .facts { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); padding: var(--s5); background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--s6); } .fact__label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); } .fact__value { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); } /* ---- Price bar ---------------------------------------------------------- */ .pricebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5) var(--s6); background: var(--blue-tint); border: 1px solid rgba(47, 127, 212, .22); border-radius: var(--radius-lg); margin-bottom: var(--s3); } .pricebar__label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-dark); margin-bottom: var(--s1); } .pricebar__value { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 5vw, 2.5rem); color: var(--blue-deep); line-height: 1.05; } .pricebar__sub { display: block; font-size: .9rem; color: var(--body); margin-top: var(--s1); } .pricebar__note { font-size: .84rem; color: var(--muted); margin-bottom: var(--s6); } .card__chip--price { background: var(--blue); color: #fff; } /* ---- Photo gallery ------------------------------------------------------ */ /* The 48% floor keeps it at two columns on a phone. A flat 210px minimum collapses to one column at 390px, which turns 23 photos into a very long scroll. */ .gallery { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(48%, 210px), 1fr)); } /* The homepage teaser: fewer, larger tiles so it reads as a highlight rather than a contact sheet. */ .gallery--strip { grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr)); } .shot { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--blue-tint); cursor: zoom-in; transition: transform .25s, box-shadow .25s, border-color .25s; } .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .shot::after { /* Dark wash from the bottom so the hover icon stays legible on pale photos */ content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(8, 20, 32, .5), transparent); opacity: 0; transition: opacity .25s; } .shot:hover, .shot:focus-visible { transform: translateY(-3px); border-color: var(--blue); box-shadow: var(--shadow); } .shot:hover img, .shot:focus-visible img { transform: scale(1.06); } .shot:hover::after, .shot:focus-visible::after { opacity: 1; } /* ---- Lightbox ----------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(6, 14, 24, .93); padding: clamp(.75rem, 3vw, 2rem); } /* minmax(0, 1fr), not 1fr: a plain 1fr track takes the image's intrinsic height as its minimum, so a tall portrait photo grows the row and pushes the caption off the bottom of the screen. */ .lightbox.is-open { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s3); } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .lightbox__count { color: #9fb4c8; font-size: .85rem; font-variant-numeric: tabular-nums; } /* Flex, not grid. As a grid item the photo's max-height:100% resolves against an auto row that the photo itself sizes, which is circular and lets a tall portrait shot run off the bottom. A flex container's height is definite, so the percentage actually bites. */ .lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; } .lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); } .lightbox__caption { color: #c6d6e6; text-align: center; font-size: .92rem; max-width: 70ch; margin-inline: auto; } .lightbox__btn { display: inline-grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; transition: background-color .18s, border-color .18s, transform .18s; } .lightbox__btn:hover { background: rgba(255, 255, 255, .16); border-color: #fff; } .lightbox__btn svg { width: 20px; height: 20px; } /* The arrows sit over the photo itself so the controls do not steal height on a phone, where vertical space is the scarce thing. */ .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .lightbox__nav--prev { left: 0; } .lightbox__nav--next { right: 0; } .lightbox__nav:hover { transform: translateY(-50%) scale(1.08); } @media (prefers-reduced-motion: reduce) { .shot, .shot img, .lightbox__btn { transition: none; } .shot:hover, .shot:focus-visible { transform: none; } .shot:hover img, .shot:focus-visible img { transform: none; } .lightbox__nav:hover { transform: translateY(-50%); } } /* ---- Quotes ------------------------------------------------------------- */ .quotes { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .quote { display: flex; flex-direction: column; gap: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s6) var(--s5) var(--s5); box-shadow: var(--shadow-sm); } .quote__stars { color: var(--yellow); font-size: .95rem; letter-spacing: 2px; } .quote__text { color: var(--ink); flex: 1; } .quote__by { display: flex; align-items: center; gap: var(--s3); } .quote__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-dark); font-family: var(--font-display); font-weight: 800; } .quote__name { font-weight: 700; font-size: .95rem; color: var(--ink); } .quote__role { color: var(--muted); font-size: .85rem; } /* ---- Forms -------------------------------------------------------------- */ .form { display: grid; gap: var(--s4); } .form__row { display: grid; gap: var(--s4); } @media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: var(--s2); } .field__label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--body); } .field input, .field select, .field textarea { width: 100%; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-family: inherit; /* 16px minimum or iOS Safari zooms the page on focus */ font-size: 1rem; transition: border-color .18s, box-shadow .18s; } .field textarea { resize: vertical; min-height: 130px; } .field select { appearance: none; padding-right: 2.6rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374869a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 127, 212, .14); } .form__note { font-size: .92rem; margin-top: var(--s2); font-weight: 600; } .form__note--ok { color: var(--ok); } .form__note--error { color: var(--alert); } .form__note--busy { color: var(--blue); } .form__legend { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); margin-top: var(--s3); } /* ---- Contact ------------------------------------------------------------ */ .contact__grid { display: grid; gap: var(--s7); } @media (min-width: 900px) { .contact__grid { grid-template-columns: 1.1fr .9fr; gap: var(--s8); } } .info { display: grid; gap: var(--s5); align-content: start; } .info__item { display: flex; gap: var(--s4); } .info__icon { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--blue-tint); } .info__icon svg { width: 21px; height: 21px; stroke: var(--blue); } .info__title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: var(--s1); } .info__text { color: var(--body); font-size: .96rem; } .info__text a { color: var(--blue-dark); font-weight: 600; text-decoration: none; } .info__text a:hover { text-decoration: underline; } .callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s6); background: var(--blue-deep); border-radius: var(--radius-lg); color: #dce8f4; } .callout h2 { color: #fff; margin-bottom: var(--s2); } .callout p { color: #a9c4de; } /* ---- Footer ------------------------------------------------------------- */ .site-footer { background: var(--blue-deep); color: #a9c4de; padding-block: var(--s8) var(--s5); margin-top: var(--s8); } .footer__grid { display: grid; gap: var(--s7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .footer__brand img { height: 58px; width: auto; border-radius: 8px; margin-bottom: var(--s4); } .footer__about { font-size: .92rem; max-width: 40ch; } .footer__title { font-family: var(--font-display); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: var(--s4); } .footer__list { list-style: none; padding: 0; display: grid; gap: var(--s3); } .footer__list a, .footer__list span { display: flex; align-items: flex-start; gap: var(--s3); color: #a9c4de; font-size: .92rem; text-decoration: none; transition: color .18s; } .footer__list a:hover { color: var(--yellow); } .footer__list svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; stroke: var(--yellow); } .footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .13); font-size: .82rem; } .chip { border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; padding: .25rem .65rem; font-size: .74rem; } /* ---- Cookie ------------------------------------------------------------- */ .cookie { position: fixed; left: var(--s4); right: var(--s4); bottom: var(--s4); z-index: 200; display: none; gap: var(--s4); align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5); box-shadow: var(--shadow-lg); } .cookie.is-visible { display: flex; } .cookie p { flex: 1 1 250px; font-size: .88rem; } @media (min-width: 640px) { .cookie { left: auto; right: var(--s5); bottom: var(--s5); max-width: 520px; } } /* ---- Misc --------------------------------------------------------------- */ .skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 300; background: var(--blue); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--radius); font-weight: 700; text-decoration: none; transition: top .2s; } .skip-link:focus { top: var(--s4); } .media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media print { .site-header, .nav__drawer, .cookie { display: none !important; } body { color: #000; } }