/* ============================================================================
APS 2027 — 30th American Peptide Symposium · Boston
Enhanced stylesheet (drop-in replacement for aps2027.css)
Layered on Bootstrap 5.3.2. Loads the Adobe Typekit kit (houschka-pro +
hello-bloomie-script). Every class from the original file is preserved.
----------------------------------------------------------------------------
Contents
1. Tokens (color, type, space, radius, shadow)
2. Base elements (body, links, paragraphs, headings)
3. Display & section headings (accent-bar motif)
4. Intro / lead copy & people typography
5. Layout, sections & rhythm utilities
6. Hero banner
7. Dividers
8. Images & avatars
9. Cards (co-chair, pharma-box, generic)
10. Venue gallery
11. Buttons
12. Navbar (forward-looking)
13. Schedule / program components
14. Footer
15. Misc utilities, motion & print
========================================================================== */
@import url("https://use.typekit.net/pct0eai.css");
/* ============================================================================
1. TOKENS
========================================================================== */
:root {
/* Brand — Boston palette */
--aps-red: #CB3B2D; /* primary headline accent */
--aps-blue: #3A53A4; /* links, secondary accent */
--aps-blue-dark: #2C4080; /* link visited / hover-dark */
--harbor-navy: #1A2E4C; /* primary dark — headers, footer */
--brass-gold: #C9A227; /* metallic accent, rules, bars */
--brass-deep: #A8851A; /* gold hover */
--brick-warm: #A45A3D; /* warm secondary accent */
--teal: #007777; /* co-chairs, slogan script */
--teal-deep: #005C5C;
/* Neutrals */
--ink: #2B303A; /* body text */
--ink-soft: #454E5B; /* secondary text */
--muted: #545D6A; /* captions / meta */
--line: #DCE3EC; /* hairlines */
--line-soft: #EAEEF4;
--fog-gray: #E8ECF2; /* cool section bg */
--parchment: #F7F4EF; /* warm section bg */
--cloud: #F4F7FB; /* lightest cool */
--paper: #FFFFFF;
--text-dark: #2B303A; /* legacy alias */
/* Typography */
--font-body: houschka-pro, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-script: "hello-bloomie-script", "Brush Script MT", cursive;
/* Spacing scale (rhythm: 8) */
--space-1: .5rem; /* 8 */
--space-2: 1rem; /* 16 */
--space-3: 1.5rem; /* 24 */
--space-4: 2rem; /* 32 */
--space-5: 3rem; /* 48 */
--space-6: 4.5rem; /* 72 */
/* Radius */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--radius-pill: 999px;
/* Shadows — warm navy-tinted */
--shadow-sm: 0 1px 3px rgba(26, 46, 76, .08);
--shadow-md: 0 6px 22px rgba(26, 46, 76, .10);
--shadow-lg: 0 16px 44px rgba(26, 46, 76, .16);
/* Motion */
--ease: cubic-bezier(.2, .6, .2, 1);
--t-fast: .18s var(--ease);
--t: .26s var(--ease);
/* Layout */
--container-max: 1300px;
}
/* ============================================================================
2. BASE
========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--paper);
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Wider gutters than Bootstrap default; cap at a comfortable measure */
@media (min-width: 1400px) {
.container { max-width: var(--container-max); }
}
@media (min-width: 1679px) {
.container { width: var(--container-max); padding-left: var(--space-3); padding-right: var(--space-3); }
}
/* Links */
a {
color: var(--aps-blue);
text-decoration: none;
transition: color var(--t-fast);
}
a:link { color: var(--aps-blue); }
a:visited { color: var(--aps-blue-dark); }
a:hover { color: var(--aps-red); }
a:active { color: var(--brass-gold); }
/* Give in-copy links a refined underline without touching nav/button links */
.intro a,
.rich-text a,
p a {
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
text-decoration-line: underline;
}
.intro a:hover,
.rich-text a:hover,
p a:hover { text-decoration-color: currentColor; }
/* Body copy — readable measure, softened from the old 1.3em/letter-spacing .5px */
p {
font-size: 1.0625rem; /* ~17px */
font-weight: 400;
line-height: 1.7;
letter-spacing: 0;
color: var(--ink);
margin-bottom: 1.1rem;
}
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; color: var(--harbor-navy); }
/* Constrain long prose for readability (opt-in, doesn't affect grid columns) */
.prose { max-width: 68ch; }
.prose p + p { margin-top: 0; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-body);
text-transform: none;
color: var(--harbor-navy);
line-height: 1.15;
letter-spacing: -0.01em;
}
/* Small eyebrow / kicker label — handy for section intros. Shares its look
with .page-header__eyebrow (section 3b); the two are defined together there
so a page header and a mid-page kicker can never drift apart. */
/* ============================================================================
3. DISPLAY & SECTION HEADINGS
========================================================================== */
/* The big red hero title — now fluid and tighter */
h1.primary-header,
.primary-header {
font-weight: 300;
color: var(--aps-red);
font-size: clamp(2.6rem, 6vw, 5rem);
line-height: 1.02;
letter-spacing: -0.02em;
padding-top: 0;
margin-top: var(--space-5);
margin-bottom: var(--space-2);
}
/* Script slogan — teal, fluid */
.slogan-header {
font-style: normal;
font-family: var(--font-script);
font-weight: 400;
color: var(--teal);
font-size: clamp(1.5rem, 2.3vw, 2.2rem);
line-height: 1.1;
margin-bottom: var(--space-3);
}
/* Keep the script slogan on a single line on large screens */
@media (min-width: 992px) {
.slogan-header { white-space: nowrap; }
}
/* Section header — the APS signature: navy text with a brass accent bar.
This is the core visual upgrade and ties 2027 to the APS family. */
.secondary-header {
position: relative;
font-weight: 600;
color: var(--harbor-navy);
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
line-height: 1.1;
letter-spacing: -0.015em;
padding-left: 1rem;
border-left: 6px solid var(--brass-gold);
margin-bottom: var(--space-3);
}
/* Person / sub-section heading — teal */
.co-chair-header {
font-weight: 600;
color: var(--teal);
font-size: clamp(1.35rem, 2vw, 1.7rem);
line-height: 1.2;
letter-spacing: -0.01em;
margin-top: var(--space-2);
margin-bottom: .35rem;
}
/* Tertiary — warm brick, sits well on parchment/white */
.tertiary-header {
font-weight: 600;
color: var(--brick-warm);
font-size: clamp(1.35rem, 1.8vw, 1.7rem);
line-height: 1.2;
margin-bottom: var(--space-2);
}
.co-chair-header.is-blue,
.secondary-header.is-blue { color: var(--aps-blue); }
.secondary-header.is-blue { border-left-color: var(--aps-blue); }
.slider-header {
font-weight: 400;
color: var(--aps-blue);
margin-bottom: var(--space-1) !important;
font-size: clamp(1.2rem, 1vw + .7em, 3rem);
line-height: 1.1;
}
/* ============================================================================
3b. PAGE HEADER — the opening beat of every interior page
----------------------------------------------------------------------------
Eyebrow, title, then an optional line of meta. It began life on the venue
page as .v-eyebrow / .v-title and is now the one header the whole site uses,
so that a visitor moving between Speakers, Program, Venue and Sponsors sees
the first word land in exactly the same place each time.
That alignment rests on one number: the padding-top below is the only space
between the nav and the eyebrow. Nothing inside may add space above the
eyebrow -- no margin-top on .page-header__eyebrow, no wrapper with padding.
Give the header a tint with .page-header--cloud / --parchment rather than
wrapping it in a tinted section, which would put the padding back.
========================================================================== */
.page-header {
background-color: var(--paper);
padding: var(--space-6) 0 var(--space-4);
}
.page-header--cloud { background-color: var(--cloud); }
.page-header--parchment { background-color: var(--parchment); }
.page-header__eyebrow,
.kicker {
margin: 0 0 12px;
font-size: .82rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--brass-deep);
}
.kicker { display: inline-block; }
.page-header__title {
margin: 0 0 8px;
font-weight: 300;
font-size: clamp(2.4rem, 5vw, 3.6rem);
line-height: 1.02;
letter-spacing: -.02em;
color: var(--harbor-navy);
}
/* One line under the title: a location, a date, a result count. */
.page-header__meta {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 1rem;
color: var(--muted);
}
.page-header__meta i { color: var(--brass-gold); }
.page-header__lead { margin: var(--space-3) 0 0; }
.page-header__lead p:last-child { margin-bottom: 0; }
.page-header__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem;
margin-top: var(--space-3);
}
/* A section butting straight up against the header: the header has already
supplied the top of the page's rhythm, so a second 72px would open a hole. */
section.is-flush-top { padding-top: 0; }
/* ============================================================================
4. INTRO / LEAD & PEOPLE TYPOGRAPHY
========================================================================== */
.intro {
font-size: clamp(1.1rem, 1.4vw, 1.4rem);
font-weight: 400;
line-height: 1.55;
letter-spacing: 0;
color: var(--ink-soft);
max-width: 75ch;
}
.intro b, .intro strong { color: var(--harbor-navy); font-weight: 600; }
.banner-top {
font-size: clamp(2rem, 2.3vw, 2.3rem);
font-weight: 200;
color: #fff;
line-height: 1.2;
}
.banner-top a:link,
.banner-top a:visited { color: #fff; }
.banner-top a:hover { color: var(--brass-gold); }
.display-name {
font-size: clamp(1.6rem, 1.9vw, 1.9rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
color: var(--aps-blue);
margin-bottom: .5rem;
}
.speaker-name-awardee {
font-size: clamp(1.8rem, 2.3vw, 2.3rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
color: var(--harbor-navy);
margin: 0;
}
.invited-speaker {
margin: 0;
color: var(--aps-blue);
font-size: clamp(1rem, 1vw, 1.15rem);
font-weight: 600;
line-height: 1.3;
}
.speaker-description { font-size: clamp(1rem, 1.1vw, 1.1rem); }
.affiliation { font-style: italic; color: var(--muted); }
.authors { font-size: clamp(.85rem, 1.3vw, 1.05rem); font-weight: 600; color: var(--ink-soft); }
.award-text {
font-size: clamp(1rem, 1.3vw, 1.3rem);
color: var(--aps-red) !important;
font-weight: 500 !important;
}
/* ============================================================================
5. LAYOUT, SECTIONS & RHYTHM
========================================================================== */
section { padding: var(--space-6) 0; }
/* Keep the original auto-alternation, but warmer + intentional helpers.
:where() drops this rule to zero specificity on purpose. Written plainly,
`section:nth-child(even)` outranks a single class, so `.section-white` and
`.v-sec--parchment` lost to it and rendered cloud -- and any element added
above a section flipped the parity of every section below. As a zero-weight
default it stays the fallback for sections that say nothing, and loses to
every section that states its own background. */
:where(section:nth-child(even)) { background-color: var(--cloud); }
.section-parchment { background-color: var(--parchment); }
.section-fog { background-color: var(--fog-gray); }
.section-cloud { background-color: var(--cloud); }
.section-white { background-color: var(--paper); }
.section-navy { background-color: var(--harbor-navy); color: #E8EDF5; }
.section-navy .secondary-header { color: #fff; }
.section-navy p { color: #C7D2E2; }
/* A tidy section intro block */
.section-head { margin-bottom: var(--space-4); }
/* ============================================================================
6. HERO BANNER
========================================================================== */
.hero-banner { width: 100%; line-height: 0; background: var(--harbor-navy); }
/* The masthead links home. `display:block` so the anchor is the image and
not a text-height box with the picture overflowing it. */
.hero-banner__home { display: block; line-height: 0; }
.hero-banner__home:focus-visible { outline: 3px solid var(--brass-gold); outline-offset: -3px; }
.hero-banner img {
width: 100%;
height: auto;
display: block;
max-height: 460px;
object-fit: cover;
object-position: center;
}
/* ============================================================================
7. DIVIDERS
========================================================================== */
hr.border27 {
border: 0;
border-top: 2px solid var(--teal);
opacity: 1;
margin-top: var(--space-5);
margin-bottom: var(--space-4);
}
.underline {
width: 64px;
height: 0;
border: 0;
border-top: 3px solid var(--brass-gold);
border-radius: 3px;
margin-top: .5rem;
margin-bottom: var(--space-3);
opacity: 1;
}
.table-divider {
margin-top: var(--space-5);
margin-bottom: var(--space-3);
border: 0;
border-top: 1px solid var(--line);
opacity: 1;
}
/* ============================================================================
8. IMAGES & AVATARS
========================================================================== */
.img-responsive { border-radius: var(--radius-sm); }
/* Photos that carry the .rounded utility.
The shadow is copied from americanpeptidesociety.org rather than taken from
this site's own --shadow-sm, which at rgba(26,46,76,.08) was so faint it read
as no shadow at all. Same value on both sites, so the family resemblance is
deliberate. */
img.rounded {
border-radius: var(--radius) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* .rounded's corners without its shadow, for any element (the YI video).
Clips its contents, so an iframe or image inside takes the corners too. */
.rounded-flat {
border-radius: var(--radius) !important;
box-shadow: none !important;
overflow: hidden;
}
/* Same treatment for figures and wrappers that are not the ![]()
itself. */
.v-figure img,
.v-highlight img,
.speaker-figure img { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.profile-image {
width: 200px;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
display: inline-block;
box-shadow: var(--shadow-md);
}
.profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.headshot-circle {
width: 55px;
height: 55px;
flex: 0 0 55px;
box-shadow: var(--shadow-sm);
border-radius: 50%;
object-fit: cover;
object-position: top center;
display: inline-block;
margin-right: 15px;
border: 2px solid #fff;
outline: 1px solid var(--line);
}
/* ============================================================================
9. CARDS
========================================================================== */
/* Co-chair / speaker portrait blocks */
.co-chair-img {
width: 100%;
max-width: 400px;
height: auto;
object-fit: cover;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
transition: transform var(--t), box-shadow var(--t);
}
/* The lift belongs to the link, not the photo. On a speaker's own page the
headshot is not a link -- there is nowhere left to go -- and a portrait that
rises under the cursor there promises a click that does nothing. */
.speaker-figure__link { display: block; max-width: 400px; }
.speaker-figure__link:hover .co-chair-img,
.speaker-figure__link:focus-visible .co-chair-img {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.speaker-figure__link:focus-visible { outline: 2px solid var(--aps-red); outline-offset: 3px; }
/* Speaker photo + licence attribution.
The figure wrapper keeps the credit tied to its image; max-width matches
.co-chair-img so the caption never runs wider than the photo above it. */
.speaker-figure {
margin: 0;
max-width: 400px;
}
.photo-credit {
margin-top: var(--space-1);
font-size: 0.82rem;
line-height: 1.4;
color: var(--muted);
}
.photo-credit a { color: inherit; text-decoration: underline; }
/* Speaker directory cards */
.co-chair-card h3 { margin-top: var(--space-2); font-size: 1.25rem; }
.co-chair-card .title { font-style: italic; color: var(--muted); margin-bottom: var(--space-2); }
/* Highlighted box (sponsors / notices) — refined parchment panel */
.pharma-box {
padding: var(--space-4) var(--space-4) var(--space-2);
border: 1px solid color-mix(in srgb, var(--brass-gold) 55%, transparent);
border-left: 5px solid var(--brass-gold);
border-radius: var(--radius);
background-color: var(--parchment);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-4);
}
/* Generic reusable content card for future pages */
.aps-card {
background: var(--paper);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: var(--space-4);
transition: transform var(--t), box-shadow var(--t);
}
.aps-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.aps-card--feature { border-top: 4px solid var(--brass-gold); }
/* ============================================================================
10. VENUE GALLERY
========================================================================== */
.venue-gallery .col-md-4 { margin-bottom: var(--space-3); }
.venue-gallery img,
.venue-gallery .img-fluid {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition: transform var(--t), box-shadow var(--t);
}
.venue-gallery a,
.venue-gallery .col-md-4 { overflow: hidden; border-radius: var(--radius); display: block; }
.venue-gallery img:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: var(--shadow-md);
}
/* ============================================================================
11. BUTTONS
========================================================================== */
.btn {
--bs-btn-font-family: var(--font-body);
font-weight: 600;
letter-spacing: .01em;
border-radius: var(--radius-sm);
padding: .7rem 1.5rem;
transition: transform var(--t-fast), box-shadow var(--t-fast),
background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn-aps,
.btn-primary {
background-color: var(--aps-blue);
border: 1px solid var(--aps-blue);
color: #fff;
}
.btn-aps:hover,
.btn-primary:hover {
background-color: var(--harbor-navy);
border-color: var(--harbor-navy);
color: #fff;
box-shadow: var(--shadow-md);
}
.btn-accent {
background-color: var(--brass-gold);
border: 1px solid var(--brass-gold);
color: var(--harbor-navy);
}
.btn-accent:hover {
background-color: var(--brass-deep);
border-color: var(--brass-deep);
color: #fff;
box-shadow: var(--shadow-md);
}
.btn-outline-aps {
background: transparent;
border: 2px solid var(--aps-blue);
color: var(--aps-blue);
}
.btn-outline-aps:hover {
background: var(--aps-blue);
color: #fff;
}
/* ============================================================================
12. MAIN NAVBAR — sits under the hero banner, right-aligned
----------------------------------------------------------------------------
Markup:
Add the modifier class .aps-navbar--sticky if you want it to pin on scroll.
========================================================================== */
.aps-navbar {
background: #fff;
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.aps-navbar--sticky { position: sticky; top: 0; z-index: 1020; }
.aps-navbar .container {
display: flex;
justify-content: flex-end; /* right-aligned */
align-items: center;
}
.aps-nav {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: .25rem;
margin: 0;
padding: 0;
}
.aps-nav > li { margin: 0; }
.aps-nav a,
.aps-nav__toggle {
display: block;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
font-size: .95rem;
line-height: 1;
color: var(--ink-soft);
padding: 1.15rem 1.1rem;
border-bottom: 3px solid transparent;
transition: color var(--t-fast), border-color var(--t-fast);
}
.aps-nav a:link,
.aps-nav a:visited { color: var(--ink-soft); }
.aps-nav a:hover,
.aps-nav__toggle:hover { color: var(--aps-red); }
.aps-nav a.active,
.aps-nav__toggle.active,
.aps-nav a[aria-current="page"] {
color: var(--harbor-navy);
border-bottom-color: var(--brass-gold);
}
/* --- Program dropdown -------------------------------------------------- */
.aps-nav__toggle {
appearance: none;
background: none;
border: 0;
border-bottom: 3px solid transparent;
font-family: inherit;
cursor: pointer;
width: 100%;
text-align: left;
}
.aps-nav__toggle:focus-visible { outline: 2px solid var(--brass-gold); outline-offset: -2px; }
.aps-nav__chev {
font-size: .7em;
margin-left: .3em;
transition: transform var(--t-fast);
display: inline-block;
}
.aps-nav__parent.is-open .aps-nav__chev { transform: rotate(180deg); }
.aps-nav__parent { position: relative; }
.aps-nav__menu {
display: none;
list-style: none;
margin: 0;
padding: .35rem 0;
position: absolute;
top: 100%;
left: 0;
min-width: 13rem;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
z-index: 1030;
}
/* Hover and focus-within open it too, so the menu still works if the script
never runs -- which is also how a keyboard reaches it before the button is
pressed. */
.aps-nav__parent:hover > .aps-nav__menu,
.aps-nav__parent:focus-within > .aps-nav__menu,
.aps-nav__parent.is-open > .aps-nav__menu { display: block; }
.aps-nav__menu a {
padding: .6rem 1.1rem;
border-bottom: 0;
border-left: 3px solid transparent;
letter-spacing: .06em;
font-size: .88rem;
white-space: nowrap;
}
.aps-nav__menu a:hover { background: var(--cloud); }
.aps-nav__menu a.active {
color: var(--harbor-navy);
border-left-color: var(--brass-gold);
border-bottom-color: transparent;
}
/* Split parent (Sponsors & Exhibitors): a link beside a chevron-only button.
The pair reads as one item, so the link gives up its right padding and the
button its left. */
.aps-nav__parent--split { display: flex; align-items: stretch; }
.aps-nav__parent--split > a { padding-right: .3rem; }
.aps-nav__toggle--chev { width: auto; padding-left: .2rem; padding-right: .9rem; }
.aps-nav__toggle--chev .aps-nav__chev { margin-left: 0; }
.aps-nav__parent--split:hover > a { color: var(--aps-red); }
@media (max-width: 575.98px) {
.aps-navbar .container { justify-content: center; }
.aps-nav { justify-content: center; }
.aps-nav a,
.aps-nav__toggle { padding: .9rem .8rem; font-size: .88rem; letter-spacing: .05em; }
}
/* Back-compat: also style a Bootstrap