/* ========================================================================= Sanctis — marketing site design system Plain CSS, no build step. Light theme: grey / white / blue, matching the application shell. To swap in a webfont (e.g. Inter), add the in each page and set --font-sans below. ========================================================================= */ /* ----- Design tokens ---------------------------------------------------- */ :root { /* Palette — off-white canvas, white surfaces, soft grey lines */ --bg: #f5f6f8; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f3f4f6; --border: #e3e6ea; --border-strong: #d5d9df; /* Text */ --text: #1b2430; --text-muted: #5a626d; --text-subtle: #8a929c; /* Brand accent — blue. The whole system is blue / white / grey. */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-ink: #ffffff; /* text on accent fills */ --accent-soft: rgba(37, 99, 235, 0.10); /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); --step-3: clamp(1.9rem, 1.4rem + 2.4vw, 2.75rem); --step-4: clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem); /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem; /* Shape & motion */ --radius: 12px; --radius-lg: 20px; --ring: 0 0 0 3px var(--accent-soft); --shadow: 0 1px 2px rgba(16,24,40,.06), 0 18px 40px -16px rgba(16,24,40,.20); --container: 1120px; color-scheme: light; } /* ----- Reset ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; display: flex; flex-direction: column; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ----- Layout helpers ---------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); } .section { padding-block: var(--space-8); } .section--tight { padding-block: var(--space-7); } .stack > * + * { margin-top: var(--space-4); } .stack-lg > * + * { margin-top: var(--space-6); } .skip-link { position: absolute; left: var(--space-4); top: -60px; background: var(--accent); color: var(--accent-ink); padding: var(--space-2) var(--space-4); border-radius: var(--radius); font-weight: 700; transition: top .15s ease; z-index: 100; } .skip-link:focus { top: var(--space-4); } /* ----- Typography ------------------------------------------------------ */ .title-xl { font-size: var(--step-4); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; } .title-lg { font-size: var(--step-3); line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; } .title-md { font-size: var(--step-2); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; } .subhead { font-size: var(--step-1); font-weight: 600; line-height: 1.35; } .lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--text-muted); max-width: 60ch; } .muted { color: var(--text-muted); } .eyebrow { display: inline-block; font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } /* ----- Buttons ------------------------------------------------------- */ .btn { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--border-strong); display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.7rem 1.15rem; border-radius: var(--radius); border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: var(--step-0); line-height: 1; white-space: nowrap; transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:active { transform: translateY(1px); } .btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: var(--accent); font-weight: 700; } .btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); } .btn--ghost { --btn-bg: var(--surface); } .btn--ghost:hover { --btn-bd: var(--accent); box-shadow: var(--ring); } .btn--lg { padding: 0.9rem 1.5rem; font-size: var(--step-1); } /* ----- Header / nav -------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border); } /* Fallback for engines without backdrop-filter */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--bg); } } .site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 68px; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800; letter-spacing: -0.01em; font-size: 1.15rem; color: var(--text); } .brand__mark { width: 28px; height: 28px; flex: none; } .nav { display: flex; align-items: center; gap: 0.35rem; margin-inline-start: auto; } .nav__link { padding: 0.5rem 0.8rem; border-radius: 8px; font-size: 0.95rem; font-weight: 500; color: var(--text-muted); transition: color .15s ease, background-color .15s ease; } .nav__link:hover { color: var(--text); background: var(--surface); } .nav__link[aria-current="page"] { color: var(--text); background: var(--surface-2); } .nav__cta { margin-inline-start: 0.4rem; } .nav-toggle { display: none; margin-inline-start: auto; padding: 0.5rem; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); } .nav-toggle svg { width: 22px; height: 22px; } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .nav { /* Anchored to .site-header (its containing block, since the header is a positioned + backdrop-filtered ancestor). */ position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.15rem; margin: 0; padding: var(--space-4); background: var(--bg-elevated); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .nav[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav__link { padding: 0.75rem 0.8rem; font-size: 1rem; } .nav__cta { margin: var(--space-3) 0 0; } .nav__cta .btn { width: 100%; justify-content: center; } } /* ----- Hero ---------------------------------------------------------- */ .hero { position: relative; padding-block: var(--space-9) var(--space-8); } .hero__inner { position: relative; max-width: 46rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .hero__meta { margin-top: var(--space-6); font-size: var(--step--1); color: var(--text-subtle); } /* ----- Cards / grid ------------------------------------------------ */ .grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color .15s ease, transform .15s ease, background-color .15s ease; } .card--link:hover { border-color: var(--accent); box-shadow: var(--shadow); } .card__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); } .card__icon svg { width: 22px; height: 22px; } .card__title { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; } .card__body { color: var(--text-muted); font-size: 0.975rem; } .card__more { margin-top: auto; padding-top: var(--space-2); font-weight: 600; font-size: 0.9rem; color: var(--accent); } /* ----- Badge ------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } .badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } /* ----- Under construction ---------------------------------------- */ .uc { flex: 1; display: grid; place-items: center; padding-block: var(--space-9); position: relative; } .uc__inner { position: relative; text-align: center; max-width: 46rem; } .uc__title { margin-top: var(--space-4); } .uc__desc { margin-top: var(--space-4); margin-inline: auto; } .uc__actions { margin-top: var(--space-6); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } .uc__planned { margin-top: var(--space-7); text-align: start; display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .uc__planned h2 { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); } .uc__planned ul { padding-left: 1.1rem; color: var(--text-muted); } .uc__planned li { margin-top: var(--space-1); } /* ----- Footer --------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-elevated); padding-block: var(--space-6); margin-top: auto; } .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; justify-content: space-between; } .site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 0.9rem; } .site-footer__nav a { color: var(--text-muted); } .site-footer__nav a:hover { color: var(--text); } .site-footer__legal { font-size: 0.85rem; color: var(--text-subtle); } /* ----- Utilities ---------------------------------------------- */ .text-center { text-align: center; } .section-head { max-width: 44rem; margin-bottom: var(--space-6); } .divider { height: 1px; background: var(--border); border: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ----- Contact form ------------------------------------------- */ .contact { max-width: 34rem; margin-inline: auto; } .contact__head { text-align: center; } .contact__head .lede { margin-inline: auto; } .cform { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); } .cform__field { display: flex; flex-direction: column; gap: var(--space-2); } .cform__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); } .cform__opt { margin-left: var(--space-2); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-subtle); } .cform__input { width: 100%; padding: 0.8rem 1rem; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .cform__input::placeholder { color: var(--text-subtle); } .cform__input:hover { border-color: var(--border-strong); } .cform__input:focus { border-color: var(--accent); background: var(--surface-2); box-shadow: var(--ring); } .cform__textarea { resize: vertical; min-height: 9rem; line-height: 1.6; } .cform__submit { width: 100%; margin-top: var(--space-2); } .cform__hp { display: none; } .notice { margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); } .notice > * + * { margin-top: var(--space-3); } .notice--err { border-color: #c0392b; background: rgba(192, 57, 43, .08); } /* ----- Thank-you overlay (after a successful send) ------------ */ .thanks[hidden] { display: none; } .thanks { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--space-5); background: rgba(16, 24, 40, .45); backdrop-filter: blur(3px); animation: thanks-fade .2s ease both; } .thanks__card { width: 100%; max-width: 26rem; text-align: center; padding: var(--space-7) var(--space-6); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .thanks__mark { width: 3rem; height: 3rem; margin: 0 auto var(--space-4); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); border-radius: 999px; } .thanks__mark svg { width: 1.6rem; height: 1.6rem; } .thanks__title { font-size: var(--step-1); } .thanks__body { margin-top: var(--space-3); color: var(--text-muted); } .thanks__redirect { margin-top: var(--space-5); font-size: 0.85rem; color: var(--text-subtle); } @keyframes thanks-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .thanks { animation: none; } }