/* ============================================================ AMIWO — amiwoy.yachts Dark cinematic luxury. System fonts only (CSP: default-src 'self'). ============================================================ */ @import url("partners.css?v=20260909-2"); @import url("privacy.css?v=20260910-3"); :root { --bg: #303b4d; --bg-2: #394659; --bg-3: #445267; --gold: #a9c1d3; --gold-light: #e8f1f6; --gold-deep: #7897ad; --text: #f7fafc; --muted: #bdc9d2; --line: rgba(169, 193, 211, 0.3); --line-strong: rgba(201, 220, 232, 0.58); --line-soft: rgba(232, 241, 246, 0.14); --glass: rgba(255, 255, 255, 0.04); --glass-2: rgba(255, 255, 255, 0.07); --shadow: 0 22px 60px rgba(0, 0, 0, 0.55); --glow: 0 0 32px rgba(169, 193, 211, 0.22); --max: 1180px; --pad: max(20px, calc((100% - var(--max)) / 2)); --serif: Georgia, "Times New Roman", "Nimbus Roman", serif; --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Guard against sub-pixel overflow. Set on (not ) so the viewport stays the scroll container and the sticky header keeps working. */ overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.7 var(--sans); } img, svg { max-width: 100%; } h1, h2, h3, p, ul, ol, figure { margin-top: 0; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: 0.02em; color: var(--text); } h1 { font-size: clamp(1.85rem, 6.6vw, 4rem); text-transform: uppercase; letter-spacing: 0.035em; margin: 0 0 0.45em; } h2 { font-size: clamp(1.45rem, 3.6vw, 2.5rem); margin: 0 0 0.5em; } h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 0 0 0.4em; } p { margin-bottom: 1.1em; } a { color: inherit; text-decoration: none; } strong, b { font-weight: 600; } :focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px; } [hidden] { display: none !important; } .eyebrow { margin: 0 0 0.9em; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); } .lead { font-size: clamp(1rem, 2.1vw, 1.16rem); color: #ded3c2; } .section { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 9vw, 104px) 20px; } .section-head { max-width: 640px; margin-bottom: clamp(28px, 5vw, 48px); } .section-head p:last-child { color: var(--muted); margin-bottom: 0; } /* ---------- skip link ---------- */ .skip-link { position: fixed; z-index: 120; left: 12px; top: 12px; padding: 12px 20px; background: var(--gold); color: #131007; font-weight: 700; transform: translateY(-200%); } .skip-link:focus { transform: none; } /* ---------- header ---------- */ .nav { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 10px var(--pad); background: rgba(48, 59, 77, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; min-height: 44px; } .brand-anchor { display: grid; place-items: center; width: 30px; height: 30px; color: var(--gold-light); } .brand-photo { width: 34px; height: 38px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .28)); } .brand-name { display: grid; line-height: 1; letter-spacing: .18em; } .brand-name b { font: 600 .95rem/1 var(--sans); color: var(--text); } .brand-name small { margin-top: 5px; font: 600 .58rem/1 var(--sans); color: var(--gold); } .brand-anchor svg { width: 26px; height: 26px; } .brand-word { font-family: var(--serif); font-size: 1.18rem; letter-spacing: 0.42em; text-indent: 0.42em; color: var(--gold-light); } body[data-page="home"] .brand-word { display: none; } .nav nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; } .nav nav a { display: inline-flex; align-items: center; min-height: 44px; color: #d8cebd; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .nav nav a:hover { color: var(--gold-light); } .nav nav a[aria-current="page"] { color: var(--gold-light); border-bottom-color: var(--gold); } .langs { display: flex; gap: 2px; } .langs button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted); font: 700 0.72rem/1 var(--sans); letter-spacing: 0.14em; cursor: pointer; border-radius: 3px; } .langs button:hover { color: var(--text); } .langs button[aria-pressed="true"] { color: #17130a; background: var(--gold); } .menu { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 3px; background: transparent; cursor: pointer; padding: 0; } .menu-bars { display: grid; gap: 5px; justify-items: center; } .menu-bars i { display: block; width: 20px; height: 1.5px; background: var(--gold-light); transform-origin: center; transition: transform .2s ease, opacity .2s ease; } .nav.open .menu-bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav.open .menu-bars i:nth-child(2) { opacity: 0; } .nav.open .menu-bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ---------- buttons ---------- */ .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 13px 26px; border: 1px solid var(--gold); border-radius: 3px; background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, #a9871c); color: #161205; font: 700 0.8rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; cursor: pointer; box-shadow: 0 10px 30px rgba(201, 162, 39, 0.18); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } .button:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(201, 162, 39, 0.3); } .button:disabled { opacity: 0.55; cursor: wait; transform: none; } .button svg { width: 16px; height: 16px; flex: 0 0 auto; } .button.ghost { background: transparent; color: var(--gold-light); box-shadow: none; } .button.ghost:hover { background: rgba(201, 162, 39, 0.12); } .button.small { min-height: 44px; padding: 10px 18px; font-size: 0.7rem; } .text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-light); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); } .text-link:hover { border-bottom-color: var(--gold-light); } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 6vw, 64px) 18px clamp(44px, 8vw, 88px); background-color: #07080a; background-image: var(--hero); background-size: cover; background-position: center; overflow: hidden; isolation: isolate; } .hero-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 50% 12%, rgba(6, 7, 9, 0.28), rgba(6, 7, 9, 0.86) 78%), linear-gradient(180deg, rgba(6, 7, 9, 0.78), rgba(6, 7, 9, 0.34) 32%, rgba(6, 7, 9, 0.92)); } .real-helm-hero { --helm-y: 63%; min-height: max(640px, calc(100svh - 68px)); background-size: cover; background-position: center; background-repeat: no-repeat; } .real-helm-hero .hero-inner { min-height: calc(max(640px, 100svh - 68px) - 72px); display: flex; flex-direction: column; align-items: center; } .real-helm-hero .hero-shade { background: linear-gradient(180deg, rgba(27, 37, 51, .82) 0%, rgba(27, 37, 51, .28) 34%, rgba(20, 29, 42, .2) 62%, rgba(20, 29, 42, .78) 100%), radial-gradient(circle at 50% 54%, transparent 0 23%, rgba(21, 30, 43, .28) 55%, rgba(21, 30, 43, .7) 100%); } .hero-logo { display: block; width: clamp(42px, 5vw, 62px); height: clamp(46px, 6vw, 68px); object-fit: contain; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .45)); } .real-helm-hero .hero-copy { display: none; } .real-helm-hero .wheel { --wheel: min(49vw, calc(74svh - 50px), 590px); position: absolute; left: 50%; top: var(--helm-y); margin: 0; transform: translate(-50%, -50%); } .real-helm-hero .wheel-ring { opacity: .86; } .real-helm-hero .wheel-ring circle:nth-child(3), .real-helm-hero .wheel-ring circle:nth-child(5) { display: none; } .real-helm-hero .wheel-ring circle:nth-child(2) { fill: transparent; } .real-helm-hero .wheel-hit path { fill: rgba(48, 59, 77, .52); stroke: transparent; backdrop-filter: blur(2px); } .real-helm-hero .wheel-sector:hover .wheel-hit path, .real-helm-hero .wheel-sector:focus-visible .wheel-hit path { fill: rgba(169, 193, 211, .42); stroke: #fff; } .real-helm-hero .wheel-icon { color: #e8f1f6; } .real-helm-hero .actions { margin-top: auto; position: relative; z-index: 3; } .real-helm-hero .actions .text-link { display: none; } .hero-inner { width: 100%; max-width: 720px; margin: 0 auto; text-align: center; } .hero-lockup { display: grid; justify-items: center; gap: 6px; margin-bottom: clamp(18px, 4vw, 34px); } .hero-anchor { color: var(--gold-light); filter: drop-shadow(0 0 14px rgba(201, 162, 39, 0.35)); } .hero-anchor svg { width: clamp(26px, 6vw, 34px); height: clamp(26px, 6vw, 34px); display: block; } .hero-word { font-family: var(--serif); font-size: clamp(1.7rem, 6.4vw, 2.6rem); letter-spacing: 0.44em; text-indent: 0.44em; color: var(--gold-light); text-shadow: 0 0 26px rgba(201, 162, 39, 0.32); } .hero-copy h1 { text-shadow: 0 4px 26px rgba(0, 0, 0, 0.6); } .hero-copy .lead { max-width: 34em; margin: 0 auto; color: #e4dacb; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); } .hero .actions { flex-direction: column; align-items: center; margin: clamp(6px, 2vw, 16px) 0 clamp(26px, 5vw, 42px); } .hero .actions .button { width: min(100%, 380px); } /* ---------- ship's wheel navigator ---------- */ .wheel { --wheel: min(78vw, 460px); position: relative; display: block; width: var(--wheel); height: var(--wheel); max-width: 100%; margin: clamp(14px, 4vw, 34px) auto clamp(20px, 5vw, 40px); } .wheel::before { content: ""; position: absolute; inset: -7%; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 39, 0.2), rgba(201, 162, 39, 0) 64%); pointer-events: none; } .wheel-center { position: absolute; inset: 20%; border-radius: 50%; background: repeating-conic-gradient( from 0deg, rgba(232, 241, 246, .9) 0 1deg, transparent 1deg 15deg ); mask: radial-gradient(circle, transparent 0 47%, #000 48% 50%, transparent 51%); pointer-events: none; animation: wheel-photo-spin 36s linear infinite; } @keyframes wheel-photo-spin { to { transform: rotate(360deg); } } .wheel-ring, .wheel-hit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .wheel-ring { pointer-events: none; filter: drop-shadow(0 0 18px rgba(201, 162, 39, 0.28)); } .wheel-sector { position: absolute; inset: 0; pointer-events: none; color: var(--text); } .wheel-hit path { fill: rgba(201, 162, 39, 0.05); stroke: rgba(201, 162, 39, 0.5); stroke-width: 1.4; pointer-events: auto; cursor: pointer; transition: fill 0.25s ease, stroke 0.25s ease, stroke-width 0.25s ease; } .wheel-sector:hover .wheel-hit path, .wheel-sector:focus-visible .wheel-hit path { fill: rgba(201, 162, 39, 0.2); stroke: var(--gold-light); stroke-width: 2.6; } .wheel-face { --lr: calc(var(--wheel) * 0.414); position: absolute; left: 50%; top: 50%; width: calc(var(--wheel) * 0.19); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--lr))) rotate(calc(-1 * var(--a))) scale(var(--s, 1)); transition: transform 0.25s ease, color 0.25s ease; } .wheel-sector:hover .wheel-face, .wheel-sector:focus-visible .wheel-face { --s: 1.07; color: var(--gold-light); } .wheel-sector:focus-visible { outline: none; } .wheel-sector:focus-visible .wheel-face { outline: 2px solid var(--gold-light); outline-offset: 6px; border-radius: 4px; } .wheel-icon { display: block; color: var(--gold); transition: color 0.25s ease; } .wheel-sector:hover .wheel-icon, .wheel-sector:focus-visible .wheel-icon { color: var(--gold-light); } .wheel-icon svg { display: block; width: calc(var(--wheel) * 0.052); height: calc(var(--wheel) * 0.052); } .wheel-text { display: block; width: 100%; font: 700 clamp(8px, calc(var(--wheel) * 0.023), 13px) / 1.14 var(--sans); letter-spacing: 0.075em; text-transform: uppercase; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); overflow-wrap: break-word; text-wrap: balance; } .wheel-catalog .wheel-face, .wheel-contact .wheel-face { width: calc(var(--wheel) * 0.2); } .wheel-selection .wheel-face, .wheel-wartung .wheel-face, .wheel-about .wheel-face, .wheel-tours .wheel-face { width: calc(var(--wheel) * 0.18); } .helm { position: absolute; left: 50%; top: 50%; width: calc(var(--wheel) * 0.6); height: calc(var(--wheel) * 0.6); transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.6)); } .helm-spin { transform-box: view-box; transform-origin: 50% 50%; animation: helm-spin 90s linear infinite; } @keyframes helm-spin { to { transform: rotate(360deg); } } /* ---------- feature cards (hero) ---------- */ .feature-cards { display: grid; gap: 12px; max-width: 520px; margin: 0 auto; text-align: left; } .feature { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 20px; border: 1px solid var(--line); border-radius: 6px; background: rgba(14, 12, 10, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .feature-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--gold-light); } .feature-icon svg { width: 34px; height: 34px; } .feature h2 { font-family: var(--sans); font-size: 0.94rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.35em; } .feature p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: #d5cabb; } /* ---------- proof strip ---------- */ .proof { display: grid; gap: 10px; max-width: var(--max); margin: 0 auto; padding: 26px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); } /* ---------- split ---------- */ .split { display: grid; gap: clamp(28px, 5vw, 60px); align-items: center; } .split p { color: #ded3c2; } .split-art { justify-self: center; width: min(78vw, 300px); color: var(--gold); opacity: 0.85; } .split-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 22px rgba(201, 162, 39, 0.22)); } /* ---------- page head ---------- */ .page-head { padding: clamp(56px, 10vw, 108px) var(--pad) clamp(34px, 6vw, 62px); background: radial-gradient(90% 120% at 50% 0%, rgba(201, 162, 39, 0.12), rgba(10, 11, 13, 0) 62%), linear-gradient(180deg, #0c0e12, var(--bg)); border-bottom: 1px solid var(--line-soft); } .page-head h1 { max-width: 16em; } .page-head > p:last-child { max-width: 46em; margin-bottom: 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.12rem); } /* ---------- filters ---------- */ .filters { display: grid; gap: 14px; margin-bottom: clamp(24px, 4vw, 40px); } .filter-group { display: flex; flex-wrap: wrap; gap: 8px; } .filter-group button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 600 0.74rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; } .filter-group button:hover { color: var(--text); border-color: var(--line-strong); } .filter-group button[aria-pressed="true"] { color: #17130a; background: var(--gold); border-color: var(--gold); } /* ---------- yacht cards ---------- */ .yacht-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(16px, 2.4vw, 26px); } .yacht { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.015)); overflow: hidden; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } .yacht:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow); } .yacht-media { position: relative; aspect-ratio: 16 / 10; background: #14161b; } .yacht-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .badge { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(8, 9, 12, 0.78); color: var(--gold-light); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .yacht-body { display: flex; flex-direction: column; flex: 1; padding: 20px; } .yacht-body h3 { margin-bottom: 0.2em; } .yacht-kind { margin-bottom: 1em; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 14px; margin: 0 0 18px; padding: 14px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); list-style: none; } .specs li { display: grid; gap: 2px; } .specs span { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .specs b { font-size: 0.92rem; color: var(--text); } .yacht-summary { font-size: 0.9rem; color: #cfc4b4; } .yacht-foot { margin-top: auto; display: grid; gap: 14px; } .price { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-light); } .price small { display: block; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .yacht-actions { display: flex; flex-wrap: wrap; gap: 10px; } .yacht-actions > * { flex: 1 1 130px; } .empty-state { padding: 42px 24px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; color: var(--muted); } /* ---------- dialogs ---------- */ dialog { width: min(760px, 92vw); max-height: 88vh; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--text); box-shadow: var(--shadow); overflow: visible; } dialog::backdrop { background: rgba(4, 5, 7, 0.88); } .dialog-body { max-height: 82vh; padding: clamp(20px, 4vw, 34px); overflow: auto; } .dialog-body img { width: 100%; border-radius: 6px; margin-bottom: 20px; display: block; } .dialog-close { position: absolute; right: 8px; top: -54px; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: rgba(8, 9, 12, 0.9); color: var(--gold-light); font-size: 1.5rem; line-height: 1; cursor: pointer; } #lightbox { width: auto; background: transparent; border: 0; box-shadow: none; } #lightbox img { display: block; max-width: 92vw; max-height: 82vh; border: 1px solid var(--line); border-radius: 6px; } /* ---------- selection wizard ---------- */ .wizard { max-width: 780px; padding: clamp(20px, 4vw, 36px); border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.015)); } .wiz-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; } .wiz-progress li { padding-top: 12px; border-top: 2px solid var(--line-soft); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .wiz-progress li[data-done="true"] { border-top-color: var(--line-strong); } .wiz-progress li[aria-current="step"] { border-top-color: var(--gold-light); color: var(--gold-light); } .wiz-step { border: 0; margin: 0; padding: 0; min-width: 0; } .wiz-step legend { padding: 0; margin-bottom: 18px; font-family: var(--serif); font-size: clamp(1.2rem, 3vw, 1.6rem); } .wiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; margin-bottom: 26px; } .wiz-options button { min-height: 56px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.02); color: var(--text); font: 600 0.82rem/1.3 var(--sans); letter-spacing: 0.06em; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .wiz-options button:hover { border-color: var(--line-strong); background: rgba(201, 162, 39, 0.08); } .wiz-options button[aria-pressed="true"] { border-color: var(--gold); background: rgba(201, 162, 39, 0.18); color: var(--gold-light); } .wiz-actions { display: flex; flex-wrap: wrap; gap: 12px; } .wiz-actions .button { flex: 1 1 150px; } .wiz-results h2 { margin-bottom: 1em; } .wiz-results .yacht-grid { margin-bottom: 26px; } /* ---------- sales steps ---------- */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(14px, 2vw, 22px); margin-bottom: clamp(40px, 7vw, 76px); } .step-card { padding: 26px 22px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.015)); } .step-card b { display: block; margin-bottom: 14px; font-family: var(--serif); font-size: 1.9rem; font-weight: 400; color: var(--gold); } .step-card h3 { font-family: var(--sans); font-size: 0.94rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .step-card p { margin: 0; font-size: 0.9rem; color: #cfc4b4; } /* ---------- tours ---------- */ .tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2.4vw, 26px); } .tour { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.015)); overflow: hidden; } .tour-media { aspect-ratio: 16 / 10; background: #14161b; } .tour-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .tour-body { display: flex; flex-direction: column; flex: 1; padding: 22px; } .tour-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .tour-body > p { font-size: 0.92rem; color: #cfc4b4; } .highlights { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 8px; } .highlights li { position: relative; padding-left: 20px; font-size: 0.88rem; color: #d5cabb; } .highlights li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); } .highlights-title { margin-bottom: 10px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .tour-foot { margin-top: auto; display: grid; gap: 14px; } /* ---------- about ---------- */ .about-image { max-width: var(--max); margin: 0 auto; padding: clamp(34px, 6vw, 64px) 20px 0; } .about-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; display: block; } .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 3vw, 40px); } .values article span { display: block; margin-bottom: 12px; font-family: var(--serif); font-size: 1.7rem; color: var(--gold); } .values article h2 { font-size: 1.25rem; } .values article p { margin: 0; color: #cfc4b4; } .team-section { padding-top: 28px; } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 18px; } .team-member { border-top: 1px solid var(--line); padding-top: 18px; } .team-member img, .team-mark { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; margin-bottom: 18px; } .team-member img { display: block; object-fit: cover; } .team-mark { display: grid; place-items: center; background: #20252c; color: var(--gold); font-family: var(--serif); font-size: 2.2rem; border: 1px solid var(--line); } .team-member h3 { margin: 0 0 5px; font-size: 1.25rem; } .team-member b { color: var(--gold); font-size: 0.85rem; } .team-member p { color: #cfc4b4; } .gallery-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; } .gallery-item { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #14161b; overflow: hidden; cursor: zoom-in; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .gallery-item:hover img { transform: scale(1.05); } .gallery-caption { position: absolute; inset: auto 0 0; padding: 34px 14px 12px; background: linear-gradient(transparent, rgba(4, 5, 7, 0.88)); color: var(--text); font-size: 0.82rem; text-align: left; } /* ---------- testimonials ---------- */ .testimonials { border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--bg-2), var(--bg)); } .quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; } .quote-grid figure { margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--glass); } .quote-grid blockquote { margin: 0 0 20px; font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; color: #e6dccc; } .quote-grid figcaption b { color: var(--gold-light); } .quote-grid figcaption span, .quote-grid figcaption small { display: block; color: var(--muted); font-size: 0.82rem; } .quote-grid figcaption small { margin-top: 8px; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; } /* ---------- contact ---------- */ .contact-layout { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; } form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; } label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } input, textarea, select { display: block; width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255, 255, 255, 0.03); color: var(--text); font: 400 1rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; } select { min-height: 48px; } input:focus, textarea:focus, select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.28); } input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) { border-color: #c26b6b; } .wide { grid-column: 1 / -1; } .honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .privacy-check { display: flex; align-items: flex-start; gap: 12px; font-size: 0.86rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #cfc4b4; } .privacy-check input { width: 24px; height: 24px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--gold); } .privacy-check a { color: var(--gold-light); text-decoration: underline; } .required-note { margin: -6px 0 0; font-size: 0.78rem; color: var(--muted); } .form-status { margin: 0; min-height: 1.5em; color: var(--gold-light); font-size: 0.92rem; } .contact-card { padding: clamp(22px, 4vw, 34px); border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, var(--glass-2), rgba(255, 255, 255, 0.02)); } .contact-card a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.05rem; color: var(--gold-light); } .contact-card a:hover { text-decoration: underline; } .contact-card address { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-style: normal; color: #cfc4b4; } .contact-card address small { display: block; margin-bottom: 8px; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } /* ---------- legal ---------- */ .legal-copy { max-width: 860px; } .legal-copy h2 { margin-top: 2em; font-size: 1.4rem; color: var(--gold-light); } .legal-copy p { color: #d5cabb; } .legal-copy a { color: var(--gold-light); text-decoration: underline; } .legal-warning { padding: 16px 18px; border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; background: rgba(201, 162, 39, 0.1); color: var(--text); } /* ---------- footer ---------- */ footer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; padding: 36px var(--pad); border-top: 1px solid var(--line-soft); background: #07080a; color: var(--muted); font-size: 0.84rem; } footer > div { margin-right: auto; } footer b { display: block; color: var(--gold-light); font-family: var(--serif); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.2em; } .legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; } .legal-links a { display: inline-flex; align-items: center; min-height: 44px; } .legal-links a:hover { color: var(--gold-light); } /* ---------- quick contact ---------- */ .quick-contact { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; display: flex; flex-direction: column; gap: 10px; } .quick-contact-button { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(10, 11, 13, 0.9); color: var(--gold-light); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); transition: transform 0.2s, background 0.2s, color 0.2s; } .quick-contact-button:hover { transform: translateY(-3px); background: var(--gold); color: #161205; } .quick-contact-button svg { width: 24px; height: 24px; fill: currentColor; } /* ---------- reveal + misc ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: none; } .fatal-error { max-width: 620px; margin: 18vh auto; padding: 30px; text-align: center; color: var(--muted); } /* ============================================================ Responsive ============================================================ */ /* ---------- reference-led AMIWO Yachts home ---------- */ .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; } .reference-hero { padding: clamp(18px, 4vw, 42px) 20px 0; background: radial-gradient(circle at 50% 20%, rgba(169, 193, 211, .2), transparent 38%), linear-gradient(180deg, #303b4d 0%, #394659 72%, var(--bg) 100%); } .reference-frame { width: min(100%, 720px); margin: 0 auto; overflow: hidden; border: 1px solid rgba(232, 241, 246, .3); border-radius: 8px; background: #202735; box-shadow: 0 30px 90px rgba(8, 15, 25, .46); } .reference-frame img { display: block; width: 100%; height: auto; } .reference-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: min(100%, 900px); margin: 24px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); } .reference-links a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 10px 14px; background: rgba(48, 59, 77, .96); color: var(--text); font-size: .72rem; font-weight: 650; letter-spacing: .1em; text-align: center; transition: background .2s, color .2s; } .reference-links a:hover, .reference-links a:focus-visible { background: #e8f1f6; color: #303b4d; } .reference-links svg { width: 22px; height: 22px; flex: 0 0 auto; } .home-services { padding-bottom: 56px; } .home-services .feature-cards { margin-top: 30px; } .home-services .feature { background: rgba(232, 241, 246, .06); border-color: rgba(201, 220, 232, .24); } .button { color: #263243; background: linear-gradient(180deg, #f7fafc, #a9c1d3 70%, #8ca9bd); box-shadow: 0 10px 30px rgba(21, 35, 52, .28); } .button:hover { box-shadow: 0 14px 38px rgba(169, 193, 211, .28); } .lead, .nav nav a { color: #dce6ed; } @media (min-width: 620px) { .reference-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature-cards { max-width: 560px; } .proof { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 860px) { .real-helm-hero .actions { display: none; } .split { grid-template-columns: 1.4fr 1fr; } .contact-layout { grid-template-columns: 1.5fr 0.85fr; } /* Bound the helm by viewport height as well: on a laptop the hero stack has to fit lockup + headline + wheel + call to action without scrolling. */ .wheel { --wheel: min(48vw, 560px, 46vh); } .hero-inner { max-width: 780px; } /* Three across rather than stacked — the cards stop pushing the CTA off screen. */ .feature-cards { grid-template-columns: repeat(3, 1fr); align-items: stretch; max-width: 100%; } .feature { grid-template-columns: 1fr; gap: 10px; } } /* Laptop screens: the mock puts wordmark, headline, helm and the primary call to action on one screen. Tighten the stack so that still holds at 768–950px tall, without shrinking the composition on large displays. */ @media (min-width: 860px) and (max-height: 1100px) { .hero { padding-top: 28px; padding-bottom: 48px; } .hero-word { font-size: 30px; } .hero-lockup { margin-bottom: 18px; } .hero-copy h1 { font-size: clamp(34px, 3.2vw, 46px); margin-bottom: 18px; } .wheel { --wheel: min(48vw, 560px, 40vh); margin-top: 18px; margin-bottom: 24px; } .actions { margin-top: 8px; margin-bottom: 28px; } } /* 1366x768-class laptops need one more step down. */ @media (min-width: 860px) and (max-height: 820px) { .hero { padding-top: 18px; padding-bottom: 36px; } .hero-word { font-size: 26px; } .hero-lockup { margin-bottom: 12px; } .hero-copy h1 { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 12px; } .hero-copy .lead { font-size: 16px; } .wheel { --wheel: min(48vw, 560px, 36vh); margin-top: 12px; margin-bottom: 18px; } .actions { margin-top: 4px; margin-bottom: 20px; } } @media (max-width: 859px) { .real-helm-hero { --mobile-wheel: min(96vw, 420px); min-height: max(720px, calc(100svh - 68px)); padding: 16px 12px 20px; background-size: cover; background-position: center; } .real-helm-hero .hero-inner { min-height: calc(max(720px, 100svh - 68px) - 36px); } .real-helm-hero .hero-shade { background: linear-gradient(180deg, #1b2533 0 22%, rgba(27, 37, 51, .96) 27%, rgba(27, 37, 51, 0) 42%), linear-gradient(180deg, rgba(20, 29, 42, .12), rgba(20, 29, 42, .32) 62%, rgba(20, 29, 42, .9) 100%); } .real-helm-hero .wheel { --wheel: var(--mobile-wheel); top: var(--helm-y); } .real-helm-hero .hero-lockup { gap: 3px; margin-bottom: 10px; } .real-helm-hero .hero-logo { width: 30px; height: 34px; } .real-helm-hero .hero-word { font-size: clamp(1.25rem, 7vw, 1.65rem); } .real-helm-hero .hero-copy .eyebrow { margin-bottom: 10px; } .real-helm-hero .hero-copy h1 { margin-bottom: 12px; font-size: clamp(1.72rem, 8.2vw, 2.15rem); line-height: 1.02; } .real-helm-hero .hero-copy .lead { display: none; } .real-helm-hero .actions { position: absolute; left: 50%; top: 27%; width: min(78vw, 300px); margin: 0; transform: translateX(-50%); } .real-helm-hero .actions .button { min-height: 44px; padding: 11px 18px; } body[data-page="home"] .quick-contact { display: none; } .menu { display: grid; place-items: center; order: 3; } .langs { order: 2; } .nav nav { position: absolute; left: 0; right: 0; top: calc(100% + 1px); display: flex; flex-direction: column; gap: 0; width: auto; max-height: calc(100svh - 69px); padding: 10px var(--pad) 16px; margin: 0; overflow-y: auto; background: rgba(37, 48, 65, .98); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); box-shadow: 0 18px 36px rgba(4, 8, 14, .38); opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s; } .nav.open nav { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .nav nav a { width: 100%; min-height: 48px; padding: 4px 0; } } @media (max-width: 379px) { .real-helm-hero { --mobile-wheel: min(96vw, 420px); } .wheel-icon { display: none; } .wheel-text { font-size: 9px; letter-spacing: 0.05em; } .wheel-face { width: calc(var(--wheel) * 0.26); } .brand-word { letter-spacing: 0.3em; text-indent: 0.3em; font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .helm-spin { animation: none !important; } .wheel-center { animation: none !important; } .reveal { opacity: 1; transform: none; } }