/* ============================================================================ Outback Marine — reset, type scale, layout primitives, header/footer, forms Separation is hairlines and theme flips. There are NO box-shadows on this page, by design, the same way both reference sites work. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* `overflow-x: hidden` on alone does NOT stop sideways scrolling — with still `visible` the overflow propagates to the viewport, and it did: 374px of real horizontal scroll at 390px wide. `clip` stops it without creating a scroll container, which `hidden` would, and which would break the `position: sticky` gauge panel. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 18px; line-height: 1.5; /* 27px, after emarat's body metric */ font-weight: 400; -webkit-font-smoothing: antialiased; } img, video, svg { display: block; max-width: 100%; } /* The rope is deliberately WIDER than its container — it is a marquee lane. Without this the global max-width clamps a 7057px rope to the wrap width and the cord just stops mid-strip. */ svg.rope { max-width: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* ---- sections: the checkerboard ------------------------------------------ */ .section { background: var(--bg); color: var(--fg); padding: 40px 0; position: relative; } @media (min-width: 640px) { .section { padding: 50px 0; } } @media (min-width: 1024px) { .section { padding: 100px 0; } } .section--wide { padding: 64px 0; } @media (min-width: 640px) { .section--wide { padding: 80px 0; } } @media (min-width: 1024px) { .section--wide { padding: 120px 0; } } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; } @media (min-width: 640px) { .wrap { padding: 0 24px; } } @media (min-width: 1024px) { .wrap { padding: 0 40px; } } /* ---- type ---------------------------------------------------------------- */ .h-page { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.08; letter-spacing: -0.02em; } .h-section { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -0.02em; } .h-sub { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; } .eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); } .lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 62ch; } .body-muted { color: var(--muted); } .rule { height: var(--stroke); background: var(--line); border: 0; margin: 0; } /* ---- buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; padding: 14px 24px; border-radius: var(--radius); border: var(--stroke) solid var(--line); transition: opacity var(--state-ms) var(--ease-out), border-color var(--state-ms) var(--ease-out), background-color var(--state-ms) var(--ease-out); } .btn:hover, .btn:focus-visible { border-color: var(--accent); } .btn--solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn--solid:hover, .btn--solid:focus-visible { opacity: 0.82; } .btn__arrow { width: 14px; height: 14px; } /* Universal state rule: active/inactive is OPACITY, never a colour change. */ .is-dim { opacity: 0.2; } .is-lit { opacity: 1; } .state-fade { transition: opacity var(--state-ms) var(--ease-out); } /* ---- header -------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: top 0.25s var(--ease-out), background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out); border-bottom: var(--stroke) solid transparent; color: #eef2f7; } .site-header.is-hidden { top: -110px; } .site-header.scrolled { background: rgba(5, 9, 31, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: rgba(255, 255, 255, 0.16); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); } /* The mark's wordmark is #004890 dark blue on transparent (measured off the PNG). On the dark ground, and on the .scrolled header, that is close to invisible. Rather than recolour someone else's logo we set it on a small linen plate, so the artwork ships exactly as supplied and stays legible on both halves of the checkerboard. 337x81 native — never scaled up, that is the largest file that exists. */ .site-header__logo, .site-footer__logo { display: inline-block; background: #efe9dd; padding: 9px 13px; border-radius: var(--radius); } .site-header__logo img { width: 168px; height: auto; } .site-footer__logo img { width: 200px; height: auto; } /* The hero sky is bright; 0.72 white over it does not clear a readable contrast on its own. A top scrim buys it back without a colour change. */ .site-header::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 168px; z-index: -1; background: linear-gradient(to bottom, rgba(5, 9, 31, 0.55), rgba(5, 9, 31, 0)); pointer-events: none; transition: opacity 0.5s var(--ease-out); } .site-header.scrolled::before { opacity: 0; } .nav { display: none; gap: 28px; align-items: center; } @media (min-width: 1024px) { .nav { display: flex; } } .nav a { position: relative; font-family: var(--font-display); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.72; transition: opacity var(--state-ms) var(--ease-out); } .nav a:hover, .nav a:focus-visible { opacity: 1; } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px; background: #0db1e2; transform: scaleX(0); transform-origin: 100%; transition: transform 0.45s var(--ease-emarat); } .nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: 0%; } .site-header__cta { display: none; } @media (min-width: 768px) { .site-header__cta { display: inline-flex; } } .nav-toggle { display: inline-flex; padding: 10px; } @media (min-width: 1024px) { .nav-toggle { display: none; } } .nav-toggle span { display: block; width: 22px; height: 1px; background: currentColor; } .nav-toggle span + span { margin-top: 6px; } .nav-mobile { display: none; padding: 8px 0 24px; border-top: var(--stroke) solid rgba(255,255,255,0.16); background: rgba(5, 9, 31, 0.96); } .nav-mobile.is-open { display: block; } .nav-mobile a { display: block; padding: 12px 0; font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; } /* ---- footer -------------------------------------------------------------- */ .site-footer { background: var(--bg-alt); color: var(--fg); padding: 64px 0 32px; } .site-footer__grid { display: grid; gap: 40px; } /* Four columns once there is room; two while there is not. The Company column only exists now that the interior pages it points at exist. */ @media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; } } .site-footer h3 { font-family: var(--font-display); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 16px; } .site-footer li + li { margin-top: 10px; } .site-footer a { opacity: 0.78; transition: opacity var(--state-ms) var(--ease-out); } .site-footer a:hover, .site-footer a:focus-visible { opacity: 1; } .site-footer__base { margin-top: 48px; padding-top: 24px; border-top: var(--stroke) solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 14px; color: var(--muted); } /* ---- form ---------------------------------------------------------------- */ .field { display: block; margin-bottom: 18px; } .field > span { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .field input, .field textarea, .field select { width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--fg); background: transparent; border: var(--stroke) solid var(--line); border-radius: var(--radius); transition: border-color var(--state-ms) var(--ease-out); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); } .field textarea { min-height: 132px; resize: vertical; } .form-note { font-size: 14px; color: var(--muted); } /* ---- utility ------------------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .media { border-radius: var(--radius); overflow: hidden; border: var(--stroke) solid var(--line); } .media img, .media video { width: 100%; height: 100%; object-fit: cover; }