/* ============================================================================ Boatomation — design system. THE RULE THIS FILE ENFORCES: not one colour is written anywhere else. Every component, page and Telerik control paints from the variables declared here, so a theme is a pure override block and adding one touches nothing but this file. The palette is selected by (SiteTheme service) and its light/dark nature by , which is what the handful of structural rules at the bottom key off. No web fonts and no CDN: system stacks only. The display face is a SERIF stack on purpose — it is the difference between "smart home startup" and "yacht", and every machine this site runs on already has one. ============================================================================ */ /* ============================================================ PALETTE — Marina (default, LIGHT): white gelcoat, navy ink, sea blue lit by brass. The whole brand is that pairing. ============================================================ */ :root { --c-bg: #F3F7FA; --c-bg-raise: #FFFFFF; --c-surface: rgba(255, 255, 255, 0.86); --c-surface-2: #FFFFFF; --c-surface-solid: #FFFFFF; --c-border: rgba(11, 45, 74, 0.13); --c-border-strong: rgba(11, 45, 74, 0.26); --c-text: #0B2A44; --c-text-dim: rgba(11, 42, 68, 0.70); --c-text-faint: rgba(11, 42, 68, 0.54); --c-brand: #0B5E8F; --c-brand-deep: #073F62; --c-brand-soft: #2E86BE; --c-accent: #B0822A; --c-accent-soft: #D4A94F; --c-glow-brand: rgba(11, 94, 143, 0.15); --c-glow-accent: rgba(176, 130, 42, 0.13); --c-grid-line: rgba(11, 94, 143, 0.06); --c-ok: #10805B; --c-ok-text: #0B6448; --c-err: #C0392B; --c-err-text: #9E2A1F; --c-on-brand: #ffffff; --shadow-card: 0 16px 40px rgba(9, 34, 58, 0.10); --shadow-pop: 0 22px 54px rgba(9, 34, 58, 0.16); --field-bg: #ffffff; } /* ============================================================ SWAPPABLE THEMES — one override block each. Structure, spacing and motion are shared; only the palette changes. ============================================================ */ /* Sailcloth — the same light idea in canvas and bronze rather than gelcoat and brass. For anyone who finds the default too cool. */ html[data-site-theme="sailcloth"] { --c-bg: #F8F5EF; --c-bg-raise: #FFFDF9; --c-surface: rgba(255, 253, 249, 0.88); --c-surface-2: #FFFDF9; --c-surface-solid: #FFFDF9; --c-border: rgba(48, 40, 28, 0.14); --c-border-strong: rgba(48, 40, 28, 0.27); --c-text: #23303A; --c-text-dim: rgba(35, 48, 58, 0.72); --c-text-faint: rgba(35, 48, 58, 0.55); --c-brand: #1D5E74; --c-brand-deep: #133F4F; --c-brand-soft: #3F8AA3; --c-accent: #A0702A; --c-accent-soft: #C99A53; --c-glow-brand: rgba(29, 94, 116, 0.14); --c-glow-accent: rgba(160, 112, 42, 0.14); --c-grid-line: rgba(29, 94, 116, 0.06); --shadow-card: 0 16px 40px rgba(60, 46, 26, 0.10); --shadow-pop: 0 22px 54px rgba(60, 46, 26, 0.16); --field-bg: #FFFDF9; } /* Harbour — the same yacht after dark: deep navy water, lit windows, brass. */ html[data-site-theme="harbour"] { --c-bg: #04101C; --c-bg-raise: #07192A; --c-surface: rgba(150, 196, 230, 0.06); --c-surface-2: rgba(150, 196, 230, 0.12); --c-surface-solid: #0A2036; --c-border: rgba(150, 196, 230, 0.15); --c-border-strong: rgba(150, 196, 230, 0.28); --c-text: #EAF3FA; --c-text-dim: rgba(234, 243, 250, 0.64); --c-text-faint: rgba(234, 243, 250, 0.38); --c-brand: #2F92CE; --c-brand-deep: #14618F; --c-brand-soft: #8FCAEB; --c-accent: #D9A441; --c-accent-soft: #EFCE8C; --c-glow-brand: rgba(47, 146, 206, 0.34); --c-glow-accent: rgba(217, 164, 65, 0.20); --c-grid-line: rgba(80, 170, 230, 0.06); --c-ok: #3ECF8E; --c-ok-text: #9DF0C6; --c-err: #F2565F; --c-err-text: #FF9AA0; --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.55); --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.65); --field-bg: rgba(150, 196, 230, 0.09); } /* Abyss — deep water, no brass at all. Cyan on near-black. */ html[data-site-theme="abyss"] { --c-bg: #04070B; --c-bg-raise: #080D14; --c-surface: rgba(160, 210, 225, 0.055); --c-surface-2: rgba(160, 210, 225, 0.11); --c-surface-solid: #0B121B; --c-border: rgba(160, 210, 225, 0.14); --c-border-strong: rgba(160, 210, 225, 0.26); --c-text: #E8F4F8; --c-text-dim: rgba(232, 244, 248, 0.62); --c-text-faint: rgba(232, 244, 248, 0.36); --c-brand: #128FB5; --c-brand-deep: #0A5E78; --c-brand-soft: #6FCDE3; --c-accent: #4BD5E8; --c-accent-soft: #A6EBF5; --c-glow-brand: rgba(18, 143, 181, 0.34); --c-glow-accent: rgba(75, 213, 232, 0.18); --c-grid-line: rgba(75, 213, 232, 0.055); --c-ok: #3ECF8E; --c-ok-text: #9DF0C6; --c-err: #F2565F; --c-err-text: #FF9AA0; --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.6); --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.7); --field-bg: rgba(160, 210, 225, 0.08); } /* Sunset — the last hour before the marina lights come on. */ html[data-site-theme="sunset"] { --c-bg: #120B0C; --c-bg-raise: #1B1011; --c-surface: rgba(255, 190, 150, 0.06); --c-surface-2: rgba(255, 190, 150, 0.12); --c-surface-solid: #1F1314; --c-border: rgba(255, 190, 150, 0.15); --c-border-strong: rgba(255, 190, 150, 0.28); --c-text: #FBF2EC; --c-text-dim: rgba(251, 242, 236, 0.64); --c-text-faint: rgba(251, 242, 236, 0.38); --c-brand: #D2653A; --c-brand-deep: #9B4222; --c-brand-soft: #F0A281; --c-accent: #EBB755; --c-accent-soft: #F7D89B; --c-glow-brand: rgba(210, 101, 58, 0.32); --c-glow-accent: rgba(235, 183, 85, 0.20); --c-grid-line: rgba(235, 150, 85, 0.06); --c-ok: #3ECF8E; --c-ok-text: #9DF0C6; --c-err: #F2565F; --c-err-text: #FF9AA0; --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.55); --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.65); --field-bg: rgba(255, 190, 150, 0.09); } /* Theme-independent tokens: type, rhythm, easing. */ :root { --font-body: "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; /* A serif display face, deliberately. It is what separates a yacht from a gadget, and every machine already has one of these — no web font, no CDN. */ --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; --radius-sm: 8px; --radius: 14px; --radius-lg: 24px; --header-h: 78px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.22, .61, .36, 1); --maxw: 1200px; --grad-brand: linear-gradient(100deg, var(--c-brand), var(--c-accent), var(--c-brand)); --grad-btn: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand) 58%, var(--c-accent)); --shadow-btn: 0 8px 24px var(--c-glow-brand); } /* ============================================================ TELERIK — the wizard and every form control paint from the SAME palette. Kendo's theme is driven by custom properties, so the whole mapping is this block; nothing per-control is restyled unless the default shape (not colour) is wrong for this site. ============================================================ */ :root { --kendo-color-primary: var(--c-brand); --kendo-color-primary-hover: var(--c-brand-deep); --kendo-color-primary-active: var(--c-brand-deep); --kendo-color-primary-emphasis: var(--c-brand-soft); --kendo-color-primary-subtle: var(--c-surface-2); --kendo-color-primary-on-subtle: var(--c-text); --kendo-color-on-primary: var(--c-on-brand); --kendo-color-base: var(--c-surface); --kendo-color-base-hover: var(--c-surface-2); --kendo-color-base-active: var(--c-surface-2); --kendo-color-base-subtle: var(--c-surface); --kendo-color-base-emphasis: var(--c-border-strong); --kendo-color-on-base: var(--c-text); --kendo-color-app-surface: var(--c-surface-solid); --kendo-color-on-app-surface: var(--c-text); --kendo-color-surface: var(--c-surface); --kendo-color-surface-alt: var(--c-surface-solid); --kendo-color-subtle: var(--c-text-dim); --kendo-color-border: var(--c-border); --kendo-color-border-alt: var(--c-border-strong); --kendo-color-success: var(--c-ok); --kendo-color-error: var(--c-err); --kendo-color-info: var(--c-brand); --kendo-color-warning: var(--c-accent); --kendo-font-family: var(--font-body); --kendo-font-size: 1rem; --kendo-border-radius-md: 10px; --kendo-border-radius-lg: 12px; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } /* Horizontal overflow has to be clipped on BOTH html and body: on a phone the html element can still pan sideways when only body hides it, and the entrance animations translate whole sections up to 80px past the viewport edge. `clip` blocks it without creating a scroll container; `hidden` is the fallback. */ html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.64; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--c-glow-brand); color: var(--c-text); } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.012em; margin: 0; } img { max-width: 100%; display: block; } h1:focus, h1:focus-visible { outline: none; } /* FocusOnNavigate targets it */ .gradient-text { background: var(--grad-brand); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient-slide 9s linear infinite; padding-bottom: .06em; } @keyframes gradient-slide { to { background-position: 200% center; } } .mono { font-family: var(--font-mono); } .center { text-align: center; } /* ============================================================ AMBIENT BACKGROUND ============================================================ */ .site-shell { position: relative; min-height: 100vh; display: flex; flex-direction: column; } /* A chart grid rather than the model site's receding perspective floor: flat, quiet, and it reads as a sea chart under the page instead of a stage set. */ .bg-grid { position: fixed; inset: 0; z-index: -3; pointer-events: none; background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px); background-size: 68px 68px; -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 12%, transparent 76%); mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 12%, transparent 76%); animation: grid-breathe 14s var(--ease-out) infinite; } @keyframes grid-breathe { 0%, 100% { opacity: .55; } 50% { opacity: .95; } } .bg-aurora { position: fixed; inset: -20%; z-index: -2; pointer-events: none; background: radial-gradient(42% 42% at 14% 8%, var(--c-glow-brand), transparent 64%), radial-gradient(36% 36% at 86% 16%, var(--c-glow-accent), transparent 64%), radial-gradient(48% 48% at 70% 92%, var(--c-glow-brand), transparent 66%); filter: blur(56px); animation: aurora-drift 34s ease-in-out infinite alternate; } @keyframes aurora-drift { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-4%, 3%, 0); } } /* The mote field is a BACKGROUND layer: it must be out of flow like the two above, or it takes a full viewport of space and pushes the header down. */ #boa-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* Reading progress. One transform per frame, nothing else. */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; } .scroll-progress > i { display: block; height: 100%; width: 100%; background: var(--grad-btn); transform: scaleX(0); transform-origin: 0 50%; } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; gap: 20px; padding: 0 clamp(16px, 4vw, 44px); background: color-mix(in srgb, var(--c-bg) 80%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--c-border); transition: box-shadow .3s, background .3s; } .site-header.is-stuck { box-shadow: 0 8px 26px rgba(9, 34, 58, .08); } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--c-text); } .brand-mark { display: inline-flex; } .brand-mark svg { display: block; } .brand-mark.is-compact svg { width: 32px; height: 32px; } /* The SVG gradient stops read the palette, so the mark retints with the theme. Both stops are BLUES, not brand→accent like the rest of the gradients on this site: sea blue to brass passes straight through olive, and a hull that fades into a muddy green is not a mark anybody wants on their boat. The brass earns its keep on the buttons and the eyebrows instead. */ .lg-a { stop-color: var(--c-brand-deep); } .lg-b { stop-color: var(--c-brand-soft); } /* Letter-spaced capitals, not a logotype with a swash: on a marine brand that is what reads as a shipyard plate rather than as an app icon. */ .brand-word { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; letter-spacing: .175em; text-transform: uppercase; white-space: nowrap; } /* The mark settles in once on load — a short rise, not a performance. */ .lg-hull { animation: mark-in .7s var(--ease-spring) backwards; transform-box: fill-box; transform-origin: 50% 90%; } @keyframes mark-in { from { opacity: 0; transform: translateY(3px) scale(.88); } to { opacity: 1; transform: none; } } .brand:hover .lg-hull { filter: brightness(1.1); transition: filter .2s; } .header-nav { margin-left: auto; display: flex; align-items: center; gap: 16px; } .header-link { color: var(--c-text-dim); font-weight: 600; font-size: .94rem; position: relative; padding: 4px 2px; transition: color .18s; } .header-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--grad-btn); transition: right .28s var(--ease-out); } .header-link:hover { color: var(--c-text); } .header-link:hover::after { right: 0; } .header-actions { display: flex; align-items: center; gap: 10px; } .nav-toggle, .nav-burger { display: none; } /* The mobile-only language picker (see MainLayout). Desktop shows the copy that lives inside .header-nav instead. */ .header-lang-mobile { display: none; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: .98rem; border-radius: 999px; padding: 12px 26px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: transform .2s var(--ease-out), box-shadow .25s, background .2s, border-color .2s, color .2s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* background-clip is NOT decoration. .btn carries `border: 1px solid transparent` (so that .btn-ghost can colour it without shifting anything), and a gradient painted across the BORDER box shows through that transparent ring. At the rounded ends the browser's antialiasing samples past the end of the gradient and clamps to its final stop — the brass — so a crescent appeared hugging the OUTSIDE of the left curve on every primary button. Confining the paint to the padding box removes it and changes no geometry. Inherited from the model site, where it cost an afternoon to find. */ .btn-primary { background: var(--grad-btn); color: var(--c-on-brand); box-shadow: var(--shadow-btn); background-clip: padding-box; } .btn-primary:hover { box-shadow: 0 12px 30px var(--c-glow-brand); } .btn-ghost { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); } .btn-ghost:hover { background: var(--c-surface-2); border-color: var(--c-brand); } .btn-quiet { background: transparent; color: var(--c-text-dim); padding-left: 6px; padding-right: 6px; } .btn-quiet:hover { color: var(--c-text); } .btn-sm { padding: 9px 18px; font-size: .88rem; } .btn-lg { padding: 15px 32px; font-size: 1.02rem; } .btn-block { width: 100%; } .btn[disabled] { opacity: .55; pointer-events: none; } /* a light sweep crosses the primary button on hover */ .btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 44%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent); transform: skewX(-18deg); transition: left .6s ease; } .btn-primary:hover::after { left: 130%; } .btn-arrow svg { transition: transform .25s var(--ease-out); } .btn:hover .btn-arrow svg, .btn:hover > svg { transform: translateX(3px); } /* ============================================================ SECTION SCAFFOLD ============================================================ */ .site-main { flex: 1; } .section { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8.5vw, 124px) clamp(16px, 4vw, 44px); } .section-narrow { max-width: 860px; } .section-head { max-width: 740px; } .section-head.center { margin: 0 auto; } .eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; color: var(--c-accent); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 9px; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--c-accent); opacity: .8; } .eyebrow.center-line::before { display: none; } .section-title { font-size: clamp(1.95rem, 4.2vw, 3.1rem); font-weight: 600; margin-bottom: 16px; letter-spacing: -0.015em; } .section-sub { color: var(--c-text-dim); font-size: 1.1rem; } .section-foot { margin-top: 24px; color: var(--c-text-faint); font-size: .9rem; max-width: 760px; } /* For a footnote that is actually an objection-killer rather than small print — "nothing is cut, nothing is drilled through a bulkhead". The faint tier is right for a trademark line and wrong for the sentence that decides a sale. */ .section-foot.strong { color: var(--c-text-dim); font-size: .95rem; } .section-foot.center { margin-left: auto; margin-right: auto; text-align: center; } /* ============================================================ HERO ============================================================ */ .hero { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(24px, 5vw, 62px); align-items: center; min-height: calc(100vh - var(--header-h)); max-width: var(--maxw); margin: 0 auto; padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 44px) clamp(48px, 7vw, 86px); } .hero-copy { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .hero-title { font-size: clamp(2.3rem, 5vw, 4.1rem); font-weight: 600; letter-spacing: -0.018em; } .hero-sub { color: var(--c-text-dim); font-size: clamp(1.04rem, 1.8vw, 1.22rem); margin: 24px 0 34px; max-width: 560px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero-note { margin-top: 22px; color: var(--c-text-faint); font-size: .9rem; display: flex; align-items: center; gap: 8px; } .hero-note svg { flex: none; color: var(--c-ok); } .hero-visual { position: relative; } .hero-img-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-border); box-shadow: var(--shadow-card); aspect-ratio: 3 / 2; } .hero-img { width: 100%; height: 100%; object-fit: cover; } .hero-img-glow { position: absolute; inset: -28% -12%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, var(--c-glow-brand), transparent 70%); filter: blur(44px); } /* The floating "scene" chip over the hero image: the boat answering a phrase. It is the one place the promise is shown rather than claimed. */ .hero-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; background: color-mix(in srgb, var(--c-surface-solid) 92%, transparent); border: 1px solid var(--c-border-strong); box-shadow: var(--shadow-pop); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: .87rem; font-weight: 600; white-space: nowrap; color: var(--c-text); } .hero-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ok); flex: none; box-shadow: 0 0 10px var(--c-ok); } .hero-chip.one { left: -22px; top: 15%; animation: float-a 7s ease-in-out infinite; } .hero-chip.two { right: -14px; bottom: 13%; animation: float-b 8.5s ease-in-out infinite; } @keyframes float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } } /* ============================================================ THE CLAIM — "not every yacht owner is a billionaire" The one sentence the whole business is built on, so it gets a band of its own and nothing else in it. ============================================================ */ .claim-band { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 6vw, 84px) clamp(16px, 4vw, 44px); } .claim { position: relative; text-align: center; max-width: 900px; margin: 0 auto; padding: clamp(28px, 5vw, 52px) clamp(18px, 4vw, 40px); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } .claim-quote { font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.24; letter-spacing: -0.015em; margin: 0; } .claim-after { margin: 20px auto 0; max-width: 640px; color: var(--c-text-dim); font-size: 1.02rem; } /* The brass rule under the quotation, drawn from the middle out. */ .claim::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 88px; height: 2px; transform: translateX(-50%); background: var(--grad-btn); } /* ============================================================ TRUST / TECHNOLOGY STRIP ============================================================ */ .strip { padding-top: 0; } .strip-label { text-align: center; color: var(--c-text-faint); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-mono); margin-bottom: 20px; } .strip-row { list-style: none; margin: 0; padding: 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; } .strip-row li { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.75rem); font-weight: 600; letter-spacing: .01em; line-height: 1.5; color: var(--c-text-dim); transition: color .25s; } .strip-row li:hover { color: var(--c-text); } /* the separator lives on the item, so it wraps with it and never dangles */ .strip-row li + li::before { content: "·"; color: var(--c-text-faint); font-weight: 400; margin: 0 .55em; } /* ============================================================ CARDS + GRIDS ============================================================ */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; } .card { position: relative; overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 26px; transition: transform .35s var(--ease-out), border-color .3s, background .3s, box-shadow .35s; } .card:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); box-shadow: var(--shadow-card); } .card-img-wrap { border-radius: 10px; overflow: hidden; margin: -6px -6px 18px; aspect-ratio: 16 / 11; } .card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); } .card:hover .card-img { transform: scale(1.06); } .card-num { font-family: var(--font-mono); color: var(--c-accent); font-size: .8rem; letter-spacing: .14em; } .card-title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; margin: 10px 0 8px; letter-spacing: -.01em; } .card-body { color: var(--c-text-dim); font-size: .97rem; } .card-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-accent); margin-bottom: 16px; } /* A "when X → the boat does Y" scenario card. The trigger is set in the mono face and the accent colour so the eye can scan the conditions on their own before reading any of the outcomes. */ .scene-when { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--c-accent); line-height: 1.4; } .scene-when svg { flex: none; } .scene .card-body { font-size: .97rem; } /* signature interaction: a pool of light follows the pointer across every card. Dark palettes only — on paper it is a grey smear (see the mode block). */ .card::after, .svc-card::after, .opt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 40%), var(--c-glow-brand), transparent 68%); opacity: 0; transition: opacity .35s; } .card:hover::after, .svc-card:hover::after { opacity: .55; } /* Gentler on a wizard tile: it is a control, and a control that lights up as brightly as a feature card reads as already selected. */ .opt:hover::after { opacity: .4; } /* ============================================================ SERVICES — the two things we sell, side by side ============================================================ */ .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; } .svc-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); transition: transform .35s var(--ease-out), border-color .3s, box-shadow .35s; } .svc-card:hover { transform: translateY(-6px); border-color: var(--c-border-strong); box-shadow: var(--shadow-card); } .svc-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .svc-card:hover .svc-media img { transform: scale(1.05); } .svc-tag { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; color: var(--c-on-brand); background: var(--c-brand); box-shadow: var(--shadow-btn); } .svc-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; } .svc-title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 600; letter-spacing: -.012em; margin-bottom: 10px; } .svc-desc { color: var(--c-text-dim); font-size: 1rem; margin-bottom: 18px; } .svc-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .svc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; color: var(--c-text); } /* The tick, defined ONCE. .bul-grid uses the same mark: a second copy would be a second chance for the two to drift, and a tick drawn from a literal colour could not follow the theme. */ .svc-list li::before, .bul-grid li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.2 3.6 8.4l1.1-1.1 1.7 1.7 4.9-4.9 1.1 1.1z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.2 3.6 8.4l1.1-1.1 1.7 1.7 4.9-4.9 1.1 1.1z'/%3E%3C/svg%3E") center/contain no-repeat; background: var(--c-accent); } .svc-body .btn { margin-top: auto; align-self: flex-start; } /* A flat checklist that pairs up when there is room. Each item is a single short line, which is why 240px is comfortable here where a prose card needs 300. */ .bul-grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px 28px; } .bul-grid li { display: flex; gap: 11px; align-items: flex-start; font-size: .97rem; color: var(--c-text); padding: 9px 0; border-bottom: 1px solid var(--c-border); } /* ============================================================ SPLIT — image on one side, argument on the other ============================================================ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 68px); align-items: center; } .split.flip .split-media { order: 2; } .split-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-border); box-shadow: var(--shadow-card); } /* height:auto is load-bearing. The carries width/height attributes (they reserve the box and stop the page jumping while it loads), and the height attribute lands as a used height of 1024px — which beats aspect-ratio, since aspect-ratio only sizes the box when the other axis is auto. Without this the photograph renders a thousand pixels tall in a 458px column. */ .split-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .split-glow { position: absolute; inset: -20%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, var(--c-glow-brand), transparent 70%); filter: blur(40px); } /* the "a 20-year-old yacht vs a new one" comparison — the core of the pitch */ .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; } .vs-col { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 24px; background: var(--c-surface); } .vs-col.them { opacity: .86; } .vs-col.us { border-color: color-mix(in srgb, var(--c-brand) 45%, transparent); box-shadow: 0 0 0 1px var(--c-glow-brand); } .vs-head { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 16px; } .vs-col.them .vs-head { color: var(--c-text-faint); } .vs-col.us .vs-head { color: var(--c-accent); } .vs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .vs-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; } .vs-list li span:first-child { flex: none; width: 18px; text-align: center; font-weight: 800; } .vs-col.them .vs-list li { color: var(--c-text-dim); } .vs-col.them .vs-list li span:first-child { color: var(--c-err-text); } .vs-col.us .vs-list li span:first-child { color: var(--c-ok-text); } /* ============================================================ CAPABILITIES — what she can do ============================================================ */ .cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; } .cap { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--c-border); aspect-ratio: 1 / 1; transition: transform .4s var(--ease-out), border-color .3s; } .cap:hover { transform: translateY(-6px); border-color: var(--c-border-strong); } .cap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); } .cap:hover img { transform: scale(1.08); } /* The scrim is literal black on purpose and in ONE place: it sits over a photograph, not over the page, so it must not follow the palette — white text has to stay readable on every theme, including the two light ones. */ .cap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,16,28,.88) 4%, rgba(4,16,28,.18) 56%, transparent 80%); } .cap-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; z-index: 2; } .cap-title { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: #fff; } .cap-sub { font-size: .83rem; color: rgba(255,255,255,.72); margin-top: 3px; } /* the plain list of everything else, so nothing looks omitted */ .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .chip { font-size: .87rem; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-dim); transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease-out); } .chip:hover { color: var(--c-text); border-color: var(--c-brand); transform: translateY(-2px); } /* ============================================================ PROCESS — a line with stations ============================================================ */ .process { position: relative; } .proc-line { position: absolute; left: 0; right: 0; top: 62px; height: 2px; overflow: hidden; } .proc-line i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, transparent, var(--c-brand), var(--c-accent), transparent); transform: scaleX(0); transform-origin: 0 50%; } .proc-line.is-drawn i { transform: scaleX(1); transition: transform 1.6s var(--ease-out); } /* auto-fit at the measured 300px minimum, so the five steps lay themselves out — three across on a desk, two on a tablet, one on a phone — with no breakpoint of their own to keep in step with the rest of the file. Each body now carries the commercial mechanics (what the survey fee does, when it comes back), so they need the full prose measure, not the 215px that five-across would give. */ .proc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 46px; position: relative; } .proc-step { text-align: left; } .proc-node { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: .92rem; color: var(--c-on-brand); background: var(--grad-btn); box-shadow: 0 0 0 6px var(--c-bg), 0 8px 20px var(--c-glow-brand); margin-bottom: 20px; } .proc-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 16px; border: 1px solid var(--c-border); } .proc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .proc-step:hover .proc-img img { transform: scale(1.06); } .proc-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-bottom: 8px; } .proc-body { color: var(--c-text-dim); font-size: .95rem; } /* ============================================================ STATS ============================================================ */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; } .stat { text-align: center; padding: 26px 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); } .stat-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; } .stat-label { color: var(--c-text-dim); font-size: .92rem; margin-top: 10px; } /* ============================================================ BANDS — pull-out and the closing CTA ============================================================ */ .pull { border-left: 3px solid var(--c-accent); padding: 6px 0 6px 26px; margin: 34px 0; font-family: var(--font-display); font-size: clamp(1.18rem, 2.3vw, 1.6rem); font-weight: 600; font-style: italic; letter-spacing: -.01em; line-height: 1.38; } .cta-band { text-align: center; position: relative; } .cta-inner { position: relative; overflow: hidden; border: 1px solid var(--c-border-strong); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 70px) clamp(20px, 5vw, 60px); background: var(--c-surface); box-shadow: var(--shadow-card); } .cta-inner::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(38% 38% at 50% 0%, var(--c-glow-brand), transparent 66%); pointer-events: none; } .cta-inner > * { position: relative; } .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .cta-note { margin-top: 18px; color: var(--c-text-faint); font-size: .88rem; } /* ============================================================ PANELS / FORMS ============================================================ */ .panel-page { max-width: 560px; margin: 0 auto; padding: clamp(44px, 8vw, 88px) 20px; } .panel-page.wide { max-width: 900px; } .panel-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow-card); } .panel-eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 12px; } .panel-title { font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 600; margin-bottom: 10px; } .panel-sub { color: var(--c-text-dim); margin-bottom: 26px; } .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } .field > label { font-size: .89rem; color: var(--c-text-dim); font-weight: 600; } .field .hint, .hint { font-size: .82rem; color: var(--c-text-faint); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* native controls, for the few places a Telerik control would be overkill */ .field input, .field select, .field textarea { background: var(--field-bg); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 14px; color: var(--c-text); font-size: 1rem; font-family: var(--font-body); width: 100%; transition: border-color .2s, box-shadow .2s; } .field textarea { resize: vertical; min-height: 110px; line-height: 1.55; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-glow-brand); } .field input::placeholder, .field textarea::placeholder { color: var(--c-text-faint); } .form-msg { border-radius: 10px; padding: 13px 15px; font-size: .93rem; margin: 4px 0 16px; } .form-msg.err { background: color-mix(in srgb, var(--c-err) 12%, transparent); color: var(--c-err-text); border: 1px solid color-mix(in srgb, var(--c-err) 40%, transparent); } .form-msg.ok { background: color-mix(in srgb, var(--c-ok) 12%, transparent); color: var(--c-ok-text); border: 1px solid color-mix(in srgb, var(--c-ok) 40%, transparent); } .form-alt { text-align: center; color: var(--c-text-dim); font-size: .92rem; margin-top: 18px; } .form-alt a { color: var(--c-brand); font-weight: 600; } .choice { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--c-text); cursor: pointer; padding: 4px 0; } .choice input { width: auto; accent-color: var(--c-brand); margin: 0; } .spinner { width: 20px; height: 20px; border: 2px solid color-mix(in srgb, var(--c-on-brand) 28%, transparent); border-top-color: var(--c-on-brand); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* the reference the visitor gets back after a successful submission */ .ref-box { font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: .1em; text-align: center; background: var(--c-surface-2); border: 1px dashed var(--c-border-strong); border-radius: 12px; padding: 20px; margin: 22px 0; color: var(--c-accent); } /* ============================================================ QUOTE WIZARD ============================================================ */ .wiz { max-width: 960px; margin: 0 auto; padding: clamp(32px, 6vw, 68px) clamp(16px, 4vw, 24px); } .wiz-head { text-align: center; margin-bottom: 26px; } .wiz-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow-card); } .wiz-step-title { font-family: var(--font-display); font-size: clamp(1.35rem, 2.8vw, 1.85rem); font-weight: 600; letter-spacing: -.012em; margin-bottom: 8px; } .wiz-step-sub { color: var(--c-text-dim); margin-bottom: 26px; } .wiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--c-border); } .wiz-progress { display: flex; align-items: center; gap: 10px; color: var(--c-text-faint); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; } /* big tappable answers — the wizard is mostly this control */ .opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .opt { position: relative; overflow: hidden; text-align: left; cursor: pointer; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); padding: 18px; color: var(--c-text); font-family: inherit; font-size: 1rem; transition: border-color .2s, background .2s, transform .2s var(--ease-out), box-shadow .25s; } .opt:hover { transform: translateY(-3px); border-color: var(--c-border-strong); background: var(--c-surface-2); } .opt.on { border-color: var(--c-brand); background: color-mix(in srgb, var(--c-brand) 10%, var(--c-surface-2)); box-shadow: 0 0 0 1px var(--c-glow-brand); } .opt-ico { color: var(--c-accent); margin-bottom: 12px; display: block; } /* Both are (a
inside a