/* phplist.css — gives phpList's public pages on lists.airportcoordination.com (subscribe, confirm, unsubscribe, preferences) the look of the main site. Loaded from phpList's "Header of public pages" setting, after css/fonts.css and css/style.css (see docs/README.md). Restyles phpList's own markup and its Bootstrap classes; the colours come from the variables in style.css, so light and dark follow the site's theme. */ /* Bootstrap sets 10px here, which would shrink every rem-based size from style.css */ html { font-size: 16px; } body.fixed { background: var(--navy); color: var(--white); font-family: "DM Sans", sans-serif; font-size: 16px; padding: 0; } /* Header bar, like the site's nav */ #header.navbar { min-height: 68px; margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: rgba(11,29,53,.92); display: flex; align-items: center; } #header #rack-functions { display: flex; align-items: center; padding: 0 1.5rem; } #logo { margin: 0; font-size: 1rem; } #header #logo a { display: flex; align-items: center; gap: .75rem; font-family: "Syne", sans-serif; font-weight: 700; letter-spacing: -.02em; color: var(--white); text-decoration: none; } #header #logo a::before { content: "✈"; width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 8px; background: linear-gradient(135deg, var(--teal), var(--sky)); color: #fff; } #header #logo a:hover { color: var(--teal); } #header #logo a em { color: var(--teal); font-style: normal; } /* "← Back to the website" link, right of the logo (added in phpList's header setting) */ #header #rack-functions { justify-content: space-between; gap: 1rem; flex-wrap: wrap; } #header .back-link { font-size: .875rem; font-weight: 500; color: var(--muted); text-decoration: none; } #header .back-link:hover { color: var(--teal); } /* Content as a card, like .airport-card */ #wrapper { max-width: 860px; padding: 3rem 1.5rem; } #mainContent .panel { background: none; border: 0; box-shadow: none; } #mainContent .content.well { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; padding: 1.75rem; color: var(--white); } #mainContent h3 { font-family: "Syne", sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; color: var(--white); margin: 0 0 1rem; } #mainContent p, #mainContent .information { color: var(--muted); line-height: 1.7; } #mainContent .information big { font-size: .95rem; } #mainContent .text-underline { text-decoration: none; } #mainContent a { color: var(--teal); } /* Form */ #mainContent .table, #mainContent .jumbotron { background: none; color: inherit; padding: 0; margin-bottom: 1rem; } #mainContent .jumbotron tbody { border: 0; } #mainContent .table td { border: 0; padding: .4rem .75rem .4rem 0; vertical-align: middle; } #mainContent .required, #mainContent .required label, #mainContent label { color: var(--white); font-weight: 500; font-size: .9rem; } #mainContent .error .required { color: var(--muted); font-size: .8rem; } #mainContent .form-control { height: auto; padding: .75rem 1rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; box-shadow: none; color: var(--white); font-family: "DM Sans", sans-serif; font-size: .95rem; } #mainContent .form-control:focus { border-color: var(--teal); background: rgba(255,255,255,.09); } #mainContent input[type="checkbox"] { accent-color: var(--teal); } /* List choices: phpList shows each list as a pair of Bootstrap buttons. phpList sets their background with !important, so these need it too. */ #mainContent li.list .btn-default, #mainContent li.list .btn-default.active { background: rgba(255,255,255,.04) !important; border: 1px solid var(--border); color: var(--white); box-shadow: none; } #mainContent li.list input:checked + .btn-group .btn-default { border-color: var(--teal); background: rgba(0,196,179,.08) !important; } #mainContent li.list .btn-default b { font-weight: 600; } /* Lists shown after confirming: phpList puts a ✓ button and a name button directly in each
  • , shown here as one teal-edged chip. (On the subscribe form the buttons sit one level deeper, in .btn-group, so these rules don't reach them.) */ #mainContent ul { list-style: none; padding-left: 0; } #mainContent li.list:has(> .btn-default) { display: flex; flex-wrap: wrap; margin-bottom: .5rem; } #mainContent ul li.list > .btn-default, #mainContent ul li.list > .btn-default.active { margin: 0; padding: .5rem .85rem; background: rgba(0,196,179,.08) !important; border: 1px solid var(--teal) !important; border-radius: 0; box-shadow: none; color: var(--white); font-size: .9rem; } #mainContent ul li.list > .btn-default:first-child { border-right: 0 !important; border-radius: 8px 0 0 8px; color: var(--teal); } #mainContent ul li.list > .btn-default + .btn-default { border-left: 0 !important; border-radius: 0 8px 8px 0; } #mainContent li.list > .listdescription { flex-basis: 100%; } #mainContent li.list > .listdescription:empty { display: none; } /* Buttons, like .btn-primary */ #mainContent .btn-primary, #mainContent input[type="submit"] { padding: .7rem 1.6rem; background: var(--teal); color: var(--navy); border: 0; border-radius: 8px; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: .95rem; box-shadow: 0 4px 24px rgba(0,196,179,.3); } #mainContent .btn-primary:hover, #mainContent input[type="submit"]:hover { background: var(--teal2); } #mainContent .poweredby { margin-top: 2rem; opacity: .6; } /* phpList's footer holds a copy of the site's