/* ========================================================================= Straight Talk With Undergraduates Foundation — design system Palette pulled straight from the brand mark: ink black, signal cyan, marker yellow, on off-white paper. Signature motif: the speech-bubble card with a mic-stand tail, echoing the logo everywhere content "speaks". ========================================================================= */ :root{ --ink: #0b0b0f; --ink-soft: #17171d; --paper: #faf9f5; --cream: #f1efe6; --line: rgba(11,11,15,.12); --line-soft: rgba(250,249,245,.16); --cyan: #1ea7de; --cyan-deep: #0c7fb0; --cyan-ink: #073649; --yellow: #ffd400; --yellow-ink: #4a3b00; --coral: #ff5a4e; --white: #ffffff; --font-display: "Archivo Black", "Arial Black", sans-serif; --font-body: "Work Sans", "Segoe UI", sans-serif; --font-mono: "Space Mono", "Courier New", monospace; --radius-lg: 28px; --radius-md: 16px; --radius-sm: 10px; --container: 1180px; --shadow-pop: 8px 8px 0 var(--ink); --shadow-pop-sm: 5px 5px 0 var(--ink); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ margin:0 0 .5em; font-family:var(--font-display); line-height:1.05; letter-spacing:-.01em; } p{ margin:0 0 1em; } button{ font-family:inherit; cursor:pointer; } .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; } .section{ padding:var(--section-pad-y, 88px) 0; } .section--tight{ padding:calc(var(--section-pad-y, 88px) * 0.64) 0; } .section--ink{ background:var(--ink); color:var(--paper); } .section--cream{ background:var(--cream); } .section--cyan{ background:var(--cyan); color:var(--ink); } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); text-transform:uppercase; font-size:12.5px; letter-spacing:.14em; font-weight:700; color:var(--cyan-deep); margin-bottom:14px; } .section--ink .eyebrow{ color:var(--yellow); } .eyebrow::before{ content:"●"; color:var(--coral); font-size:10px; } /* Theme-controlled eyebrow decoration — a purely cosmetic, CSS-only layout variation driven by the chosen theme's eyebrow_style, applied via a data-attribute on so no page content ever needs to change. */ body[data-eyebrow-style="starred"] .eyebrow::before{ content:"★"; } body[data-eyebrow-style="starred"] .eyebrow::after{ content:"★"; color:var(--coral); font-size:10px; order:2; } body[data-eyebrow-style="underline"] .eyebrow{ border-bottom:2px solid var(--coral); padding-bottom:4px; } body[data-eyebrow-style="underline"] .eyebrow::before{ content:""; display:none; } body[data-eyebrow-style="bar"] .eyebrow{ background:var(--coral); color:var(--paper); padding:4px 10px; border-radius:2px; } body[data-eyebrow-style="bar"] .eyebrow::before{ content:""; display:none; } body[data-eyebrow-style="bar"].section--ink .eyebrow, body[data-eyebrow-style="bar"] .section--ink .eyebrow{ color:var(--paper); } h1{ font-size:clamp(38px,6vw,74px); } h2{ font-size:clamp(28px,4vw,44px); } h3{ font-size:clamp(20px,2.6vw,26px); } .lede{ font-size:19px; max-width:640px; color:var(--ink-soft); } .section--ink .lede{ color:rgba(250,249,245,.82); } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:999px; font-weight:700; font-size:15px; border:2px solid var(--ink); background:var(--ink); color:var(--paper); box-shadow:var(--shadow-pop-sm); transition:transform .15s ease, box-shadow .15s ease; white-space:nowrap; } .btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); } .btn:active{ transform:translate(0,0); box-shadow:2px 2px 0 var(--ink); } .btn--yellow{ background:var(--yellow); color:var(--yellow-ink); border-color:var(--ink); } .btn--cyan{ background:var(--cyan); color:#fff; border-color:var(--ink); } .btn--ghost{ background:transparent; color:var(--ink); } .section--ink .btn--ghost{ color:var(--paper); border-color:var(--paper); box-shadow:5px 5px 0 var(--paper); } .section--ink .btn--ghost:hover{ box-shadow:7px 7px 0 var(--paper); } .btn--sm{ padding:10px 18px; font-size:13px; } .btn--full{ width:100%; } .btn[disabled]{ opacity:.5; cursor:not-allowed; } /* ---------- header / nav ---------- */ .site-header{ position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:2px solid var(--ink); } .nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:20px; } .nav__brand{ display:flex; align-items:center; gap:10px; } .nav__brand img{ height:44px; width:auto; } .nav__links{ display:flex; align-items:center; gap:28px; } .nav__links a{ font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding:6px 2px; border-bottom:2px solid transparent; } .nav__links a:hover, .nav__links a.is-active{ border-bottom-color:var(--coral); } .nav__cta{ display:flex; align-items:center; gap:12px; } .nav__toggle{ display:none; background:none; border:2px solid var(--ink); border-radius:8px; padding:8px 10px; } .nav__toggle span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; } @media (max-width: 940px){ .nav__links{ position:fixed; inset:70px 0 0 0; background:var(--paper); flex-direction:column; align-items:flex-start; gap:0; padding:10px 24px 24px; transform:translateY(-110%); transition:transform .25s ease; border-bottom:2px solid var(--ink); } .nav__links.is-open{ transform:translateY(0); } .nav__links a{ width:100%; padding:14px 0; border-bottom:1px solid var(--line); } .nav__toggle{ display:block; } .nav__cta .btn span.long{ display:none; } } /* ---------- ticker ---------- */ .ticker{ background:var(--ink); color:var(--paper); overflow:hidden; border-bottom:2px solid var(--ink); } .ticker__track{ display:flex; gap:48px; padding:11px 0; white-space:nowrap; animation:ticker 32s linear infinite; width:max-content; } .ticker__track span{ font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; } .ticker__track span em{ color:var(--yellow); font-style:normal; } @keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } @media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; overflow-x:auto; } } /* ---------- hero ---------- */ .hero{ position:relative; padding:64px 0 80px; overflow:hidden; } .hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; } .hero .eyebrow{ } .hero__art{ position:relative; } .hero__art img{ border-radius:var(--radius-lg); border:3px solid var(--ink); box-shadow:var(--shadow-pop); } .hero__stat{ position:absolute; bottom:-22px; left:-22px; background:var(--yellow); color:var(--yellow-ink); border:3px solid var(--ink); border-radius:var(--radius-md); padding:16px 20px; box-shadow:var(--shadow-pop-sm); font-family:var(--font-display); text-transform:uppercase; } .hero__stat b{ display:block; font-size:30px; line-height:1; } .hero__stat small{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:none; font-weight:700; } .hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; } @media (max-width: 860px){ .hero__grid{ grid-template-columns:1fr; } .hero__art{ order:-1; } } /* ---------- speech-bubble card (signature element) ---------- */ .bubble{ position:relative; background:var(--white); color:var(--ink); border:3px solid var(--ink); border-radius:var(--radius-md); padding:28px; box-shadow:var(--shadow-pop-sm); } .bubble::after{ content:""; position:absolute; left:36px; bottom:-19px; width:34px; height:22px; background:var(--white); border-left:3px solid var(--ink); border-bottom:3px solid var(--ink); border-bottom-left-radius:16px; clip-path:polygon(0 0, 100% 0, 0 100%); } .bubble--cyan{ background:var(--cyan); color:#fff; } .bubble--cyan::after{ background:var(--cyan); } .bubble--yellow{ background:var(--yellow); color:var(--yellow-ink); } .bubble--yellow::after{ background:var(--yellow); } .bubble--ink{ background:var(--ink); color:var(--paper); } .bubble--ink::after{ background:var(--ink); border-color:var(--paper); } /* ---------- grids / cards ---------- */ .grid{ display:grid; gap:26px; } .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--2{ grid-template-columns:repeat(2,1fr); } .grid--4{ grid-template-columns:repeat(4,1fr); } @media (max-width: 940px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 620px){ .grid--3,.grid--4,.grid--2{ grid-template-columns:1fr; } } .card{ background:var(--white); color:var(--ink); border:2px solid var(--ink); border-radius:var(--radius-md); padding:26px; display:flex; flex-direction:column; gap:10px; transition:transform .15s ease, box-shadow .15s ease; } .card:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink); } .card--flagship{ background:var(--cream); } .card--flagship .card__tag{ background:var(--white); } .card__num{ font-family:var(--font-mono); font-size:12px; color:var(--coral); font-weight:700; } .card__tag{ display:inline-flex; align-self:flex-start; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; background:var(--cream); border:1.5px solid var(--ink); border-radius:999px; padding:4px 10px; font-weight:700; } .card .card__link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:auto; align-self:flex-start; padding:9px 16px; border-radius:999px; background:var(--yellow); color:var(--yellow-ink); border:2px solid var(--ink); box-shadow:var(--shadow-pop-sm); transition:transform .15s ease, box-shadow .15s ease; text-decoration:none; } .card .card__link::after{ content:"→"; } a.card .card__link{ pointer-events:none; } /* the whole card is already the link — this is a visual label, not a second clickable target */ a.card:hover .card__link{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); } a.card__link:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); } a.card__link:active{ transform:translate(0,0); box-shadow:2px 2px 0 var(--ink); } .pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; } .pill{ font-family:var(--font-mono); font-size:12px; border:1.5px solid var(--ink); border-radius:999px; padding:6px 12px; font-weight:700; } a.pill{ text-decoration:none; color:var(--ink); } a.pill.is-active{ background:var(--yellow); } /* ---------- section header ---------- */ .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; flex-wrap:wrap; } /* ---------- values / process ---------- */ .value{ border-top:3px solid var(--ink); padding-top:16px; } .value b{ display:block; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan-deep); margin-bottom:8px; } .step{ display:flex; gap:18px; } .step__n{ font-family:var(--font-display); font-size:34px; color:var(--cream); -webkit-text-stroke:2px var(--ink); flex:none; } .section--ink .step__n{ color:var(--ink); -webkit-text-stroke:2px var(--yellow); } /* ---------- gallery ---------- */ .gallery-item{ border:2px solid var(--ink); border-radius:var(--radius-md); overflow:hidden; background:var(--white); } .gallery-item img{ aspect-ratio:4/3; object-fit:cover; width:100%; } .gallery-item__cap{ padding:14px 16px; } .gallery-item__cap b{ display:block; font-size:14px; } .gallery-item__cap span{ font-family:var(--font-mono); font-size:11px; color:var(--cyan-deep); text-transform:uppercase; } .year-tag{ display:inline-block; background:var(--ink); color:var(--yellow); font-family:var(--font-mono); font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; margin:0 0 18px; } /* ---------- forms ---------- */ .field{ margin-bottom:18px; } .field label{ display:block; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin-bottom:6px; } .field input, .field select, .field textarea{ width:100%; padding:13px 14px; border:2px solid var(--ink); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:15px; background:var(--white); color:var(--ink); } .field textarea{ resize:vertical; min-height:120px; } .field input:focus, .field select:focus, .field textarea:focus{ outline:3px solid var(--cyan); outline-offset:1px; } .field-hint{ font-size:12.5px; color:rgba(11,11,15,.6); margin-top:6px; } .form-card{ background:var(--white); color:var(--ink); border:2px solid var(--ink); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-pop); } .checkline{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; } .checkline input{ margin-top:4px; } .alert{ padding:14px 18px; border-radius:var(--radius-sm); border:2px solid var(--ink); font-size:14px; margin-bottom:20px; font-weight:600; } .alert--ok{ background:#dcf6e3; } .alert--error{ background:#ffe1de; } .alert--info{ background:var(--cream); } /* ---------- admin CRUD helpers ---------- */ .admin-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .admin-toolbar h1{ font-size:24px; margin:0; } .admin-table{ width:100%; border-collapse:collapse; background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-md); overflow:hidden; } .admin-table th, .admin-table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; } .admin-table th{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; background:var(--cream); } .admin-table tr:last-child td{ border-bottom:none; } .admin-table td.actions{ white-space:nowrap; } .admin-table td.actions a{ font-family:var(--font-mono); font-size:12px; font-weight:700; margin-right:12px; } .admin-table td.actions a.danger{ color:var(--coral); } .pill-status{ display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--cream); } .pill-status--live{ background:#dcf6e3; } .pill-status--off{ background:#ffe1de; } .admin-section{ margin-bottom:44px; } .admin-section h2{ font-size:16px; text-transform:uppercase; font-family:var(--font-mono); letter-spacing:.04em; margin-bottom:14px; } .inline-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; } .inline-form .field{ margin-bottom:0; } .repeat-row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin-bottom:8px; } /* ---------- donation amount picker ---------- */ .amount-quick{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; } .amount-quick__btn{ flex:1; min-width:90px; padding:10px 8px; border-radius:999px; border:2px solid var(--ink); background:var(--white); font-family:var(--font-mono); font-weight:700; font-size:13px; } .amount-quick__btn.is-active{ background:var(--yellow); } /* ---------- tables (admin/dashboard) ---------- */ table.data{ width:100%; border-collapse:collapse; background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-md); overflow:hidden; } table.data th, table.data td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; } table.data th{ font-family:var(--font-mono); text-transform:uppercase; font-size:11px; letter-spacing:.05em; background:var(--cream); } table.data tr:last-child td{ border-bottom:none; } /* ---------- footer ---------- */ .site-footer{ background:var(--ink); color:var(--paper); padding:64px 0 28px; } .footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:48px; } .footer__brand img{ height:40px; margin-bottom:14px; } .footer__brand p{ color:rgba(250,249,245,.7); font-size:14px; max-width:280px; } .footer h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--yellow); margin-bottom:16px; text-transform:uppercase; } .footer__grid a, .footer__grid address{ display:block; color:rgba(250,249,245,.82); font-size:14px; margin-bottom:10px; font-style:normal; } .footer__grid a:hover{ color:var(--yellow); } .footer__bottom{ border-top:1px solid var(--line-soft); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:rgba(250,249,245,.6); } .footer__social{ display:flex; gap:14px; } @media (max-width: 860px){ .footer__grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 560px){ .footer__grid{ grid-template-columns:1fr; } } /* ---------- misc utility ---------- */ .text-center{ text-align:center; } .mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; } .badge-live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; font-weight:700; color:var(--coral); } .badge-live::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--coral); animation:pulse 1.4s infinite; } @keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} } .divider{ height:2px; background:repeating-linear-gradient(90deg,var(--ink) 0 10px, transparent 10px 18px); margin:64px 0; } .progress{ height:14px; border:2px solid var(--ink); border-radius:999px; background:var(--white); overflow:hidden; } .progress span{ display:block; height:100%; background:var(--cyan); } .lesson-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border:2px solid var(--ink); border-radius:var(--radius-sm); margin-bottom:12px; background:var(--white); } .lesson-row.is-done{ background:var(--cream); } .lesson-row__title{ display:flex; align-items:center; gap:12px; font-weight:700; } .lesson-row__check{ width:26px; height:26px; border:2px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; } .is-done .lesson-row__check{ background:var(--yellow); } .video-frame{ position:relative; width:100%; aspect-ratio:16/9; background:var(--ink); border:3px solid var(--ink); border-radius:var(--radius-md); overflow:hidden; } .video-frame iframe, .video-frame video{ width:100%; height:100%; border:0; } .quiz-q{ border:2px solid var(--ink); border-radius:var(--radius-md); padding:22px; margin-bottom:18px; background:var(--white); } .quiz-opt{ display:flex; gap:10px; align-items:center; padding:10px 12px; border:2px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; cursor:pointer; } .quiz-opt:hover{ border-color:var(--ink); } .stat-box{ border:2px solid var(--ink); border-radius:var(--radius-md); padding:20px; background:var(--white); color:var(--ink); text-align:center; } .stat-box b{ display:block; font-family:var(--font-display); font-size:32px; } .stat-box span{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--cyan-deep); } .breadcrumb{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--cyan-deep); margin-bottom:16px; } .breadcrumb a{ text-decoration:underline; }