/* ============================================================================ Chronos Solutions — Design System Style: Trust & Authority | Pattern: Enterprise Gateway Type: Poppins (display) / Open Sans (body) ==========================================================================*/ /* ---- Fonts --------------------------------------------------------------- */ /* Fonts are loaded via in each page's (faster than @import, which blocks until this stylesheet is parsed). Keep both lists in sync. */ /* ---- Design tokens ------------------------------------------------------- */ :root { /* Brand */ --navy-950: #020617; --navy-900: #0f172a; --navy-800: #1e293b; --navy-700: #334155; --slate-600: #475569; --slate-500: #64748b; --slate-400: #94a3b8; --slate-300: #cbd5e1; --slate-200: #e2e8f0; --slate-100: #f1f5f9; --slate-50: #f8fafc; --blue-900: #075985; --blue-800: #0369a1; --blue-700: #0284c7; --blue-500: #0ea5e9; --blue-400: #38bdf8; --green-600: #059669; --amber-500: #f59e0b; --red-600: #dc2626; /* Semantic — light mode */ --bg: var(--slate-50); --surface: #ffffff; --surface-2: var(--slate-100); --surface-ink: var(--navy-900); /* dark sections on light page */ --text: var(--navy-900); --text-muted: var(--slate-600); --text-subtle: var(--slate-500); --heading: var(--navy-950); --primary: var(--navy-900); --accent: var(--blue-800); --accent-strong: var(--blue-900); --accent-soft: #e0f2fe; --on-accent: #ffffff; --border: var(--slate-200); --border-strong: var(--slate-300); --ring: var(--blue-700); --success: var(--green-600); --danger: var(--red-600); /* Elevation */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06); --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04); --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, .12), 0 2px 6px -2px rgba(15, 23, 42, .07); --shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, .22), 0 8px 16px -8px rgba(15, 23, 42, .12); --shadow-glow: 0 0 0 1px rgba(3, 105, 161, .12), 0 14px 40px -14px rgba(3, 105, 161, .35); /* Geometry */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; /* Spacing (4 / 8 rhythm) */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 6rem; --space-16: 8rem; /* Layout */ --container: 1180px; --container-narrow: 820px; --header-h: 74px; /* Type scale */ --fs-eyebrow: .8rem; --fs-body: 1.0625rem; --fs-lead: 1.2rem; --step-h6: 1.05rem; --step-h5: 1.2rem; --step-h4: 1.45rem; --step-h3: clamp(1.45rem, 1.1rem + 1.6vw, 1.9rem); --step-h2: clamp(1.85rem, 1.3rem + 2.4vw, 2.7rem); --step-h1: clamp(2.3rem, 1.5rem + 3.4vw, 3.6rem); /* Motion */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 140ms; --t: 220ms; --z-header: 100; --z-menu: 200; --z-toast: 1000; color-scheme: light; } /* ---- Dark mode ----------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"], @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a1120; --surface: #0f1a2e; --surface-2: #131f37; --surface-ink: #0c1426; --text: #e6edf6; --text-muted: #9fb0c6; --text-subtle: #7c8da5; --heading: #f3f7fc; --primary: #0c1426; --accent: #38bdf8; --accent-strong:#7dd3fc; --accent-soft: rgba(56,189,248,.12); --on-accent: #04121f; --border: #20304d; --border-strong:#2c3f63; --ring: #38bdf8; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7); --shadow-glow: 0 0 0 1px rgba(56,189,248,.18), 0 18px 50px -16px rgba(56,189,248,.3); } } :root[data-theme="dark"] { --bg:#0a1120; --surface:#0f1a2e; --surface-2:#131f37; --surface-ink:#0c1426; --text:#e6edf6; --text-muted:#9fb0c6; --text-subtle:#7c8da5; --heading:#f3f7fc; --primary:#0c1426; --accent:#38bdf8; --accent-strong:#7dd3fc; --accent-soft:rgba(56,189,248,.12); --on-accent:#04121f; --border:#20304d; --border-strong:#2c3f63; --shadow-md:0 8px 20px -6px rgba(0,0,0,.55); --shadow-lg:0 24px 48px -16px rgba(0,0,0,.7); --shadow-glow:0 0 0 1px rgba(56,189,248,.18),0 18px 50px -16px rgba(56,189,248,.3); color-scheme: dark; } /* ---- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: var(--fs-body); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: var(--accent-strong); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { padding-left: 1.2em; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--accent); color: #fff; } h1, h2, h3, h4, h5 { font-family: 'Poppins', 'Open Sans', sans-serif; color: var(--heading); line-height: 1.15; letter-spacing: -.012em; font-weight: 600; text-wrap: balance; } h1 { font-size: var(--step-h1); font-weight: 700; letter-spacing: -.02em; } h2 { font-size: var(--step-h2); } h3 { font-size: var(--step-h3); } h4 { font-size: var(--step-h4); } /* ---- Layout helpers ------------------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); } .narrow { max-width: var(--container-narrow); margin-inline: auto; } .section { padding-block: clamp(3.25rem, 6vw, 6rem); } .section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); } .section--ink { background: var(--surface-ink); color: #dbe4f0; } .section--ink h2, .section--ink h3 { color: #fff; } .section--muted { background: var(--surface-2); } .skip-link { position: absolute; left: 12px; top: -60px; z-index: var(--z-toast); background: var(--navy-900); color: #fff; padding: .6rem 1rem; border-radius: 8px; transition: top var(--t-fast) var(--ease); } .skip-link:focus { top: 12px; text-decoration: none; } /* ---- Eyebrow + section headers ------------------------------------------ */ .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); } .section--ink .eyebrow { color: var(--blue-400); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; } .section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow::before { display: none; } .section-head .lead { margin-top: 1rem; } .lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.6; } /* ---- Buttons ------------------------------------------------------------- */ .btn { --btn-bg: var(--accent); --btn-fg: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .98rem; line-height: 1; text-decoration: none; cursor: pointer; padding: .92rem 1.5rem; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--btn-bg); color: var(--btn-fg); transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease); box-shadow: var(--shadow-sm); } .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); } .btn .ico { width: 18px; height: 18px; transition: transform var(--t) var(--ease); } .btn:hover .ico--arrow { transform: translateX(3px); } .btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); } .btn--primary:hover { background: var(--accent-strong); } :root[data-theme="dark"] .btn--primary:hover, .btn--primary:hover { box-shadow: var(--shadow-glow); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--border-strong); box-shadow: none; } .btn--ghost:hover { background: var(--surface-2); border-color: var(--accent); } .btn--onink { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; backdrop-filter: blur(4px); } .btn--onink:hover { background: rgba(255,255,255,.16); } .btn--lg { padding: 1.05rem 1.8rem; font-size: 1.05rem; } .btn--sm { padding: .6rem 1rem; font-size: .9rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; } .textlink { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-family: 'Poppins', sans-serif; color: var(--accent-strong); } .textlink .ico { width: 16px; height: 16px; transition: transform var(--t) var(--ease); } .textlink:hover { text-decoration: none; } .textlink:hover .ico { transform: translateX(3px); } .section--ink .textlink { color: var(--blue-400); } /* ---- Header / Nav -------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .site-header.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-xs); } .nav { display: flex; align-items: center; gap: 1.25rem; height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: .6rem; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.22rem; color: var(--heading); letter-spacing: -.01em; } .brand:hover { text-decoration: none; } .brand__mark { width: 34px; height: 34px; flex: none; } .brand__sub { display: block; font-family: 'Open Sans', sans-serif; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-subtle); margin-top: 1px; } .nav__spacer { display: none; } /* Centre the primary nav between the logo and the CTA (balanced header) */ .nav > nav { margin-inline: auto; } /* Landing-page header: no nav menu — logo left, actions right */ .nav--lp { justify-content: space-between; } .nav__menu { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; margin: 0; } .nav__link { display: inline-flex; align-items: center; gap: .3rem; padding: .6rem .8rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .96rem; color: var(--text); white-space: nowrap; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .nav__link:hover { text-decoration: none; color: var(--accent-strong); background: var(--surface-2); } .nav__link[aria-current="page"] { color: var(--accent-strong); } .nav__link .chev { width: 15px; height: 15px; transition: transform var(--t) var(--ease); } .nav__actions { display: flex; align-items: center; gap: .5rem; } /* Dropdown (mega) */ .has-menu { position: relative; } /* Invisible bridge across the gap so the menu doesn't close while the pointer travels from the trigger down to the dropdown. */ .has-menu:hover::after, .has-menu:focus-within::after { content: ""; position: absolute; top: 100%; left: -16px; right: -16px; height: 16px; } .dropdown { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; min-width: 540px; padding: .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-menu); opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t); } .has-menu:hover .dropdown, .has-menu:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .has-menu:hover .nav__link .chev, .has-menu:focus-within .nav__link .chev { transform: rotate(180deg); } .dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; } .menu-item { display: flex; gap: .75rem; padding: .7rem .75rem; border-radius: var(--radius); transition: background-color var(--t-fast) var(--ease); } .menu-item:hover { text-decoration: none; background: var(--surface-2); } .menu-item__ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); } .menu-item__ico svg { width: 20px; height: 20px; } .menu-item > span:last-child { display: flex; flex-direction: column; gap: 1px; } .menu-item__t { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .94rem; color: var(--heading); } .menu-item__d { display: block; font-size: .82rem; color: var(--text-subtle); line-height: 1.45; } /* Theme toggle + burger */ .icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .icon-btn:hover { border-color: var(--accent); color: var(--accent-strong); } .icon-btn svg { width: 20px; height: 20px; } .theme-toggle .ico-moon { display: none; } :root[data-theme="dark"] .theme-toggle .ico-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ico-moon { display: block; } .burger { display: none; } /* Mobile nav */ .mobile-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu); background: var(--bg); padding: 1.25rem clamp(1.1rem, 4vw, 2rem) 2rem; overflow-y: auto; transform: translateX(100%); transition: transform var(--t) var(--ease-out); visibility: hidden; } .mobile-nav.open { transform: translateX(0); visibility: visible; } .mobile-nav ul { list-style: none; padding: 0; margin: 0; } .mobile-nav__section + .mobile-nav__section { margin-top: .5rem; border-top: 1px solid var(--border); padding-top: .5rem; } .mobile-nav__label { font-family:'Poppins',sans-serif; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); padding: .9rem .25rem .3rem; } .mobile-nav a { display: block; padding: .8rem .25rem; font-weight: 600; color: var(--text); border-radius: 8px; } .mobile-nav a:hover { text-decoration: none; color: var(--accent-strong); } .mobile-nav .btn { margin-top: 1rem; } /* ---- Hero ---------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: var(--surface-ink); color: #e2e8f0; isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -1; } .hero__bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 85% -10%, rgba(56,189,248,.30), transparent 60%), radial-gradient(50% 70% at 8% 110%, rgba(3,105,161,.35), transparent 60%), linear-gradient(160deg, #0b1730 0%, #0a1326 55%, #0a1120 100%); } .hero__grid-overlay { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(120% 80% at 70% 0%, #000 30%, transparent 78%); } .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3.5rem, 7vw, 6.5rem); } .hero h1 { color: #fff; } .hero__lead { font-size: clamp(1.08rem, .95rem + .6vw, 1.3rem); color: #c7d3e3; margin-top: 1.3rem; max-width: 36ch; } .hero__sub { margin-top: 1rem; color: #9fb0c6; max-width: 46ch; } .hero .btn-row { margin-top: 2rem; } .hero__pill { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem .45rem .55rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #cdd9e8; font-size: .85rem; font-weight: 600; } .hero__pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.18); } .hero__trust { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1.3rem 1.8rem; align-items: center; } .hero__trust-item { display: flex; align-items: center; gap: .55rem; color: #aebfd3; font-size: .9rem; font-weight: 600; } .hero__trust-item svg { width: 18px; height: 18px; color: var(--blue-400); flex: none; } /* Hero monitor card (illustrative) */ .monitor { background: linear-gradient(180deg, rgba(20,32,56,.9), rgba(13,22,42,.92)); border: 1px solid rgba(120,150,190,.22); border-radius: var(--radius-lg); box-shadow: 0 30px 70px -24px rgba(0,0,0,.7); padding: 1.15rem; backdrop-filter: blur(8px); } .monitor__bar { display: flex; align-items: center; gap: .45rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(120,150,190,.16); } .monitor__bar .d { width: 11px; height: 11px; border-radius: 50%; background: #475569; } .monitor__bar .d.r { background: #f87171; } .monitor__bar .d.y { background: #fbbf24; } .monitor__bar .d.g { background: #34d399; } .monitor__title { margin-left: .4rem; font-family: 'Poppins',sans-serif; font-size: .82rem; font-weight: 600; color: #aebfd3; } .monitor__title .live { float: right; color: #34d399; font-size: .72rem; letter-spacing:.04em; } .monitor__rows { display: grid; gap: .55rem; margin-top: .9rem; } .mrow { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: 12px; background: rgba(148,163,184,.06); border: 1px solid rgba(120,150,190,.12); } .mrow__ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: rgba(56,189,248,.14); color: #7dd3fc; flex: none; } .mrow__ico svg { width: 17px; height: 17px; } .mrow > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .mrow__name { display: block; font-size: .9rem; font-weight: 600; color: #dbe4f0; } .mrow__meta { display: block; font-size: .74rem; color: #8aa0bb; } .mrow__status { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; color: #34d399; } .mrow__status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .monitor__foot { display: flex; justify-content: space-between; align-items: center; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid rgba(120,150,190,.16); font-size: .76rem; color: #8aa0bb; } .monitor__note { position: relative; margin-top: .8rem; font-size: .72rem; color: #708198; text-align: center; } /* ---- Page head (interior hero) ------------------------------------------ */ .pagehead { position: relative; background: var(--surface-ink); color: #d7e1ef; overflow: hidden; isolation: isolate; } .pagehead::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(70% 120% at 88% -20%, rgba(56,189,248,.26), transparent 58%), linear-gradient(160deg,#0b1730,#0a1120); } .pagehead__inner { padding-block: clamp(2.4rem, 5vw, 4rem); } .pagehead h1 { color: #fff; max-width: 20ch; margin-top: .9rem; } .pagehead .lead { color: #b9c7da; margin-top: 1.1rem; max-width: 60ch; } .pagehead .btn-row { margin-top: 1.8rem; } /* Breadcrumbs */ .breadcrumb { font-size: .85rem; } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; align-items: center; } .breadcrumb a { color: #9fb0c6; font-weight: 600; } .breadcrumb a:hover { color: #fff; } .breadcrumb li[aria-current] { color: #d7e1ef; } .breadcrumb .sep { color: #607692; } /* ---- Cards / grids ------------------------------------------------------- */ .grid { display: grid; gap: 1.25rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-xs); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); text-decoration: none; } .card__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(150deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 40%, transparent)); color: var(--accent-strong); margin-bottom: 1.1rem; transition: transform var(--t) var(--ease); } .card--link:hover .card__ico { transform: scale(1.06) rotate(-3deg); } .card__ico svg { width: 26px; height: 26px; } .card h3 { font-size: var(--step-h5); margin-bottom: .5rem; } .service-card h3 { display: flex; align-items: center; gap: .5rem; } .card p { color: var(--text-muted); font-size: .98rem; } .card .textlink { margin-top: 1.1rem; } .card__tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--accent-strong); background: var(--accent-soft); padding:.2rem .55rem; border-radius: var(--radius-pill); } /* Feature/check list */ .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; } .checklist li { display: flex; gap: .7rem; align-items: flex-start; } .checklist li > svg, .checklist .check { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; } .checklist .check svg { width: 14px; height: 14px; } .checklist b { color: var(--heading); font-family: 'Poppins', sans-serif; font-weight: 600; } .section--ink .checklist .check { background: rgba(56,189,248,.16); color: #7dd3fc; } /* Split feature row */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; } .split--media-first .split__media { order: -1; } /* ---- Stats --------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .stat { padding: 1.6rem 1.4rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); text-align: left; } .section--ink .stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); } .stat__num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); color: var(--accent-strong); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .section--ink .stat__num { color: var(--blue-400); } .stat__label { margin-top: .6rem; font-weight: 600; color: var(--heading); font-family:'Poppins',sans-serif; font-size: .98rem; } .section--ink .stat__label { color: #eaf1f9; } .stat__sub { margin-top: .2rem; font-size: .86rem; color: var(--text-subtle); } .section--ink .stat__sub { color: #9fb0c6; } /* ---- Partner strip ------------------------------------------------------- */ .partners { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } .partner-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.05rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .9rem; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } .partner-chip:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-sm); text-decoration: none; } .partner-chip svg { width: 18px; height: 18px; color: var(--accent-strong); } .section--ink .partner-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: #e6edf6; } .section--ink .partner-chip svg { color: var(--blue-400); } /* ---- Steps / process ----------------------------------------------------- */ .steps { display: grid; gap: 1.1rem; counter-reset: step; } .steps.cols-2 { grid-template-columns: 1fr 1fr; } .step { position: relative; padding: 1.5rem 1.5rem 1.5rem 4.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 1.25rem; top: 1.35rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-family: 'Poppins', sans-serif; font-weight: 700; color: #fff; background: linear-gradient(150deg, var(--blue-700), var(--blue-900)); } .step h4 { font-size: 1.1rem; margin-bottom: .3rem; } .step p { color: var(--text-muted); font-size: .95rem; } /* ---- Table --------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); } table.data { width: 100%; border-collapse: collapse; background: var(--surface); min-width: 560px; } table.data th, table.data td { text-align: left; padding: .95rem 1.1rem; border-bottom: 1px solid var(--border); font-size: .95rem; } table.data thead th { background: var(--surface-2); font-family: 'Poppins', sans-serif; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } table.data tbody tr:last-child td { border-bottom: 0; } table.data td b { color: var(--heading); } .pill-prio { display:inline-block; padding:.18rem .6rem; border-radius: var(--radius-pill); font-size:.78rem; font-weight:700; } .pill-prio.p1 { background: #fee2e2; color:#b91c1c; } .pill-prio.p2 { background:#ffedd5; color:#c2410c; } .pill-prio.p3 { background:#e0f2fe; color:#0369a1; } .pill-prio.p4 { background:#e2e8f0; color:#334155; } /* ---- Callout / note ------------------------------------------------------ */ .note, .note--quiet { display: flex; gap: .9rem; padding: 1.2rem 1.4rem; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); align-items: flex-start; } .note > svg, .note--quiet > svg { flex: none; width: 22px; height: 22px; color: var(--accent-strong); margin-top: 2px; } .note p, .note--quiet p { font-size: .95rem; } .note--quiet { background: var(--surface-2); border-color: var(--border); } .note--quiet > svg { color: var(--text-muted); } /* Sticky note travels with the scroll alongside a long adjacent column (desktop only) */ @media (min-width: 881px) { .note--sticky { position: sticky; top: calc(var(--header-h) + 16px); } } /* ---- FAQ accordion (native details) -------------------------------------- */ .faq { display: grid; gap: .75rem; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .faq details[open] { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow-sm); } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--heading); font-size: 1.02rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent-strong); } .faq summary .plus { flex: none; width: 26px; height: 26px; position: relative; border-radius: 50%; background: var(--accent-soft); transition: background var(--t) var(--ease); } .faq summary .plus::before, .faq summary .plus::after { content:""; position:absolute; inset:0; margin:auto; background: var(--accent-strong); border-radius: 2px; transition: transform var(--t) var(--ease); } .faq summary .plus::before { width: 12px; height: 2px; } .faq summary .plus::after { width: 2px; height: 12px; } .faq details[open] summary .plus::after { transform: rotate(90deg); opacity: 0; } .faq .faq__body { padding: 0 1.3rem 1.25rem; color: var(--text-muted); } .faq .faq__body p + p { margin-top: .8rem; } /* ---- CTA band ------------------------------------------------------------ */ .cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--surface-ink); color: #e7eef7; border-radius: clamp(20px, 3vw, 32px); padding: clamp(2.4rem, 5vw, 4rem); } .cta-band::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(60% 120% at 90% 0%, rgba(56,189,248,.3), transparent 55%), radial-gradient(50% 120% at 0% 100%, rgba(3,105,161,.4), transparent 55%); } .cta-band h2 { color: #fff; max-width: 18ch; } .cta-band p { color: #c2d0e2; margin-top: 1rem; max-width: 52ch; } .cta-band .btn-row { margin-top: 1.8rem; } .cta-band__contact { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .9rem; color: #9fb0c6; } .cta-band__contact a { color: #cfe0f2; font-weight: 600; } /* ---- Location card ------------------------------------------------------- */ .loc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; } .loc__map { position: relative; min-height: 280px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: linear-gradient(135deg, #dce7f2, #eef3f9); display: grid; place-items: center; } :root[data-theme="dark"] .loc__map { background: linear-gradient(135deg,#13203a,#0e1830); } .loc__map-frame { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; } .loc__directions { margin-top: .9rem; } .loc__map-grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(100,116,139,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(100,116,139,.18) 1px, transparent 1px); background-size: 30px 30px; } .loc__pin { position: relative; text-align: center; } .loc__pin svg { width: 46px; height: 46px; color: var(--accent-strong); filter: drop-shadow(0 8px 10px rgba(3,105,161,.3)); margin-inline:auto; } .loc__pin span { display:block; margin-top:.4rem; font-family:'Poppins',sans-serif; font-weight:600; font-size:.85rem; color: var(--navy-900); } :root[data-theme="dark"] .loc__pin span { color:#dbe4f0; } .loc__details { display: flex; flex-direction: column; gap: .55rem; } .loc__details address { font-style: normal; color: var(--text-muted); line-height: 1.7; } .loc__line { display: flex; gap: .65rem; align-items: flex-start; } .loc__line svg { flex:none; width: 19px; height: 19px; color: var(--accent-strong); margin-top: 3px; } /* ---- Forms --------------------------------------------------------------- */ .form { display: grid; gap: 1.1rem; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; } .field { display: grid; gap: .4rem; } .field label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .92rem; color: var(--heading); } .field .req { color: var(--danger); } .field input, .field select, .field textarea { width: 100%; padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); font-size: 1rem; min-height: 48px; } .field textarea { min-height: 140px; resize: vertical; line-height: 1.6; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field .help { font-size: .82rem; color: var(--text-subtle); } .field .error { font-size: .82rem; color: var(--danger); font-weight: 600; display: none; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); } .field.invalid .error { display: block; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__status { display: none; padding: 1rem 1.2rem; border-radius: var(--radius); font-weight: 600; } .form__status.ok { display: flex; gap: .6rem; align-items: center; background: #dcfce7; color: #15803d; border: 1px solid #86efac; } :root[data-theme="dark"] .form__status.ok { background: rgba(34,197,94,.12); color:#86efac; border-color: rgba(34,197,94,.3); } .form__status.err { display: flex; gap: .6rem; align-items: center; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } :root[data-theme="dark"] .form__status.err { background: rgba(220,38,38,.12); color:#fca5a5; border-color: rgba(220,38,38,.3); } .form__status svg { width: 20px; height: 20px; flex: none; } /* ---- Enquiry card (elevated form panel) --------------------------------- */ .enquiry-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(1.5rem, 3.2vw, 2.5rem); } .enquiry-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--blue-700), var(--blue-400)); } .enquiry-card > h2 { margin: .5rem 0; } .enquiry-card .form { margin-top: 1.4rem; } /* Tinted fields lift to white on focus — feels crisper inside the white card */ .enquiry-card .field input, .enquiry-card .field select, .enquiry-card .field textarea { background: var(--surface-2); } .enquiry-card .field input:focus, .enquiry-card .field select:focus, .enquiry-card .field textarea:focus { background: var(--surface); } .form__reassure { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin-top: 1.2rem; font-size: .85rem; color: var(--text-subtle); font-weight: 600; } .form__reassure span { display: inline-flex; align-items: center; gap: .4rem; } .form__reassure svg { width: 15px; height: 15px; color: var(--success); flex: none; } /* ---- Prose (long-form content) ------------------------------------------ */ .prose { max-width: 72ch; } .prose > * + * { margin-top: 1.15rem; } .prose h2 { margin-top: 2.6rem; } .prose h3 { margin-top: 2rem; } .prose p, .prose li { color: var(--text-muted); } .prose strong, .prose b { color: var(--heading); } .prose ul, .prose ol { display: grid; gap: .5rem; } .prose blockquote { border-left: 3px solid var(--accent); padding: .4rem 0 .4rem 1.2rem; color: var(--text); font-style: italic; } /* ---- Team --------------------------------------------------------------- */ .person { text-align: center; } .person__avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center; background: linear-gradient(150deg, var(--blue-700), var(--navy-900)); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; box-shadow: var(--shadow-md); } .person h3 { font-size: 1.2rem; } .person .role { color: var(--accent-strong); font-weight: 600; font-family: 'Poppins', sans-serif; font-size: .9rem; } /* ---- Footer -------------------------------------------------------------- */ .site-footer { background: var(--surface-ink); color: #aebfd3; padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; } .footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; } .footer__brand .brand { color: #fff; } .footer__brand .brand__sub { color: #7c8da5; } .footer__brand p { margin-top: 1rem; font-size: .92rem; color: #9fb0c6; max-width: 32ch; } .footer__social { display: flex; gap: .6rem; margin-top: 1.2rem; } .footer__social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #cdd9e8; border: 1px solid rgba(255,255,255,.1); transition: background var(--t) var(--ease), color var(--t) var(--ease); } .footer__social a:hover { background: var(--accent); color: #fff; text-decoration: none; } .footer__social svg { width: 18px; height: 18px; } .footer__col h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-family: 'Poppins', sans-serif; margin-bottom: 1rem; } .footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } .footer__col a { color: #aebfd3; font-size: .92rem; } .footer__col a:hover { color: #fff; } .footer__contact li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; line-height: 1.5; } .footer__contact svg { flex: none; width: 17px; height: 17px; color: var(--blue-400); margin-top: 3px; } .footer__contact a { color: #cfe0f2; } .footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; align-items: center; font-size: .82rem; color: #7c8da5; } .footer__bottom a { color: #9fb0c6; } .footer__legal { display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; } /* ---- Reveal animation ---------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* Hidden until revealed. The animation is a failsafe: if main.js never runs (so it can't add .reveal-js or .is-visible), content still appears after 1.6s instead of staying invisible. When JS runs, .reveal-js cancels it and the IntersectionObserver drives the proper scroll-reveal. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); will-change: opacity, transform; animation: reveal-failsafe .01s linear 1.6s forwards; } .js.reveal-js .reveal { animation: none; } .js .reveal.is-visible { opacity: 1; transform: none; } .js .reveal.d1 { transition-delay: .07s; } .js .reveal.d2 { transition-delay: .14s; } .js .reveal.d3 { transition-delay: .21s; } .js .reveal.d4 { transition-delay: .28s; } } @keyframes reveal-failsafe { to { opacity: 1; transform: none; } } /* ---- Utilities ----------------------------------------------------------- */ .mt-0{margin-top:0}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:2rem}.mt-8{margin-top:3rem} .mb-0{margin-bottom:0}.text-center{text-align:center}.center-x{margin-inline:auto} .maxw-prose{max-width:62ch}.maxw-narrow{max-width:46ch} .muted{color:var(--text-muted)}.hr{height:1px;background:var(--border);border:0;margin-block:clamp(2rem,4vw,3rem)} /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer__brand { grid-column: 1 / -1; } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 880px) { :root { --header-h: 66px; } .nav__menu, .nav__actions .btn--nav { display: none; } .burger { display: inline-grid; } .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; } .hero__media { order: 2; } .grid-3, .grid-2, .stats, .steps.cols-2 { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .split, .loc { grid-template-columns: 1fr; } .split--media-first .split__media { order: 0; } .form__row { grid-template-columns: 1fr; } } @media (max-width: 520px) { .grid-4, .stats { grid-template-columns: 1fr; } .btn-row .btn { width: 100%; } .hero .btn-row .btn { width: 100%; } .cta-band { border-radius: 18px; } } /* Print */ @media print { .site-header, .mobile-nav, .cta-band, .site-footer .footer__social { display: none; } body { background: #fff; color: #000; } }