Queue-North-Website/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  color: #0F172A;
  background-color: #F8FAFC;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

.brand-logo-on-dark {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6))
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.45));
}

a {
  color: #0EA5E9;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Container - custom max-width */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Section spacing - mobile first */
.section {
  padding: 4rem 0;
}

/* Desktop section spacing */
@media (min-width: 1024px) {
  .section {
    padding: 6rem 0;
  }
}

/* Hero section styling */
.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #0B2A3C 0%, #071A2A 100%);
  color: white;
  padding: 4rem 0 5rem;
}

/* Light section background */
.section-alt {
  background: #EEF6FB;
}

@layer base {
  /*
   * Visible keyboard focus — WCAG 2.4.7 (Focus Visible) and 1.4.11 (Non-text
   * Contrast, which wants 3:1 for the indicator itself).
   *
   * Two rings, not one, and that is the whole point. This is a light-first
   * design with dark navy bands through it, so no single colour clears 3:1
   * everywhere: primary-cyan manages 6.26:1 on navy and only 2.38:1 on white,
   * which is why the obvious `ring-primary-cyan` was not used. The white ring
   * carries the dark sections and the navy ring carries the light ones, and on
   * every background in the palette at least one of them clears 3:1 by a wide
   * margin — the worst case is 13.62:1.
   *
   * box-shadow rather than outline so both rings stack predictably and follow
   * each element's own border-radius. The transparent outline is the standard
   * escape hatch for Windows High Contrast / forced-colors mode, where
   * box-shadow is discarded and an outline is not.
   *
   * :focus-visible, not :focus, so a mouse click does not leave a ring behind.
   * :where() keeps specificity at zero, so any component can still override it.
   */
  :where(a, button, [role="button"], summary, input, select, textarea):focus-visible {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #0B2A3C;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

@layer components {
  /*
   * reCAPTCHA v2's checkbox iframe is a fixed 304px and Google does not allow
   * it to be resized. Below ~360px that overflows the viewport and gets sliced
   * off by the overflow-x:hidden above — taking the branding and the privacy
   * and terms links with it. Scaling is the only lever available.
   *
   * The height is reduced by the same factor because transform does not affect
   * layout: without it the wrapper would keep reserving the full-size box and
   * the form would gain a strip of dead space under the widget. See #215.
   */
  @media (max-width: 360px) {
    .recaptcha-scale {
      transform: scale(0.85);
      transform-origin: 0 0;
      height: 66px; /* 78px widget * 0.85, so the box matches what is drawn */
    }
  }
}