/* ============================================================================ 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 -------------------------------------------------------------- */ /* The navy fill is PERMANENT (Ben, 2026-08-12: "keep the navy header background fill at all times in the hero"). It used to arrive with `.scrolled` past 50px, which left the bar transparent over the hero's bright sky; now the hero's animation starts BELOW the bar (css/sections.css .hero__canvas), so the fill sits over the hero's own #05091f ground and reads as one navy block. navbar.js still toggles `.scrolled`; nothing styles it any more. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: top 0.25s var(--ease-out); background: rgba(5, 9, 31, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: var(--stroke) solid rgba(255, 255, 255, 0.16); color: #eef2f7; } .site-header.is-hidden { top: -110px; } .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 navy header fill, 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 top scrim that bought contrast for the unscrolled transparent bar is gone with the transparent bar itself — the permanent fill carries it. */ .nav { display: none; gap: 28px; align-items: center; } @media (min-width: 1024px) { .nav { display: flex; } } /* THE DROPDOWN BUTTONS ARE STYLED WITH THE LINKS, NOT SEPARATELY. Services and Gallery are