/* Taylor Geospatial — Strategic Innovation Program Shared stylesheet. Palette and type per TG Brand Guidelines v4.3.26. Degular / Gintronic load from the same Adobe Fonts kit as taylorgeospatial.org (use.typekit.net/imj6poz.css); Open Sans / Inconsolata are the official fallbacks. The kit serves degular-text 400-700 and gintronic 400/700 — don't use weights above 700. */ :root { --brown: #3B1E1C; --red: #FF4F2C; --light-blue: #A7D0DC; --green: #CFF29E; --green-dark: #8fb85e; --periwinkle: #80A0D8; --ivory: #F4F4EB; --white: #ffffff; /* Per-page accent: overridden by .theme-* on . --accent renders on the dark hero; --accent-text is the readable variant on ivory/white surfaces. */ --accent: var(--red); --accent-text: var(--red); --font-display: 'degular-text', 'Open Sans', sans-serif; --font-mono: 'gintronic', 'Inconsolata', monospace; } .theme-red { --accent: var(--red); --accent-text: var(--red); } .theme-periwinkle { --accent: var(--periwinkle); --accent-text: var(--periwinkle); } .theme-green { --accent: var(--green); --accent-text: var(--green-dark); } .theme-blue { --accent: var(--light-blue); --accent-text: #3F6877; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--ivory); color: var(--brown); font-family: var(--font-display); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Header — replicated from taylorgeospatial.org (.site-header) to match it exactly */ .site-wrap__wide { width: 90vw; max-width: 1315px; margin: 0 auto; } .site-header { padding: 24px 0; border-bottom: 1px solid #CDC5BF; } .site-header__inner { display: flex; justify-content: space-between; align-items: center; } .site-header__logo { width: 23.25vw; position: relative; display: block; max-width: 278px; z-index: 1600; } .site-header__logo svg { display: block; width: 100%; height: auto; } .site-header__logo svg path.icon { transition-duration: 0.3s; } .menu-open .site-header__logo svg path.icon { fill: #F6F2EE; } .site-header__right { display: flex; flex-direction: column; gap: 18px; align-items: flex-end; } .site-header__tagline { font-size: 22px; line-height: 1.33em; font-family: "degular-text", sans-serif; color: #FF4F2C; font-weight: 500; } .menu-main { list-style: none; margin: auto 0 0 0; display: flex; gap: 36px; align-items: center; font-family: "gintronic", sans-serif; } .menu-main a { font-size: 16px; font-style: normal; font-weight: 400; line-height: 1em; color: #3B1E1C; text-decoration: none; text-transform: uppercase; } .menu-main a:hover { color: #FF4F2C; } .site-header__menu--toggle { display: none; } .site-header__menu--inner-toggle { width: 24px; height: 14px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: block; } .site-header__menu--inner-toggle::before, .site-header__menu--inner-toggle::after { content: ""; display: block; height: 1px; width: 100%; background: #303030; top: 0; left: 0; transform-origin: top left; position: absolute; transition-duration: 0.3s; } .site-header__menu--inner-toggle::after { bottom: 0; top: auto; transform-origin: bottom left; width: 60%; } .site-header__menu--inner-toggle span { text-align: left; text-indent: -200vw; overflow: hidden; height: 1px; width: 100%; display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: #303030; transition-duration: 0.3s; } .menu-open .site-header__menu--inner-toggle span, .menu-open .site-header__menu--inner-toggle::before, .menu-open .site-header__menu--inner-toggle::after, button:hover .site-header__menu--inner-toggle span, button:hover .site-header__menu--inner-toggle::before, button:hover .site-header__menu--inner-toggle::after { background: #FF4F2C; } .menu-open .site-header__menu--inner-toggle::before { transform: rotate(45deg); left: 3px; top: -2px; } .menu-open .site-header__menu--inner-toggle::after { transform: rotate(-45deg); left: 3px; width: 100%; bottom: -2px; } .menu-open .site-header__menu--inner-toggle span { opacity: 0; } @media screen and (max-width: 767px) { .site-header { padding: 15px 20px 15px; } .site-header__logo { width: 64vw; max-width: 290px; } .site-header__inner { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } .site-header__right { align-items: flex-start; width: 100%; } .site-header__tagline { font-size: 20px; text-align: left; width: 100%; } .site-header__menu--toggle { display: block; width: 24px; height: 24px; position: absolute; top: 17px; right: 15px; z-index: 1000; } .menu-main { flex-direction: column; align-items: flex-start; gap: 0px; width: 100%; } .menu-main li { width: 100%; padding: 14px 0; border-bottom: 1px solid #F6F2EE; } .menu-main a { font-size: 20px; color: #F6F2EE; } .menu-main-navigation-container { position: fixed; top: 0; right: 0; width: 100vw; height: 100vh; background: #3B1E1C; z-index: 1000; padding: 84px 20px 20px; color: #F6F2EE; box-sizing: border-box; visibility: hidden; opacity: 0; transition: opacity 0.4s ease-in-out 0s, visibility 0s ease-in-out 0.4s; } .menu-open .menu-main-navigation-container { visibility: visible; opacity: 1; transition-delay: 0s, 0s; } } @media screen and (max-width: 577px) { .site-header__tagline { font-size: 3.5vw; } } /* Page-header banner — replicated from taylorgeospatial.org/initiatives/ */ .site-wrap__wide--left { margin-left: calc((100vw - 1315px) / 2); } .page-header { width: 100%; border-top: 1px solid #CECEC0; display: flex; flex-wrap: wrap; gap: 32px; } .page-header__inner { flex: 1; display: flex; flex-direction: column; } .page-header__breadcrumb { padding-top: 30px; padding-bottom: 37px; font-family: "gintronic", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.33em; text-transform: uppercase; color: #FF4F2C; } .page-header__breadcrumb a { text-decoration: none; color: #3B1E1C; } .page-header__breadcrumb a:hover { color: #FF4F2C; } .page-header__breadcrumb .aioseo-breadcrumb-separator { width: 8px; height: 13px; position: relative; text-indent: -9999px; text-align: left; overflow: hidden; display: inline-block; vertical-align: middle; background: url('assets/vector-right.svg') no-repeat center center; background-size: contain; } .page-header__content { background-color: #ECF1F2; flex: 1; border-radius: 0 10px 10px 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 40px 94px 40px 0; } .page-header__content__inner { gap: 21px; display: flex; flex-direction: column; } .page-header__headline { font-size: 52px; font-family: "degular-text", sans-serif; font-weight: 600; line-height: 0.94em; color: var(--brown); } .page-header__statement { font-family: "degular-text", sans-serif; font-size: clamp(20px, 2.5vw, 28px); font-weight: 600; line-height: 1.12; color: var(--brown); } .page-header__statement em { font-style: normal; color: var(--red); } .page-header__excerpt { font-size: 18px; line-height: 1.45em; } .page-header__media { width: 480px; height: 480px; position: relative; border-bottom-left-radius: 10px; overflow: hidden; } .page-header__media::before { content: ""; display: block; position: absolute; top: 50px; right: 53px; width: 112px; height: 115px; background: url('assets/vector-shape.svg') no-repeat center center; background-size: contain; z-index: 10; transform: rotate(180deg); } .page-header__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .page-header .image-center { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover; } @media screen and (max-width: 1461px) { .site-wrap__wide--left { margin-left: 5vw; } } @media screen and (max-width: 960px) { .page-header__headline { font-size: 44px; } .page-header__content { padding-right: 40px; } .page-header__media { width: 380px; height: 380px; } .page-header__breadcrumb { font-size: 16px; } } @media screen and (max-width: 767px) { .page-header { flex-direction: column; gap: 0; } .page-header__headline { font-size: 36px; } .page-header__excerpt { font-size: 14px; } .page-header__breadcrumb { padding-top: 20px; padding-bottom: 20px; display: none; } .page-header__content { border-radius: 0; padding: 20px 20px 20px 0; } .page-header__content__inner { gap: 16px; } .page-header__media { width: calc(100% - 20px); height: auto; aspect-ratio: 416/247; margin: 0 0 0 auto; order: -1; } .page-header__media::before { transform: rotate(180deg) scale(0.31); transform-origin: top right; top: 60px; right: 60px; } } /* Hero */ .hero { background: var(--brown); padding: 3.5rem 2.5rem 3rem; position: relative; overflow: hidden; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--light-blue) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--light-blue) 6%, transparent) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .hero-img { position: absolute; inset: 0; background: url('assets/landsat-hero.jpg') center / cover no-repeat; opacity: 0.3; -webkit-mask-image: linear-gradient(90deg, transparent 12%, rgba(0,0,0,0.95) 70%); mask-image: linear-gradient(90deg, transparent 12%, rgba(0,0,0,0.95) 70%); pointer-events: none; } .hero-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--accent); } .hero-accent--gradient { background: linear-gradient(261deg, var(--red) 0%, var(--periwinkle) 100%); } .hero-inner { max-width: 960px; margin: 0 auto; position: relative; } .hero-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; } .hero h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; color: var(--ivory); line-height: 1.07; max-width: 700px; margin-bottom: 1rem; } .hero h1 em { font-style: normal; color: var(--accent); } .hero-desc { font-size: 1.05rem; color: var(--light-blue); max-width: 600px; line-height: 1.75; } /* Section labels */ .section-label { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 1.25rem; display: block; } .body-label { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.9rem; margin-top: 2rem; display: block; } .body-label:first-of-type { margin-top: 0; } /* Home: overview */ .overview { padding: 5.5rem 2.5rem; } .overview-inner { max-width: 960px; margin: 0 auto; } .overview-inner h2 { font-size: 2rem; font-weight: 700; line-height: 1.15; margin-bottom: 1.5rem; } .overview-body { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; } .overview-body p { font-size: 0.975rem; line-height: 1.75; color: rgba(59,30,28,0.85); } .inst-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .inst-grid + .section-label { margin-top: 2.5rem; } .inst-tag { font-size: 0.8rem; font-weight: 600; background: rgba(128,160,216,0.18); color: var(--brown); padding: 0.3rem 0.7rem; border-radius: 4px; } /* Home: program cards */ .programs { padding: 0 2.5rem 6rem; } .programs-inner { margin: 0 auto; } .programs-header { border-top: 1px solid rgba(59,30,28,0.12); padding-top: 3.5rem; margin-bottom: 2.5rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .programs-header h2 { font-size: 1.75rem; font-weight: 700; } .programs-note { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(59,30,28,0.45); letter-spacing: 0.08em; } .program-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } @media (max-width: 1080px) { .program-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .program-cards { grid-template-columns: 1fr; } } .program-card { background: var(--white); border-radius: 10px; border: 1px solid rgba(59,30,28,0.08); display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--brown); transition: transform 0.2s, box-shadow 0.2s; } .program-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(59,30,28,0.12); } .card-figure { position: relative; aspect-ratio: 416/253; width: 100%; overflow: hidden; } .card-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .program-card:hover .card-figure img { transform: scale(1.05); } .card-figure::before { content: ""; position: absolute; bottom: 16px; left: 16px; width: 34px; height: 34px; background: url('assets/vector-shape.svg') no-repeat center center; background-size: contain; z-index: 10; } .card-body { padding: 1.75rem 1.75rem 1.5rem; flex: 1; display: flex; flex-direction: column; } .card-number { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 0.6rem; } .card-title { font-size: 1.2rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.75rem; } .card-subtitle { font-family: var(--font-mono); font-size: 0.7rem; color: rgba(59,30,28,0.5); margin-bottom: 1.1rem; letter-spacing: 0.06em; } .card-desc { font-size: 0.875rem; line-height: 1.7; color: rgba(59,30,28,0.75); flex: 1; } .card-footer { padding: 1.25rem 1.75rem; border-top: 1px solid rgba(59,30,28,0.07); display: flex; align-items: center; justify-content: space-between; } .card-lead { font-size: 0.75rem; color: rgba(59,30,28,0.5); font-family: var(--font-mono); } .card-cta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 0.35rem; } .card-cta svg { transition: transform 0.2s; } .program-card:hover .card-cta svg { transform: translateX(3px); } /* Home: impact strip */ /* Funding */ .funding { padding: 0 2.5rem 6rem; } .funding-inner { margin: 0 auto; } .funding-label { font-family: "degular-text", sans-serif; font-size: clamp(20px, 2.5vw, 28px); font-weight: 600; line-height: 1.12; color: var(--brown); margin-bottom: 1.25rem; display: block; } .funding-row { display: grid; grid-template-columns: 1fr 1fr 0.75fr; gap: 1.5rem; align-items: stretch; } .funding-box { background: var(--periwinkle); color: var(--brown); border-radius: 8px; padding: 1.5rem 1.75rem; } .funding-box p { font-size: 0.975rem; line-height: 1.75; } .funding-contact { background: var(--white); } .funding-contact .desc a { color: var(--brown); text-decoration: underline; text-decoration-color: rgba(59,30,28,0.3); } .funding-contact .desc a:hover { text-decoration-color: var(--accent-text); } @media (max-width: 1080px) { .funding-row { grid-template-columns: 1fr 1fr; } .funding-contact { grid-column: 1 / -1; } } @media (max-width: 600px) { .funding-row { grid-template-columns: 1fr; } .funding-contact { grid-column: auto; } } .impact-strip { background: var(--green); padding: 4rem 2.5rem; } .impact-strip-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .impact-strip h2 { font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--brown); } .impact-strip p { font-size: 0.975rem; color: var(--brown); line-height: 1.75; } /* Subpage: layout */ .main-grid { display: grid; grid-template-columns: 280px 1fr; gap: 3.5rem; padding: 3rem 2.5rem; max-width: 960px; margin: 0 auto; align-items: start; } .section-grid { display: grid; grid-template-columns: 1fr 200px; column-gap: 2.5rem; row-gap: 2.75rem; max-width: 1040px; margin: 0 auto; padding: 3rem 2.5rem; align-items: start; } .section-grid .info-main { grid-column: 1; } .section-grid .info-aside { grid-column: 2; } .section-grid .info-full { grid-column: 1 / -1; } .section-grid .info-main > :first-child, .section-grid .info-aside > :first-child, .section-grid .info-full > :first-child { margin-top: 0; } @media (max-width: 820px) { .section-grid { grid-template-columns: 1fr; row-gap: 1.75rem; } .section-grid .info-main, .section-grid .info-aside { grid-column: auto; } } .sidebar { position: sticky; top: 80px; } .program-number { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.6rem; display: block; } .accent-bar { width: 36px; height: 4px; border-radius: 2px; margin-bottom: 1.25rem; background: var(--accent); } .sidebar h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin-bottom: 0.35rem; } .sidebar h2 span { display: block; font-size: 0.9rem; font-weight: 400; color: rgba(59,30,28,0.5); margin-top: 0.2rem; } .org-block { margin-top: 1.2rem; } .org-label { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(59,30,28,0.5); display: block; margin-bottom: 0.9rem; } .org-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .org-tag { font-size: 0.82rem; font-weight: 600; background: rgba(128,160,216,0.18); color: var(--brown); padding: 0.25rem 0.65rem; border-radius: 4px; } .org-tag.partner { background: rgba(207,242,158,0.35); } .org-tag.stakeholder { background: rgba(255,79,44,0.08); } a.org-tag { text-decoration: underline; text-decoration-color: rgba(59,30,28,0.3); } a.org-tag:hover { text-decoration-color: var(--accent-text); } .org-tags--vertical { flex-direction: column; align-items: flex-start; } .stakeholder-cta { display: inline-block; padding: 0.5rem 0.9rem; background: var(--red); color: var(--ivory); font-size: 0.82rem; font-weight: 600; border-radius: 4px; text-decoration: none; } .org-tags + .stakeholder-cta { margin-top: 0.85rem; } .stakeholder-cta:hover { background: var(--brown); color: var(--ivory); } .fellows { font-size: 0.85rem; color: rgba(59,30,28,0.65); line-height: 1.85; margin-top: 0.35rem; } .sidebar a { color: var(--brown); text-decoration: underline; text-decoration-color: rgba(59,30,28,0.3); } .sidebar a:hover { text-decoration-color: var(--accent-text); } .overview-pull { font-size: 1.05rem; font-weight: 600; color: var(--brown); line-height: 1.55; border-left: 3px solid var(--accent); padding-left: 1.25rem; margin-bottom: 1.75rem; } .overview-pull--plain { border-left: none; padding-left: 0; } .ftw-logo { width: 100%; height: auto; display: block; border-radius: 6px; } .ecosystem-cta { display: block; margin-top: 0.6rem; padding: 0.55rem 0.8rem; background: var(--brown); color: var(--ivory); font-size: 0.8rem; font-weight: 600; line-height: 1.4; border-radius: 6px; text-decoration: none; } .ecosystem-cta:hover { background: var(--red); color: var(--ivory); } /* Subpage: stats */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 0.75rem; } .stat { background: var(--white); border: 1px solid rgba(59,30,28,0.08); border-radius: 6px; padding: 0.85rem 1rem; } .stat-value { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; line-height: 1.2; display: block; margin-bottom: 0.2rem; } .stat-label { font-size: 0.72rem; line-height: 1.45; color: rgba(59,30,28,0.6); display: block; } .stat-note { font-family: var(--font-mono); font-size: 0.7rem; color: rgba(59,30,28,0.45); margin-bottom: 1.75rem; } .stat-note a { color: inherit; } /* Subpage: activities */ .activities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .enables-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .enables-list li { font-size: 0.9rem; line-height: 1.65; padding-left: 1.1rem; position: relative; } .enables-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); position: absolute; left: 0; top: 0.55em; } .enables-list strong { font-weight: 700; } .refs-box { background: rgba(167,208,220,0.25); border-radius: 8px; padding: 1.1rem 1.3rem; } .papers-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .papers-list li { font-size: 0.78rem; line-height: 1.6; color: rgba(59,30,28,0.8); padding-left: 1.1rem; position: relative; } .papers-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); position: absolute; left: 0; top: 0.5em; } .papers-list a { color: var(--brown); text-decoration: underline; text-decoration-color: rgba(59,30,28,0.3); } .papers-list a:hover { text-decoration-color: var(--accent-text); } .body-copy { font-size: 0.9rem; line-height: 1.65; margin-bottom: 0.9rem; } .section-grid--lead { padding-bottom: 0.5rem; } .section-grid--continued { padding-top: 1.5rem; } .usecase-sticky { max-width: 1040px; margin: 0 auto; padding: 0 2.5rem; } .usecase-banner { display: flex; align-items: center; gap: 0.9rem; background: #604945; border-radius: 8px; padding: 1rem 1.25rem; } .usecase-banner p { font-size: 1.05rem; font-weight: 600; line-height: 1.5; color: var(--ivory); } .usecase-banner a { color: var(--ivory); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(244,244,235,0.5); } .usecase-banner a:hover { text-decoration-color: var(--ivory); } .usecase-icon { background: rgba(255,255,255,0.18); } .explorer-link { display: block; margin-top: 1rem; } .explorer-shot { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid rgba(59,30,28,0.12); } .explorer-caption { font-size: 0.8rem; font-style: italic; color: rgba(59,30,28,0.6); line-height: 1.55; margin-top: 0.5rem; margin-bottom: 1rem; } .act-card { background: var(--white); border: 1px solid rgba(59,30,28,0.08); border-radius: 6px; padding: 1.1rem 1.25rem; } .act-card-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.5rem; display: block; } .act-card p { font-size: 0.9rem; line-height: 1.65; } .enables-box { background: var(--brown); color: var(--ivory); border-radius: 8px; padding: 1.5rem 1.75rem; } .enables-box--alt { background: var(--light-blue); color: var(--brown); } .enables-box p { font-size: 0.975rem; line-height: 1.75; } .enables-box--compact p { font-size: 0.9rem; line-height: 1.65; } .feature-stack { display: flex; flex-direction: column; gap: 1.1rem; } .feature { display: flex; gap: 0.6rem; align-items: flex-start; } .feature svg { flex: none; margin-top: 0.15rem; } .feature p { font-size: 0.8rem; line-height: 1.6; } .feature strong { font-weight: 700; } .info-aside .enables-box p { font-size: 0.82rem; line-height: 1.74; } .theme-periwinkle .info-aside .enables-box p { font-size: 0.74rem; line-height: 1.65; } .theme-green .info-aside .enables-box p { font-size: 0.74rem; line-height: 1.63; } .theme-green .info-aside .enables-box { background: var(--green); color: var(--brown); } .milestone-callout { background: var(--green); border-radius: 8px; padding: 1.2rem 1.4rem; margin-bottom: 1rem; display: flex; align-items: flex-start; gap: 1rem; } .milestone-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brown); flex-shrink: 0; margin-top: 5px; } .milestone-callout p { font-size: 0.9rem; color: var(--brown); line-height: 1.6; } .milestone-callout strong { font-weight: 700; } /* Subpage: community */ .community-section { background: var(--white); border-top: 1px solid rgba(59,30,28,0.1); padding: 2.75rem 2.5rem; } .community-inner { max-width: 960px; margin: 0 auto; } .community-inner h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; } .community-inner .sub { font-size: 0.95rem; color: rgba(59,30,28,0.65); margin-bottom: 1.5rem; } .community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .community-card { border: 1.5px solid rgba(59,30,28,0.12); border-radius: 8px; padding: 1.4rem 1.6rem; } .community-card-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; } .icon-accent { background: color-mix(in srgb, var(--accent) 15%, transparent); } .icon-brown { background: rgba(59,30,28,0.08); } .community-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; } .community-card .desc { font-size: 0.88rem; color: rgba(59,30,28,0.65); margin-bottom: 0.5rem; } .community-card .placeholder { font-size: 0.88rem; color: rgba(59,30,28,0.4); font-style: italic; font-family: var(--font-mono); background: rgba(59,30,28,0.04); border: 1px dashed rgba(59,30,28,0.2); border-radius: 4px; padding: 0.5rem 0.75rem; margin-top: 0.5rem; display: block; } .card-link { font-family: var(--font-mono); font-size: 0.85rem; color: var(--brown); text-decoration: underline; text-decoration-color: rgba(59,30,28,0.3); display: inline-block; margin-top: 0.5rem; margin-right: 1.25rem; } .card-link:hover { text-decoration-color: var(--accent-text); } /* Subpage: CTA strip under hero */ .cta-strip { padding: 2.25rem 2.5rem 0.75rem; background: var(--ivory); } .cta-panel { max-width: 960px; margin: 0 auto; background: var(--white); border: 1px solid rgba(59,30,28,0.1); border-radius: 8px; padding: 1.5rem 1.75rem; } .cta-callout { margin-bottom: 1.4rem; font-size: 1.05rem; font-weight: 600; color: var(--brown); line-height: 1.55; border-left: 3px solid var(--accent); padding-left: 1.25rem; } .cta-strip-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 2rem; } .cta-item { display: flex; align-items: flex-start; gap: 0.7rem; } .cta-item-icon { flex: none; width: 34px; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .cta-item-icon.icon-peri { background: rgba(128,160,216,0.22); } .cta-item-icon.icon-blue { background: rgba(167,208,220,0.35); } .cta-item-icon.icon-green { background: rgba(207,242,158,0.5); } .cta-item-icon.icon-img { background: none; } .cta-item-icon.icon-img img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; display: block; } .cta-item h3 { font-size: 0.85rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.2rem; } .cta-item .desc { font-size: 0.78rem; color: rgba(59,30,28,0.65); line-height: 1.5; } .cta-item .desc + .desc { margin-top: 0.2rem; } .cta-item a { color: var(--brown); text-decoration: underline; text-decoration-color: rgba(59,30,28,0.3); } .cta-item a:hover { text-decoration-color: var(--accent-text); } .cta-item .placeholder { font-size: 0.72rem; color: rgba(59,30,28,0.4); font-style: italic; font-family: var(--font-mono); background: rgba(59,30,28,0.04); border: 1px dashed rgba(59,30,28,0.2); border-radius: 4px; padding: 0.3rem 0.5rem; margin-top: 0.35rem; display: inline-block; } @media (max-width: 900px) { .cta-strip-inner { grid-template-columns: 1fr 1fr; gap: 1.1rem; } } @media (max-width: 600px) { .cta-strip-inner { grid-template-columns: 1fr; } } /* Subpage: sibling nav */ .sibling-nav { border-top: 1px solid rgba(59,30,28,0.1); padding: 2rem 2.5rem; } .sibling-nav-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .sibling-card { background: var(--white); border: 1px solid rgba(59,30,28,0.08); border-radius: 8px; padding: 1.5rem 1.75rem; text-decoration: none; color: var(--brown); display: flex; align-items: center; justify-content: space-between; transition: transform 0.2s, box-shadow 0.2s; } .sibling-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(59,30,28,0.1); } .sibling-card-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(59,30,28,0.45); margin-bottom: 0.35rem; display: block; } .sibling-card h3 { font-size: 1rem; font-weight: 700; } .sibling-bar { width: 3px; height: 36px; border-radius: 2px; margin-left: 1rem; flex-shrink: 0; } /* Publications */ .publication-library { padding: 3.5rem 2.5rem 4.5rem; background: var(--white); } .publication-library .community-inner { max-width: 1040px; } .publication-library .community-inner h2 { font-size: 2rem; font-weight: 700; line-height: 1.15; margin-bottom: 0.5rem; } .publication-library .sub { max-width: 620px; } .pubs-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; margin: 2rem 0 1.25rem; padding: 1.25rem 1.5rem; background: var(--ivory); border: 1px solid rgba(59,30,28,0.1); border-radius: 8px; } .pub-search-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(59,30,28,0.5); display: block; width: 100%; margin-bottom: -0.65rem; } .pubs-search { font-family: var(--font-mono); font-size: 0.9rem; color: var(--brown); background: var(--white); border: 1px solid rgba(59,30,28,0.2); border-radius: 6px; padding: 0.6rem 0.9rem; width: 100%; max-width: 340px; } .pubs-search:focus { outline: 2px solid var(--accent-text); outline-offset: 1px; } .filter-group { display: flex; flex-direction: column; gap: 0.4rem; } .filter-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(59,30,28,0.5); } .filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .filter-pill { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--brown); background: var(--white); border: 1px solid rgba(59,30,28,0.2); border-radius: 100px; padding: 0.25rem 0.7rem; cursor: pointer; transition: background 0.15s, color 0.15s; } .filter-pill:hover { border-color: var(--brown); } .filter-pill[aria-pressed="true"] { background: var(--brown); color: var(--ivory); border-color: var(--brown); } .pubs-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .filter-group--year { align-items: flex-end; } .pubs-count { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(59,30,28,0.45); } .publication-grid { display: flex; flex-direction: column; gap: 0.75rem; } .pub-card { background: var(--ivory); border: 1px solid rgba(59,30,28,0.1); border-top: 4px solid var(--accent); border-radius: 8px; padding: 1.2rem 1.5rem 1.15rem; min-height: 0; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; } .pub-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(59,30,28,0.1); } .pub-card[data-initiative="FTW"] { border-top-color: var(--red); } .pub-card[data-initiative="BotW"] { border-top-color: var(--green-dark); } .pub-card[data-initiative="Program"] { border-top-color: var(--periwinkle); } .pub-card[hidden] { display: none; } .pub-card-top { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; } .pub-type, .pub-initiative, .pub-year { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; } .pub-type { color: var(--accent-text); } .pub-initiative { color: rgba(59,30,28,0.55); } .pub-year { color: rgba(59,30,28,0.45); margin-left: auto; } .pub-title { font-size: 1.15rem; font-weight: 700; line-height: 1.22; margin-bottom: 0.7rem; } .pub-title a { color: var(--brown); text-decoration: none; } .pub-title a:hover { text-decoration: underline; text-decoration-color: var(--accent-text); } .pub-authors { font-size: 0.82rem; line-height: 1.55; color: rgba(59,30,28,0.65); margin-bottom: 0.55rem; } .pub-meta { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(59,30,28,0.5); margin-bottom: 0.8rem; } .pub-links { display: flex; flex-wrap: wrap; gap: 0.9rem 1.25rem; margin-top: auto; padding-top: 0.8rem; border-top: 1px solid rgba(59,30,28,0.1); } .pub-links a { font-family: var(--font-mono); font-size: 0.76rem; color: var(--brown); text-decoration: underline; text-decoration-color: rgba(59,30,28,0.3); } .pub-links a:hover { text-decoration-color: var(--accent-text); } .pubs-empty { font-family: var(--font-mono); font-size: 0.9rem; font-style: italic; color: rgba(59,30,28,0.45); padding: 2rem 0; } .publication-cta { padding-top: 2.25rem; } @media (max-width: 600px) { .pubs-results-head { align-items: flex-start; flex-direction: column; } .filter-group--year { align-items: flex-start; } .publication-library { padding-left: 1.25rem; padding-right: 1.25rem; } .pubs-toolbar { padding: 1rem; } } /* Footer — replicated from taylorgeospatial.org (.site-footer) to match it exactly */ .site-footer { position: relative; background: url('assets/background-footer.jpg') no-repeat center center; background-size: cover; color: #F6F2EE; overflow: hidden; padding: 147px 64px 50px; } .site-footer__logo { width: 244px; display: block; margin: 0 0 20px; } .site-footer__logo svg { width: 100%; height: auto; display: block; } .site-footer__logo svg path { fill: #F6F2EE; } .site-footer__column { width: 100%; max-width: 600px; font-size: 22px; line-height: 1.3em; font-weight: 500; } .menu-footer { display: block; margin-top: 14px; } .menu-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .menu-footer ul li { margin: 0; } .menu-footer ul a { color: #FF4F2C; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; font-family: "degular-text", sans-serif; } .menu-footer ul a:hover { color: #F6F2EE; } .site-footer__row { margin-top: 98px; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } .site-footer__copyright { font-size: 18px; line-height: 1.2em; font-weight: 500; } .social-media__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-start; gap: 6px; flex-direction: column; } .site-footer .social-media__list { justify-self: flex-end; margin-left: auto; } .social-media__list li { margin: 0; padding: 0; display: block; } .social-media__list li a { display: inline-block; vertical-align: middle; width: 34px; height: 34px; position: relative; overflow: hidden; transition-duration: 0.3s; } .social-media__list li a svg { z-index: 1; width: 100%; height: 100%; display: block; transition-duration: 0.3s; } .social-media__list li a svg path { transition-duration: 0.3s; fill: #809FD6; } .social-media__list li a:hover svg path { fill: #F6F2EE; } @media screen and (max-width: 767px) { .site-footer { padding: 70px 20px 50px; } .site-footer__logo { width: 220px; margin: 0 auto 40px; } .site-footer__column { font-size: 18px; text-align: center; } .menu-footer ul { flex-direction: column; justify-content: center; } .site-footer__row { margin-top: 30px; flex-direction: column; align-items: center; gap: 30px; text-align: center; } .site-footer__copyright { font-size: 14px; max-width: 180px; margin: 0 auto; order: 10; } .site-footer .social-media__list { justify-self: center; margin-left: auto; margin-right: auto; } } /* Responsive */ @media (max-width: 900px) { .impact-strip-inner { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 780px) { .main-grid { grid-template-columns: 1fr; gap: 2.5rem; } .sidebar { position: static; } .activities-grid { grid-template-columns: 1fr; } .stat-row { grid-template-columns: 1fr 1fr; } .community-grid { grid-template-columns: 1fr; } .sibling-nav-inner { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { * { /* biome-ignore lint/complexity/noImportantStyles: reduced-motion override must beat component transitions */ transition: none !important; } }