/* ========================================================================== BLACK ONYX SAUNA AND ICE BATH CO. — Site Stylesheet Revitalise | Energise | Socialise ========================================================================== */ /* Fonts are self-hosted — see assets/css/fonts.css (linked separately in ) */ /* --------------------------------------------------------------------------- 0. TOKENS --------------------------------------------------------------------------- */ :root{ /* colour: sampled from the real Black Onyx emblem */ --onyx: #0a0908; /* primary background */ --onyx-deep: #000000; /* deepest black — footer / overlays */ --charcoal: #16130e; /* elevated surface on dark */ --charcoal-2: #201a12; /* hover / lighter surface on dark */ --gold: #c6974f; /* primary accent */ --gold-light: #eabb6b; /* hover / highlight accent */ --gold-dim: #8b6a34; /* subtle borders / pressed */ --gold-mist: rgba(198,151,79,.16); --ivory: #f4efe4; /* light section backgrounds */ --ivory-white: #f8f5ee; /* body copy on dark */ --stone: #a89c85; /* muted secondary copy on dark */ --stone-dim: #8a8070; /* faint copy on dark — WCAG AA against onyx/charcoal/deep */ --ink: #211c15; /* dark text on light backgrounds */ --ink-soft: #4a4234; /* secondary text on light backgrounds */ --line: rgba(198,151,79,.22); --line-soft: rgba(244,239,228,.12); --white: #ffffff; --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif; --container: 1280px; --gutter: clamp(20px, 5vw, 64px); --section-pad: clamp(64px, 10vw, 148px); --radius-s: 2px; --radius-m: 4px; --ease: cubic-bezier(.22,.61,.36,1); --ease-soft: cubic-bezier(.16,.84,.44,1); } /* --------------------------------------------------------------------------- 1. RESET --------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } *{ margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } body{ background:var(--onyx); color:var(--ivory-white); font-family:var(--font-body); font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul,ol{ list-style:none; } button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; } input,textarea,select{ font-family:inherit; } h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:500; line-height:1.12; letter-spacing:.005em; } strong{ font-weight:600; } ::selection{ background:var(--gold); color:var(--onyx); } /* visible keyboard focus */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:1.5px solid var(--gold); outline-offset:3px; } /* --------------------------------------------------------------------------- 2. LAYOUT UTILITIES --------------------------------------------------------------------------- */ .container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:var(--section-pad); position:relative; } .section--tight{ padding-block:clamp(48px,6vw,88px); } .section--onyx{ background:var(--onyx); } .section--deep{ background:var(--onyx-deep); } .section--charcoal{ background:var(--charcoal); } .section--ivory{ background:var(--ivory); color:var(--ink); } .section--border-t{ border-top:1px solid var(--line); } .section--border-b{ border-bottom:1px solid var(--line); } .grid{ display:grid; gap:var(--gutter); min-width:0; } .grid > *{ min-width:0; } input, select, textarea, button{ min-width:0; max-width:100%; } /* Defensive: CSS Grid items default to min-width:auto, which respects a child's intrinsic min-content size (long words,