with its own 72px top padding before the heading text — subtract that so the scroll lands on the text itself instead of leaving that padding as empty space below the sticky bars. #activities is excluded here — it sets its own top padding, so it carries its own matching offset further down. */ #about, #participants, #testimonials, #apply, #sg-activities, #sg-curriculum, #sg-guide, #sg-faq { scroll-margin-top: max(0px, calc(var(--sticky-offset, 120px) - 72px)); } /* Sliding toggle switch: a colored "thumb" slides between the two labels (JS measures each button's real width/position, since "학생 · Student" and "봉사자 · Volunteer" aren't the same width) instead of each button just flipping its own background on click. */ .role-switch { position: relative; display: inline-flex; background: var(--gray-100); border-radius: 999px; padding: 2px; gap: 1px; flex-shrink: 0; justify-self: end; margin-right: -8px; } .role-switch-thumb { position: absolute; top: 2px; left: 0; height: calc(100% - 4px); width: 0; border-radius: 999px; background: var(--red); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.28s ease; z-index: 0; pointer-events: none; } .role-switch-thumb.is-volunteer { background: var(--ink); } .role-btn { position: relative; z-index: 1; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--gray-600); white-space: nowrap; background: transparent; transition: color 0.2s; } .role-btn.active { color: #fff; } .nav-toggle { display: none; width: 38px; height: 38px; border-radius: 999px; align-items: center; justify-content: center; border: 1px solid var(--gray-300); flex-shrink: 0; /* stack the 3 bars */ flex-direction: column; gap: 4px; } .nav-toggle span { display: block; width: 16px; height: 2px; border-radius: 1px; background: var(--ink); } .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 8px 16px 16px; border-top: 1px solid var(--gray-300); background: #fff; } .mobile-nav.open { display: flex; } .mobile-nav a { padding: 10px 4px; font-size: 14.5px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--gray-100); } .mobile-nav a.active { color: var(--red); font-weight: 600; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 32px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; white-space: nowrap; } .btn-primary { background: var(--red); color: #fff; } .btn-primary:hover { background: var(--red-dark); } .btn-ghost { background: rgba(255, 255, 255, 0.75); color: var(--ink); border: 1.5px solid var(--ink); } .btn-ghost:hover { background: #fff; border-color: var(--red); color: var(--red); } .btn-sm { padding: 9px 18px; font-size: 13px; } /* Apply buttons whose Google Form isn't posted yet — script.js swaps them into this muted, non-clickable state while GOOGLE_FORM_LINKS holds "#". */ .btn.btn-upcoming, .btn.btn-upcoming:hover { background: var(--gray-100); color: var(--gray-600); cursor: default; transform: none; box-shadow: none; } /* ---------- floating activity sign-up button (Semester Guide page) ---------- */ .floating-apply-btn { position: fixed; right: 22px; bottom: 22px; z-index: 500; display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 8px 20px rgba(221, 57, 40, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .floating-apply-btn:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(221, 57, 40, 0.4); } .floating-apply-icon { font-size: 15px; line-height: 1; } /* ---------- hero: full-bleed photo with a fade-to-content overlay ---------- */ .hero { position: relative; overflow: hidden; padding: 104px 0 88px; background: var(--cream); /* shows while the photo loads */ border-bottom: 1px solid var(--gray-300); } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 100deg, var(--cream) 0%, rgba(253, 251, 250, 0.94) 32%, rgba(253, 251, 250, 0.6) 55%, rgba(253, 251, 250, 0.12) 78%, rgba(253, 251, 250, 0) 95% ); } .hero .container { position: relative; z-index: 2; } .hero-text { display: grid; gap: 28px; max-width: 620px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--red); background: var(--red-tint); padding: 6px 14px; border-radius: 999px; width: fit-content; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); } .hero h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.25; font-weight: 700; letter-spacing: -0.3px; max-width: 780px; } .hero h1 .hero-accent { color: var(--red); font-weight: 800; } .hero .lede { font-size: 17px; color: var(--ink-soft); max-width: 620px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } /* ---------- page hero (secondary pages) ---------- */ .page-hero { position: relative; overflow: hidden; padding: 56px 0 44px; background: var(--cream); border-bottom: 1px solid var(--gray-300); } .page-hero .container { position: relative; z-index: 2; } .page-hero h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -0.3px; color: var(--ink); margin-top: 14px; max-width: 760px; } .page-hero h1 strong { color: var(--red); font-weight: 800; } .page-hero .lede { margin-top: 12px; font-size: 16px; color: var(--ink-soft); max-width: 640px; } /* ---------- section shell ---------- */ section { padding: 72px 0; } .section-head { max-width: 680px; margin-bottom: 40px; } /* Tighter head on #sg-activities so the activity grid keeps fitting close to one screen after the "활동 신청" sub-nav link scroll-jumps here. */ #sg-activities .section-head { margin-bottom: 28px; } /* Tightened so more of the carousel lands in view when the "활동/Activities" sub-nav link scroll-jumps here — no kicker anymore, and less air above it. The anchor offset must subtract THIS padding (40px), not the 72px the shared rule above assumes: subtracting 72 overshot by 32px and tucked the "지난 활동 둘러보기" heading up under the sticky header + sub-nav. This ID selector also outranks the mobile `section` padding, so 40px holds at every width and no mobile counterpart is needed. */ #activities { padding-top: 40px; scroll-margin-top: max(0px, calc(var(--sticky-offset, 120px) - 40px)); } #activities .section-head { margin-bottom: 20px; } .kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--red); margin-bottom: 10px; display: block; } /* Section headers use the minimal outlined-icon treatment: a red-ringed icon circle beside the title, with the English title as a small muted inline subtitle in the Korean (student) view. Replaces the earlier red-smear underline (.hl) as the section-title accent. */ .sh-row { display: flex; align-items: center; gap: 14px; } .sh-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1.5px solid var(--red); display: flex; align-items: center; justify-content: center; font-size: 19px; } .sh-sub { font-size: 14px; font-weight: 400; color: var(--gray-600); letter-spacing: 0; white-space: nowrap; } .section-head h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.2px; } .section-head p { margin-top: 12px; color: var(--ink-soft); font-size: 16px; } .alt-bg { background: var(--gray-100); } /* ---------- about cards ---------- "소개 카드 4b" design: square paper-grey panels, a red square number badge, deep-teal title, 14px body. No border or radius (the brand leans square). */ .about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .about-card { display: flex; flex-direction: column; gap: 18px; background: #F8F8F8; border: none; border-radius: var(--radius-lg); padding: 26px 26px 28px; } .about-card .num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--red); color: #fff; font-size: 16px; font-weight: 700; border-radius: 50%; margin: 0; } .about-card h3 { font-size: 21px; font-weight: 800; color: #21373A; letter-spacing: -0.01em; line-height: 1.3; margin: 0; } .about-card p { font-size: 14px; line-height: 1.7; color: #4D4D4D; margin: 0; } /* ---------- impact summary cards (About section) ---------- Stat-card design "3a": a white card framed in 1.5px brand red — red eyebrow, bold title with a muted English subtitle, one 56px hero figure over a short red rule, then a two-column grid of supporting figures. */ .impact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .impact-card { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1.5px solid var(--red); border-radius: var(--radius-lg); padding: 26px 26px 24px; } .impact-card .impact-badge { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--red); } .impact-card .impact-title { display: flex; flex-direction: column; gap: 4px; } .impact-card h3 { font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; } .impact-card .impact-subtitle { display: block; font-family: var(--font-en); font-size: 13px; font-weight: 500; color: #999999; } .impact-card > p { font-size: 14px; line-height: 1.65; color: var(--ink); } /* margin-top:auto pins the figure block to the bottom so the red rules and stat grids line up across the three cards even when a paragraph runs longer. */ .impact-hero-stat { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; margin-top: auto; } .impact-hero-stat strong { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--red); font-variant-numeric: tabular-nums; } .impact-hero-stat strong small { font-size: 0.4em; font-weight: 700; letter-spacing: 0; margin-left: 6px; } .impact-hero-bar { display: block; width: 28px; height: 3px; background: var(--red); } .impact-hero-label { font-size: 13px; color: var(--ink); } .impact-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding-top: 16px; border-top: 1px solid #E6E6E6; } .impact-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .impact-stat > strong { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; } .impact-stat > span { font-size: 12px; line-height: 1.4; color: #999999; } .impact-stat-wide { grid-column: 1 / -1; } .impact-stat-wide > strong { font-size: 14px; line-height: 1.55; } /* ---------- stats ---------- */ .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--gray-300); text-align: center; } .stat { text-align: center; padding: 4px 12px; } .stat-count .num { font-size: clamp(22px, 2.6vw, 26px); font-weight: 700; color: var(--ink); letter-spacing: -0.3px; } .stat .label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-top: 8px; } /* ---------- stats: donut-ring variant (About section's first stats-bar) ---------- */ .stat-ring .ring { --pct: 0; position: relative; width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 12px; background: conic-gradient(var(--red) calc(var(--pct) * 1%), var(--gray-300) 0); } .stat-ring .ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg); } .stat-ring .ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--ink); } .stat-count .count-icon { font-size: 30px; margin-bottom: 10px; } /* ---------- stats: split rate-group / count-group layout ---------- */ .stats-bar-split { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 32px; } .stats-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px; } .stats-group .stat { flex: 0 1 120px; } .stats-divider { width: 1px; background: var(--gray-300); align-self: stretch; min-height: 70px; } /* This group's labels ("Cumulative Event Attendance", etc.) run longer than the other stat groups' single-word labels. Forced onto one row (nowrap) with flexible, shrinkable columns instead of the shared 120px basis, so all 4 stay side by side at any width — the label itself can still wrap to a second line inside its own narrower column rather than force the 4 stats to stack 2-by-2. */ .stats-bar-secondary .stats-group { flex-wrap: nowrap; } .stats-bar-secondary .stats-group .stat { flex: 1 1 0; min-width: 0; max-width: none; } /* ---------- intro banner (fall 2026) ---------- */ .intro-banner { text-align: center; padding: 8px 0 4px; display: grid; gap: 14px; justify-content: center; justify-items: center; } .intro-banner .kicker { color: var(--red); } .intro-banner h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: var(--ink); } .intro-banner p { color: var(--ink-soft); font-size: 16px; max-width: 640px; } /* ---------- who / how-to-apply ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .criteria-list { display: grid; gap: 12px; } .criteria-item { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-md); } .criteria-item .mark { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .criteria-item p { font-size: 14.5px; color: var(--ink); } .note-box { margin-top: 14px; font-size: 13px; color: var(--gray-600); padding: 12px 16px; border-left: 3px solid var(--gray-300); background: var(--gray-100); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* sg-guide's KakaoTalk contact note: same footprint, brand-color emphasis so it stands out */ /* sg-guide's intro line: these are required items, so give it a touch more weight than a normal muted subtitle */ #sg-guide .section-head p { color: var(--ink); font-weight: 600; } .timeline-list { display: grid; gap: 10px; } .timeline-list-full { max-width: 820px; } .timeline-row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px; background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-md); } /* Already-passed schedule items fade back — dated with data-end via script.js */ .timeline-row.is-past { opacity: 0.5; filter: grayscale(0.4); } .timeline-row.is-past .when { color: var(--gray-600); } .timeline-row .when { font-size: 15px; font-weight: 800; color: var(--red); line-height: 1.3; letter-spacing: -0.2px; } .timeline-row .when .when-sub { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--gray-600); letter-spacing: 0; } .timeline-row .what strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; } .timeline-row .what span.tag { display: inline-block; margin-bottom: 6px; font-size: 11.5px; font-weight: 500; color: var(--gray-600); background: var(--gray-100); padding: 3px 9px; border-radius: 999px; } .timeline-row .what p.desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; } /* ---------- curriculum ---------- */ .curriculum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .curr-card { background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 24px 20px; } .curr-card .icon { font-size: 22px; margin-bottom: 12px; } .curr-card .tag2 { font-size: 12px; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; display: block; } .curr-card h4 { font-size: 15.5px; font-weight: 600; margin-bottom: 8px; line-height: 1.4; } .curr-card p { font-size: 13.5px; color: var(--ink-soft); } /* ---------- semester guide: curriculum spec table ---------- */ .spec-table { margin-top: 8px; border-top: 1px solid var(--gray-300); } .spec-row { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--gray-300); } .spec-label { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 700; color: var(--ink); padding-top: 2px; } .spec-bar { flex: none; width: 4px; height: 26px; border-radius: 2px; background: var(--red); } .spec-row:nth-child(2) .spec-bar { background: var(--red-dark); } .spec-row:nth-child(3) .spec-bar { background: var(--red-darker); } .spec-row:nth-child(4) .spec-bar { background: var(--ink); } .spec-row:nth-child(5) .spec-bar { background: var(--gray-600); } .spec-value p { position: relative; margin: 0 0 10px; padding-left: 15px; font-size: 15px; color: var(--ink-soft); line-height: 1.75; } .spec-value p::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 5px; height: 5px; border-radius: 50%; background: var(--red-tint-2); } .spec-value p:last-child { margin-bottom: 0; } .spec-value strong { color: var(--ink); } .textbook-covers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .textbook-covers img { width: 42px; height: auto; border-radius: 4px; border: 1px solid var(--gray-300); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* ---------- curriculum spec panel (one row per item) ---------- One white panel with a row per item — label · headline number · wording — so a long note (활동 참여) can run the full row width instead of stretching one card taller than the rest. The textbook row closes the panel with the covers on the right. .spec-table above is still used by proposal-guide.html. */ .spec-panel { margin-top: 8px; background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); overflow: hidden; } .spec-line { display: grid; grid-template-columns: 110px 130px 1fr; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--gray-100); } .spec-line:first-child { border-top: 0; } .spec-line-book { grid-template-columns: 110px 1fr auto; } .spec-line-book .textbook-covers { margin-top: 0; flex-wrap: nowrap; } .spec-line-book .textbook-covers img { width: 44px; } .spec-key { font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--gray-600); } .spec-big { margin: 0; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.6px; line-height: 1.1; font-variant-numeric: tabular-nums; } .spec-big small { font-size: 13px; font-weight: 700; letter-spacing: 0; margin-left: 2px; } .spec-desc { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45; } .spec-val { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; line-height: 1.45; } .spec-val-accent { color: var(--red); } .spec-note { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; } /* ---------- semester guide: activity timeline ---------- */ .activity-timeline { margin-top: 8px; } .activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ac-card { position: relative; background: #fff; border-radius: 20px; padding: 38px 20px 26px; text-align: center; overflow: hidden; box-shadow: 0 10px 24px rgba(40, 30, 20, 0.08); transition: box-shadow 0.18s ease, transform 0.18s ease; } .ac-card:hover { box-shadow: 0 16px 34px rgba(40, 30, 20, 0.13); transform: translateY(-4px); } /* Recruitment status — starts as "모집 예정" and script.js flips it to "모집 중" the moment a real (non-"#") Google Form URL is set for that card's activity in GOOGLE_FORM_LINKS, so this never needs updating here by hand. */ .ac-status { position: absolute; top: 14px; right: 14px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; } .ac-status-upcoming { color: var(--ink-soft); background: var(--gray-100); } .ac-status-open { color: #fff; background: var(--red); } .ac-required { position: absolute; top: 14px; left: 14px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em; color: #fff; background: var(--red); padding: 3px 9px; border-radius: 999px; } /* Icon moved beside the title (instead of stacked above it) to cut each card's vertical height — lets the whole grid fit in one screen when jumping here from the "활동 신청" sub-nav link. */ /* Icon + title centered as a unit within the card (padding keeps it clear of the required/number badges pinned to the top corners); the title text itself stays left-aligned within that unit for readability. */ .ac-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; padding: 0 22px; } .ac-head-text { flex: 0 1 auto; min-width: 0; text-align: left; } .ac-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--red-tint); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .ac-cat-online .ac-icon { background: var(--gray-100); } .ac-cat-mixed .ac-icon { background: linear-gradient(135deg, var(--red-tint) 50%, var(--gray-100) 50%); } .ac-tag { display: inline-block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 3px; color: var(--red-dark); } .ac-cat-online .ac-tag { color: var(--ink-soft); } .ac-cat-mixed .ac-tag { color: var(--ink); } .ac-title { font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.3; letter-spacing: -0.2px; } /* Block-level and self-centered so the apply button drops to its own centered line underneath, instead of sharing the date's line. */ .ac-date { display: flex; align-items: center; justify-content: center; width: fit-content; gap: 5px; font-size: 12.5px; font-weight: 400; color: var(--ink-soft); margin: 0 auto 12px; } .ac-date::before { content: ""; display: inline-block; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .ac-btn { display: inline-flex; align-items: center; justify-content: center; width: fit-content; font-size: 12.5px; font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--red); background: transparent; color: var(--red); cursor: pointer; text-decoration: none; line-height: 1.4; white-space: nowrap; } .ac-btn:hover { background: var(--red); color: #fff; } /* ---------- activities intro banner (top of activities section) ---------- */ /* One plain neutral banner holding both the section's "why" line and the required-activity note — no icon, no accent color, per the request to merge them and strip decoration. */ .activity-highlight { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; padding: 16px 20px; background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); } .activity-highlight .ah-text { display: flex; flex-direction: column; gap: 6px; } .activity-highlight p { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.5; } /* ---------- ongoing activity proposal callout ---------- */ .activity-proposal { display: flex; align-items: flex-start; gap: 16px; margin-top: 16px; padding: 20px 22px; border: 1.5px dashed var(--gray-300); border-radius: var(--radius-lg); background: var(--gray-100); } .activity-proposal .ap-icon { flex: none; font-size: 22px; line-height: 1; margin-top: 2px; } .activity-proposal h4 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .activity-proposal p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 12px; } /* ---------- activity detail page ---------- */ .detail-fact-map { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; font-size: 12.5px; font-weight: 600; } .activity-detail-figure { margin: 0 0 26px; } .activity-detail-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--gray-300); display: block; } .activity-detail-figure figcaption { margin-top: 9px; font-size: 12.5px; color: var(--gray-600); line-height: 1.5; } .activity-detail-section { padding: 44px 0 64px; } .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; margin-bottom: 32px; } .back-link:hover { color: var(--red); } .activity-detail-block { display: none; max-width: 640px; } .activity-detail-block.is-shown { display: block; } .activity-detail-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .activity-detail-icon { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--red-tint); display: flex; align-items: center; justify-content: center; font-size: 26px; } /* Detail-page type hierarchy: bold is reserved for the title, section subheads, and fact values — everything else differentiates by size and color (ink for what matters, ink-soft for supporting text) instead. */ .activity-detail-date { display: block; font-size: 13px; font-weight: 600; color: var(--red); margin-bottom: 6px; } .activity-detail-head h1 { font-size: 25px; font-weight: 700; color: var(--ink); line-height: 1.3; } .activity-detail-head h1 em { font-weight: 400; font-style: normal; font-size: 17px; color: var(--gray-600); } .activity-detail-desc { font-size: 15.5px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 28px; } /* Optional deeper-dive content for a single activity (currently only the email pen pal one) — reviews, how-it-works steps, and program facts, sitting between the summary paragraph and the apply button. */ .activity-detail-extra { margin-bottom: 28px; } .activity-detail-extra + .activity-detail-extra { margin-top: -4px; } .activity-detail-subhead { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.1px; margin-bottom: 14px; } .review-stack { display: flex; flex-direction: column; gap: 12px; } .review-stack .voice-card { padding: 18px 18px; gap: 10px; } .steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: step; } .steps-list li { display: flex; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 400; color: var(--ink-soft); line-height: 1.55; } .steps-list .steps-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transform: translateY(1px); } .detail-fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .detail-fact { background: var(--gray-100); border-radius: var(--radius-md); padding: 14px 16px; } .detail-fact-key { display: block; font-size: 11.5px; font-weight: 500; color: var(--gray-600); margin-bottom: 4px; } .detail-fact-val { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.5; } .detail-fact-wide { grid-column: 1 / -1; } .link-team-note { font-size: 14px; color: var(--ink-soft); line-height: 1.7; } .link-team-note.activity-detail-note-lead { margin: 0 0 16px; } .link-team-note.activity-detail-note-trail { margin: 12px 0 0; } @media (max-width: 480px) { .detail-fact-grid { grid-template-columns: 1fr; } } /* Two (or more) distinct sign-up choices within one activity — each option gets its own Apply button/Google Form rather than sharing the activity's single top-level one, since a participant only signs up for one. */ .activity-detail-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; } .activity-detail-option { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); background: #fff; } .activity-detail-option-icon { flex: none; font-size: 22px; line-height: 1; } .activity-detail-option-body { flex: 1; min-width: 0; } .activity-detail-option-body h3 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; } .activity-detail-option-body h3 em { font-weight: 400; font-style: normal; color: var(--ink-soft); } .activity-detail-option-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .activity-detail-option .btn { flex: none; } @media (max-width: 480px) { .activity-detail-option { flex-wrap: wrap; } .activity-detail-option .btn { width: 100%; text-align: center; } } /* Movie Night carries a film still + a synopsis, so it stacks vertically instead of the plain icon/title/button row the other options use. */ .activity-detail-option-with-photo { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; } .activity-detail-option-with-photo .activity-detail-option-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; } .activity-detail-option-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 20%; display: block; } .activity-detail-option-desc { padding: 14px 18px 18px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; } .activity-detail-option-desc strong { color: var(--ink); } .activity-detail-option-desc .film-credit { display: block; margin-top: 6px; font-size: 12px; color: var(--gray-600); } /* Movie Night's date / RSVP / film / venue facts under the synopsis */ .activity-detail-option-desc .sw-facts { margin-top: 14px; } /* Movie Night card body follows the Game Day detail layout in miniature: subhead + fact grid, a venue photo slot (dashed placeholder until a 6F photo exists), then directions + the no-parking callout. */ .mn-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gray-100); } .mn-section .activity-detail-subhead { font-size: 13.5px; margin-bottom: 10px; } .mn-section .detail-fact { padding: 12px 14px; } .mn-section .steps-list li { font-size: 13px; } .mn-section .faq-callout { font-size: 12px; } .venue-figure { margin: 0; } .venue-figure img { aspect-ratio: 16 / 9; } .venue-photo-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 16 / 9; border: 1.5px dashed var(--gray-300); border-radius: var(--radius-lg); background: var(--gray-100); color: var(--gray-600); font-size: 12px; font-weight: 600; } .venue-photo-slot .ic { width: 24px; height: 24px; font-size: 24px; } /* Special Weeks: both formats visible on one screen — offline Movie Night on the left, the online documentary library as a tile grid on the right, with the single apply button up top. */ .activity-detail-block-wide { max-width: none; } .sw-apply { margin-bottom: 26px; } .sw-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 18px; align-items: start; } .sw-col { min-width: 0; } .sw-col-label { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 6px; } .sw-col-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 12px; } .doc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .doc-tile { display: flex; flex-direction: column; border: 1px solid var(--gray-300); border-radius: var(--radius-md); overflow: hidden; background: #fff; } .doc-tile-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .doc-tile-thumb-ph { display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-600); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; } .doc-tile-body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 9px 11px 11px; } .doc-tile-title { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.35; margin: 0; } .doc-tile-meta { font-size: 10.5px; color: var(--gray-600); margin: 0; } .doc-tile-desc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .doc-tile-link { margin-top: auto; align-self: flex-start; font-size: 11px; font-weight: 500; color: var(--red); border: 1px solid var(--red); border-radius: 999px; padding: 3px 10px; text-decoration: none; line-height: 1.4; } .doc-tile-link:hover { background: var(--red); color: #fff; } /* Two labelled groups of tiles (North Korea / human rights & global issues); the free-choice and class-divided tiles carry longer blurbs, so their descriptions are not clamped. */ .doc-group + .doc-group { margin-top: 18px; } .doc-group-label { font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: 0.02em; margin: 0 0 8px; } .doc-tile-desc-full { display: block; -webkit-line-clamp: unset; overflow: visible; } .doc-tile-note { font-size: 11px; font-weight: 600; color: var(--red-dark); line-height: 1.5; margin: 6px 0 0; } @media (max-width: 860px) { .sw-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .doc-tiles { grid-template-columns: 1fr; } } /* Column/essay class tabs (columnist page): guidance note above a pill switcher, one panel per class. Panels are toggled by script.js. */ .class-tab-note { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin: 0 0 14px; } /* Tabs mirror the header's student/volunteer role switch: a gray track holding two pills, with the active pill filled red. */ .class-tab-btns { display: inline-flex; background: var(--gray-100); border-radius: 999px; padding: 2px; gap: 1px; margin-bottom: 16px; } .class-tab-btn { font-size: 13px; font-weight: 700; color: var(--gray-600); padding: 7px 20px; border-radius: 999px; border: none; background: transparent; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease; } .class-tab-btn:hover { color: var(--red); } .class-tab-btn.is-active { background: var(--red); color: #fff; } .class-tab-btn.is-active:hover { color: #fff; } .class-tab-panel { display: none; } .class-tab-panel.is-shown { display: block; } .class-tab-panel .detail-fact-grid { margin-bottom: 16px; } /* Columnist curriculum as a real week/content table (shared by both classes). */ .curriculum-table-wrap { border: 1px solid var(--gray-300); border-radius: var(--radius-md); overflow: hidden; } .curriculum-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .curriculum-table th { background: var(--gray-100); text-align: left; font-weight: 500; color: var(--ink); font-size: 12.5px; padding: 9px 14px; } .curriculum-table td { padding: 9px 14px; border-top: 1px solid var(--gray-100); color: var(--ink-soft); line-height: 1.5; } .curriculum-table td.week { width: 84px; color: var(--red); font-weight: 500; font-size: 12.5px; white-space: nowrap; } .inline-link { color: var(--red); text-decoration: underline; text-underline-offset: 2px; } /* .detail-plain (columnist block): no standout icons or banner-style boxes — step numbers become plain gray digits, theme pills become plain labels, and the amber callout becomes an unboxed note. Scoped so the other activity blocks and the FAQ keep their originals. */ .detail-plain .steps-list .steps-num { background: none; color: var(--gray-600); width: auto; height: auto; font-size: 13.5px; font-weight: 500; transform: none; } .detail-plain .steps-list .steps-num::after { content: "."; } .detail-plain .faq-subhead-pill { background: none; padding: 0; border-radius: 0; color: var(--ink); font-size: 13px; } .detail-plain .faq-callout { background: none; border: none; padding: 0; color: var(--ink-soft); font-size: 13.5px; } .detail-plain .faq-callout::before { content: none; } .detail-plain .faq-callout strong { color: var(--ink); } .detail-plain .voice-avatar { display: none; } /* ---------- events ---------- */ .events-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .event-card { border-radius: var(--radius-lg); padding: 22px 20px; background: #fff; border: 1px solid var(--gray-300); position: relative; overflow: hidden; } .event-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--red); } .event-card .date { font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: 0.3px; } .event-card h4 { font-size: 16px; font-weight: 700; margin: 8px 0 8px; } .event-card .badge { font-size: 11px; font-weight: 500; color: var(--gray-600); background: var(--gray-100); padding: 3px 9px; border-radius: 999px; display: inline-block; margin-bottom: 8px; } .event-card p { font-size: 13px; color: var(--ink-soft); } /* ---------- benefits ---------- */ .benefits-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .benefit-card { text-align: center; padding: 24px 16px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--gray-300); } .benefit-card .icon { font-size: 26px; margin-bottom: 12px; } .benefit-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; } .benefit-card p { font-size: 12.5px; color: var(--ink-soft); } .benefits-list-simple { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .benefit-line { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--radius-md); background: var(--gray-100); font-size: 14.5px; font-weight: 500; } .benefit-line .icon { font-size: 20px; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--gray-300); padding: 40px 0 28px; background: var(--cream); } .footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-brand { display: flex; align-items: center; gap: 9px; } .footer-brand-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .footer-kakao { padding-left: 14px; border-left: 1px solid var(--gray-300); font-size: 12.5px; color: var(--footer-muted); line-height: 1.5; } .footer-actions { display: flex; gap: 10px; flex-wrap: wrap; } .footer-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--gray-300); background: #fff; font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; } .footer-action-btn:hover { border-color: var(--red); color: var(--red-dark); } .footer-meta { margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--gray-300); font-size: 12.5px; font-weight: 400; color: var(--footer-muted); line-height: 1.7; } /* ---------- section photo ---------- */ .stats-bar-secondary { margin-top: 28px; padding-top: 28px; } /* ---------- sub headings (within a section, above a sub-grid) ---------- */ .sub-head { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 18px; } .sub-head-spaced { margin-top: 40px; } .section-head-spaced { margin-top: 40px; } /* ---------- age distribution bar ---------- */ .age-block { margin-bottom: 44px; } .age-bar { display: flex; width: 100%; height: 14px; border-radius: 999px; overflow: hidden; background: var(--gray-100); } .age-seg { display: block; height: 100%; } .age-seg-1 { background: var(--red); } .age-seg-2 { background: #EF8A7C; } .age-seg-3 { background: var(--gray-300); } .age-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); } .age-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .age-legend i.age-seg-1 { background: var(--red); } .age-legend i.age-seg-2 { background: #EF8A7C; } .age-legend i.age-seg-3 { background: var(--gray-300); } /* ---------- motivation cards (participants section) ---------- */ .motivation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 8px; } .motivation-grid-4 { grid-template-columns: repeat(4, 1fr); } .motivation-card { background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 22px 20px; } .motivation-card .icon { font-size: 22px; margin-bottom: 10px; } .motivation-card h4 { font-size: 15px; font-weight: 600; margin-bottom: 8px; } .motivation-card p { font-size: 13.5px; color: var(--ink-soft); } /* ---------- semester guide: F&Q accordion ---------- */ .faq-acc { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 12px 16px; } .faq-acc-item { background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 0 22px; } .faq-acc-item summary { list-style: none; cursor: pointer; padding: 18px 0; font-size: 15px; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-acc-item summary::-webkit-details-marker { display: none; } .faq-acc-item summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 400; color: var(--gray-600); } .faq-acc-item[open] summary::after { content: "\2212"; } .faq-acc-item[open] summary { border-bottom: 1px solid var(--gray-300); } .faq-acc-item p { margin: 16px 0 20px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; } /* Structured multi-part answers (a policy with sub-cases, a step list, a caution note) — for the handful of FAQ items whose answer is more than one sentence. Sits alongside the plain `p`-only items above. */ .faq-answer { margin: 16px 0 20px; } .faq-answer p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; } .faq-answer p:last-child { margin-bottom: 0; } .faq-block { margin-bottom: 16px; } .faq-block:last-child { margin-bottom: 0; } .faq-subhead-pill { display: inline-block; background: var(--gray-100); color: var(--ink); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; } .faq-block p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; } .faq-block p:last-child { margin-bottom: 0; } .faq-block ul { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .faq-block ul:last-child { margin-bottom: 0; } .faq-block li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; } .faq-block li::before { content: "\2022"; position: absolute; left: 0; color: var(--gray-600); } .faq-block strong, .faq-answer strong { color: var(--ink); font-weight: 700; } .faq-answer .faq-no { color: var(--red); font-weight: 700; } /* Amber rather than the brand red or the gray .note-box — a caution aside distinct from both the accent color and a plain informational note. */ .faq-callout { /* block + inline ::before, NOT flex: in a flex box the mid-sentence becomes its own flex item and the sentence wraps in broken columns. */ display: block; margin-top: 10px; padding: 12px 14px; background: #FEF9E7; border: 1px solid #F0DFA0; border-radius: var(--radius-sm); font-size: 12.5px; color: #7A5C12; line-height: 1.55; } .faq-callout::before { content: "\24D8"; margin-right: 7px; font-weight: 700; color: #B4890F; } .faq-callout strong { color: #5C440D; font-weight: 700; } /* One level up from .faq-block — for an answer broad enough to have its own named sections (each with its own pills/lists inside), separated by a dashed rule rather than the tighter gap between pills in the same section. */ .faq-section + .faq-section { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--gray-300); } .faq-section-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 12px; } .faq-section-head::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } /* ---------- past-activities photo carousel ---------- */ /* Full-bleed: breaks out of .container to span edge-to-edge regardless of how deeply nested it is, while the section-head above it stays within the normal reading width. */ /* Full-bleed: breaks out of .container to span the page edge to edge. */ .gallery-carousel { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .carousel-viewport { position: relative; overflow: hidden; /* Height is derived so the active photo keeps its ~1.84:1 shape at the 46% slide width below (46vw / 1.84 / 0.92 slide-height ~= 27vw). The max stops an ultra-wide monitor from scaling this back up to ~700px tall. */ height: clamp(200px, 27vw, 460px); } .carousel-track { display: flex; align-items: center; height: 100%; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); touch-action: pan-y; will-change: transform; } /* The active slide is the main photo; the previous/next slides flank it as wide faded previews. 28% + 46% + 28% slightly overflows the full-bleed viewport, so the previews crop at the page edges — that keeps it reading as a carousel with more to come rather than a static three-up row. */ .carousel-slide { flex: 0 0 28%; margin: 0 10px; position: relative; height: 92%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-300); background: #fff; opacity: 0.4; filter: blur(1.5px) brightness(0.9); transition: opacity 0.5s ease, filter 0.5s ease; } /* flex-basis is not transitioned: animating a layout-affecting property would leave the JS centering math (which reads the post-transition layout synchronously) targeting a size the slide hasn't reached yet. */ .carousel-slide.is-active { flex-basis: 46%; opacity: 1; filter: none; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .carousel-slide:not(.is-active) figcaption { display: none; } .carousel-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px 14px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); color: #fff; font-size: 14.5px; font-weight: 600; } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--gray-300); color: var(--ink); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease; z-index: 2; } .carousel-arrow:hover { background: #fff; border-color: var(--red); transform: translateY(-50%) scale(1.06); } .carousel-arrow-prev { left: 28px; } .carousel-arrow-next { right: 28px; } .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .carousel-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--gray-300); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .carousel-dot.is-active { background: var(--red); transform: scale(1.3); } /* ---------- voices / testimonials ---------- */ .voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 8px; } .voice-card { background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; } .voice-head { display: flex; align-items: center; gap: 10px; } .voice-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--red-tint); color: var(--red-dark); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; } .voice-head strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); } .voice-meta { display: block; font-size: 12px; color: var(--gray-600); margin-top: 1px; } .voice-quote { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; flex: 1; } .voice-tag { align-self: flex-start; font-size: 11.5px; font-weight: 500; color: var(--gray-600); background: var(--gray-100); padding: 3px 10px; border-radius: 999px; } /* ---------- blog article cards (screenshot-like: photo + title + excerpt + author) ---------- */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .blog-card:hover { border-color: var(--gray-600); box-shadow: var(--shadow-pop); } .blog-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .blog-card-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 16px; } .blog-card h4 { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4; } .blog-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; flex: 1; } .blog-author { font-size: 12px; font-weight: 600; color: var(--red); margin-top: auto; } /* ---------- blog teaser (points to the standalone blog page) ---------- */ .blog-teaser { margin-top: 40px; padding: 26px 28px; border-radius: var(--radius-lg); background: var(--red-tint); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .blog-teaser-text { display: flex; align-items: center; gap: 14px; } .blog-teaser-icon { font-size: 28px; flex: none; } .blog-teaser p { font-size: 15px; font-weight: 700; color: var(--ink); } /* ---------- utility ---------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .about-grid, .curriculum-grid, .events-grid, .impact-cards, .motivation-grid, .motivation-grid-4, .voices-grid, .blog-grid, .activity-grid { grid-template-columns: repeat(2, 1fr); } .benefits-grid { grid-template-columns: repeat(3, 1fr); } .stats-bar { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; } .header-inner { display: flex; } .main-nav { display: none; } .nav-toggle { display: flex; } } @media (max-width: 720px) { /* Anchor-scroll fix (mobile): section padding shrinks to 32px below, so the scroll-margin-top offset must subtract 32px here instead of the desktop rule's 72px, or the landing heading overshoots/undershoots. #activities stays out of this list — its own ID padding rule keeps it at 40px here too, so it keeps the 40px offset it sets for itself. */ #about, #participants, #testimonials, #apply, #sg-activities, #sg-curriculum, #sg-guide, #sg-faq { scroll-margin-top: max(0px, calc(var(--sticky-offset, 120px) - 32px)); } .header-inner { padding: 10px 12px; gap: 8px; } .role-switch { gap: 1px; padding: 2px; } .role-btn { padding: 5px 7px; font-size: 10.5px; } .container { padding: 0 16px; } .btn { padding: 11px 22px; font-size: 13.5px; } .hero h1 { font-size: 24px; } .hero-text { max-width: 100%; } /* Face-safe photo hero: on a narrow screen the photo renders in full (no crop, no scrim) at the top of the hero, with the text below it on a pale-blush band (#FFE1DA, from the Canva brand spot palette) — so nobody's face is ever covered by the heading or dimmed by an overlay. Scoped to heroes that actually have a photo (.hero-bg); the plain cream page-heroes (timeline/benefits) are untouched. */ .hero { padding: 0 0 30px; background: #FFE1DA; } .hero .hero-bg, .page-hero .hero-bg { position: relative; inset: auto; } .hero .hero-bg img, .page-hero .hero-bg img { width: 100%; height: auto; object-fit: contain; object-position: center; } .hero-overlay { display: none; } .hero .container { margin-top: 22px; } .page-hero { padding: 32px 0 24px; } .page-hero:has(.hero-bg) { padding: 0 0 30px; background: #FFE1DA; } .page-hero:has(.hero-bg) .container { margin-top: 20px; } .page-hero:has(.hero-bg) h1 { margin-top: 0; } .page-hero h1 { font-size: 22px; } section { padding: 32px 0; } .section-head { margin-bottom: 24px; } .sh-row { gap: 10px; } .sh-icon { width: 36px; height: 36px; font-size: 15px; } .sh-sub { font-size: 12.5px; } .section-head h2 { font-size: 20px; } .section-head p { font-size: 14px; margin-top: 8px; } .kicker { font-size: 11.5px; } .about-grid, .curriculum-grid, .events-grid, .benefits-grid, .impact-cards, .benefits-list-simple, .grid-2, .motivation-grid, .motivation-grid-4, .voices-grid, .blog-grid, .faq-acc { grid-template-columns: 1fr; } .about-grid, .motivation-grid, .motivation-grid-4, .voices-grid, .blog-grid, .activity-grid, .benefits-grid, .impact-cards { gap: 12px; } .about-card { padding: 18px 16px; } .impact-card { padding: 22px 20px 20px; } .impact-hero-stat strong { font-size: 44px; } .motivation-card { padding: 16px 14px; } .voice-card { padding: 16px 14px; gap: 8px; } .blog-card-body { padding: 12px; gap: 6px; } /* Mobile keeps the active photo dominant (66%) rather than the desktop 46%, so height is re-derived for that width: 66vw / 1.84 / 0.92 ~= 39vw. */ .carousel-viewport { height: clamp(150px, 39vw, 260px); } .carousel-slide { flex-basis: 22%; margin: 0 6px; } .carousel-slide.is-active { flex-basis: 66%; } .carousel-arrow { width: 34px; height: 34px; font-size: 18px; } .carousel-arrow-prev { left: 8px; } .carousel-arrow-next { right: 8px; } .carousel-slide figcaption { font-size: 13px; padding: 12px 14px 10px; } .ac-card { padding: 20px 14px 14px; } /* Stack icon over a centered title so a two-line title (e.g. the speech contest card) centers like the one-line cards instead of filling the row and reading as left-aligned. */ .ac-head { flex-direction: column; gap: 8px; margin-bottom: 8px; padding: 0 10px; } .ac-head-text { text-align: center; } .ac-icon { width: 30px; height: 30px; font-size: 13px; } .ac-title { font-size: 15px; } .ac-status { font-size: 8.5px; padding: 2px 7px; } .ac-date { font-size: 11.5px; margin-bottom: 8px; } .benefit-card { padding: 16px 12px; } .benefit-card .icon { font-size: 22px; margin-bottom: 8px; } .stat-count .num { font-size: 22px; } .stats-bar { margin-top: 28px; padding-top: 24px; } .blog-teaser { padding: 18px 16px; margin-top: 28px; } .blog-teaser-icon { font-size: 22px; } .stats-bar { grid-template-columns: repeat(2, 1fr); } .stats-bar-split { gap: 20px; } .stats-divider { display: none; } .stats-group { width: 100%; } /* Keeps the same 4-in-a-row layout at mobile width — just tighter, with a smaller label */ .stats-bar-secondary .stats-group { gap: 6px; } .stats-bar-secondary .stat { padding: 4px 2px; } .stats-bar-secondary .stat .label { font-size: 11px; line-height: 1.25; } .stats-bar-secondary .stat-count .num { font-size: 18px; } .stats-bar-secondary .stat-count .count-icon { font-size: 22px; margin-bottom: 6px; } /* About section's donut-ring stats (만족도/향상/재참여율/자신감): keep all 4 on one line */ .stats-bar-split:not(.stats-bar-secondary) .stats-group { flex-wrap: nowrap; gap: 4px; } .stats-bar-split:not(.stats-bar-secondary) .stats-group .stat { flex: 1 1 0; min-width: 0; padding: 0 2px; } .stats-bar-split:not(.stats-bar-secondary) .stat-ring .ring { width: 54px; height: 54px; margin: 0 auto 8px; } .stats-bar-split:not(.stats-bar-secondary) .stat-ring .ring::before { inset: 6px; } .stats-bar-split:not(.stats-bar-secondary) .stat-ring .ring-num { font-size: 11.5px; } .stats-bar-split:not(.stats-bar-secondary) .stats-group .label { font-size: 10px; margin-top: 4px; line-height: 1.3; } .timeline-row { grid-template-columns: 1fr; } .spec-row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; } /* Number moves to a left column spanning label + wording; the textbook row stacks with the covers wrapping underneath. */ .spec-line { grid-template-columns: 96px 1fr; gap: 2px 12px; padding: 12px 14px; } .spec-line .spec-big { grid-row: 1 / 3; align-self: center; font-size: 21px; white-space: nowrap; } .spec-line .spec-key, .spec-line .spec-body { grid-column: 2; } .spec-line-book { grid-template-columns: 1fr; } .spec-line-book .spec-key, .spec-line-book .spec-body, .spec-line-book .textbook-covers { grid-column: 1; } .spec-line-book .textbook-covers { margin-top: 6px; flex-wrap: wrap; } .spec-line-book .textbook-covers img { width: 38px; } .activity-grid { grid-template-columns: 1fr; } .intro-banner { padding: 28px 22px; } .footer-inner { flex-direction: column; } .footer-brand-group { flex-direction: column; align-items: flex-start; gap: 8px; } .footer-kakao { padding-left: 0; border-left: none; } .age-legend { gap: 12px; } /* Thinner still on mobile — the sticky sub-nav sits on screen the whole time you scroll the page, so every extra pixel of its height eats into content the visitor actually came to read. */ .subnav { padding: 5px 0; } /* Sized so all 4 tabs fit within the viewport with zero horizontal overflow, even in the longer English/volunteer labels ("Participants", "Testimonials") — otherwise the last tab gets sliced off at the edge of the sticky bar with no visual hint that it's scrollable. Measured against a 375px viewport; .subnav-inner's overflow-x:auto stays on as a fallback for larger text-zoom settings. */ .subnav .subnav-inner { padding: 2px; gap: 1px; } .subnav-link { padding: 4px 8px; font-size: 11.5px; } .floating-apply-btn { right: 14px; bottom: 14px; padding: 11px 18px; font-size: 12.5px; } } @media (max-width: 380px) { .role-btn { padding: 4px 5px; font-size: 9.5px; } .brand-word { font-size: 24px; line-height: 24px; } .brand-mark, .brand-divider { height: 24px; } .brand-mark { width: 24px; } } /* ---------- columnist theme cards (numbered card + example inset + tip strip) ---------- */ .theme-card { background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 22px 22px 18px; margin-bottom: 14px; } .theme-card-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 11px; } .theme-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .theme-card-head h3 { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--ink); } .theme-kicker { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--red); margin-bottom: 2px; } .theme-desc { margin: 0 0 13px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; } .theme-example { background: var(--gray-100); border-radius: var(--radius-md); padding: 13px 15px; margin-bottom: 11px; } .theme-example:last-child { margin-bottom: 0; } .theme-example-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .theme-example p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.65; } .theme-example ul { display: flex; flex-direction: column; gap: 6px; } .theme-example li { position: relative; padding-left: 13px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; } .theme-example li::before { content: "\2022"; position: absolute; left: 0; color: var(--gray-600); } .theme-tip { display: flex; gap: 8px; align-items: baseline; background: #FEF9E7; border: 1px solid #F0DFA0; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 12.5px; color: #7A5C12; line-height: 1.6; } .theme-tip .tip-badge { flex: none; font-size: 10.5px; font-weight: 800; color: #B4890F; letter-spacing: 0.05em; } .theme-tip .inline-link { color: #7A5C12; } /* ---------- columnist page: section dividers + emphasized lists ---------- */ /* Thin rules between the page's sections, per the approved proposal mock. */ .activity-detail-block[data-activity="act-column"] .activity-detail-extra { border-top: 1px solid var(--gray-300); padding-top: 26px; margin-top: 26px; margin-bottom: 26px; } .faq-answer ul { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; } .faq-answer ul:last-child { margin-bottom: 0; } .faq-answer li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; } .faq-answer li::before { content: "\2022"; position: absolute; left: 0; color: var(--gray-600); } /* Priority-selection note as an indented left-rule quote instead of a box. */ .activity-detail-block[data-activity="act-column"] .faq-callout { background: none; border: none; border-left: 3px solid var(--gray-300); border-radius: 0; padding: 2px 0 2px 14px; font-size: 13px; color: var(--ink-soft); } .activity-detail-block[data-activity="act-column"] .faq-callout::before { content: none; } .activity-detail-block[data-activity="act-column"] .faq-callout strong { color: var(--ink); } /* Step numbers in brand red with bold lead phrases. */ .activity-detail-block[data-activity="act-column"] .steps-list .steps-num { color: var(--red); font-weight: 700; } .activity-detail-block[data-activity="act-column"] .steps-list strong { color: var(--ink); font-weight: 700; } /* ---------- line-duotone SVG icon set (replaces every emoji on the site) ---------- Ink 1.5px strokes; each icon's accent element picks up --ic-accent (brand red) as a stroke only — no fills, no backgrounds. Sizes follow the container's font-size (1em) so the old emoji sizing rules keep working. */ .ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ic { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; --ic-accent: var(--red); --ic-accent-fill: none; } .icon .ic, .count-icon .ic, .activity-detail-icon .ic, .activity-detail-option-icon .ic, .ap-icon .ic { vertical-align: 0; } .ac-icon .ic { width: 18px; height: 18px; } .floating-apply-btn .ic { stroke: #fff; --ic-accent: #fff; } .footer-kakao .ic, .blog-author .ic, .eyebrow .ic, .sub-head .ic { margin-right: 3px; } /* Containers stay, backgrounds go — the line-duotone icons sit directly on the card. */ .ac-icon, .ac-cat-online .ac-icon, .ac-cat-mixed .ac-icon { background: none; } .ac-icon .ic { width: 20px; height: 20px; } .activity-detail-icon { background: none; } .activity-detail-icon .ic { width: 30px; height: 30px; } /* ---------- columnist curriculum: phase cards ---------- The week-by-week table regrouped into three phase cards (준비 → 초안 → 완성) with the December wrap-up on its own line beneath; session type moves out of the text into a small tag so shared sessions stand out from solo weeks. (.curriculum-table above stays — the Game Day schedule still uses it.) */ .curr-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .curr-phase { background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 14px 14px 12px; } .curr-phase-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--gray-100); } .curr-phase-step { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--red); } .curr-phase-title { font-size: 14px; font-weight: 700; color: var(--ink); } .curr-phase-range { margin-left: auto; font-size: 11px; color: var(--gray-600); white-space: nowrap; } .curr-item { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: start; margin-bottom: 9px; font-size: 12.5px; line-height: 1.5; } .curr-item:last-child { margin-bottom: 0; } .curr-week { font-size: 12px; font-weight: 700; color: var(--red); padding-top: 1px; white-space: nowrap; } .curr-body b { display: block; font-weight: 600; color: var(--ink); } .curr-tag { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .curr-tag-on { background: var(--red-tint); color: var(--red-dark); } .curr-tag-self { background: var(--gray-100); color: var(--ink-soft); } .curr-tag-off { background: var(--ink); color: #fff; } .curr-final { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px dashed var(--gray-300); border-radius: var(--radius-md); font-size: 13px; color: var(--ink-soft); } .curr-final .curr-tag { margin-top: 0; } .curr-final .curr-week { color: var(--ink); } @media (max-width: 640px) { .curr-phases { grid-template-columns: 1fr; } } /* ---------- section title accent: short red overline ---------- A 28px brand-red bar above every section heading — the one decoration the section head carries now that the emoji icon rings are gone. Sits above the kicker too, where a section has one. */ .section-head::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--red); margin-bottom: 14px; } /* ---------- hero: split layout (text panel · photo) ---------- 학기 안내 hero — kicker, title and a two-line fact list on a cream panel, photo on the right with no text over it. On phones the photo becomes a 190px band above the text, fading into the panel. */ .hero-split { padding: 0; background: var(--cream); border-bottom: 1px solid var(--gray-300); } .hero-split .container { max-width: none; padding: 0; display: grid; grid-template-columns: 11fr 9fr; align-items: stretch; } .hero-split .hero-text { max-width: none; gap: 14px; align-content: center; padding: 72px 40px 64px max(24px, calc((100vw - var(--maxw)) / 2 + 24px)); } .hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); } .hero-kicker::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--red); } .hero-split h1 { font-size: clamp(28px, 3.4vw, 40px); max-width: 560px; } .hero-facts { display: grid; gap: 7px; padding-left: 14px; border-left: 3px solid var(--gray-300); font-size: 14.5px; color: var(--ink-soft); } .hero-facts b { color: var(--ink); font-weight: 700; margin-right: 6px; } .hero-split .hero-actions { margin-top: 4px; } .hero-photo { position: relative; min-height: 420px; } .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cream) 0%, rgba(253, 251, 250, 0) 26%); } @media (max-width: 720px) { .hero-split .container { grid-template-columns: 1fr; } .hero-photo { order: -1; min-height: 0; height: 190px; } .hero-photo::after { background: linear-gradient(180deg, rgba(253, 251, 250, 0) 55%, var(--cream) 100%); } .hero-split .hero-text { padding: 6px 20px 26px; gap: 12px; } .hero-split h1 { font-size: 26px; } .hero-facts { font-size: 13px; } .hero-split .hero-actions .btn { flex: 1 1 140px; } } /* Secondary hero action as a text link: bold label + red arrow, no border — the red button stays the only "button" in the header. */ .hero-link { display: inline-flex; align-items: center; gap: 6px; padding: 13px 6px; font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; } .hero-link i { font-style: normal; color: var(--red); transition: transform 0.15s ease; } .hero-link:hover { text-decoration: underline; text-underline-offset: 4px; } .hero-link:hover i { transform: translateX(3px); } /* ---------- floating apply button: neon glow pulse ---------- The red halo breathes on a 2.4s cycle so the fixed sign-up button reads like a lit sign (chosen from the neon mockups); off for users who asked for reduced motion. */ .floating-apply-btn { animation: fab-glow 2.4s ease-in-out infinite; } @keyframes fab-glow { 0%, 100% { box-shadow: 0 8px 20px rgba(221, 57, 40, 0.35), 0 0 0 0 rgba(221, 57, 40, 0.45); } 50% { box-shadow: 0 10px 30px rgba(221, 57, 40, 0.55), 0 0 0 10px rgba(221, 57, 40, 0); } } @media (prefers-reduced-motion: reduce) { .floating-apply-btn { animation: none; } } /* ---------- "모집 중" badge: breathing live dot ---------- A small white dot before the label eases in and out every 1.6s — an on-air style "open now" signal. CSS-only via ::before, so the script that flips a card to .ac-status-open when its Google Form goes live needs no change. Stops under the OS reduced-motion setting. */ .ac-status-open { display: inline-flex; align-items: center; gap: 5px; } .ac-status-open::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; flex: none; animation: ac-live 1.6s ease-in-out infinite; } @keyframes ac-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } @media (prefers-reduced-motion: reduce) { .ac-status-open::before { animation: none; } } /* ---------- sub-nav: floating pill bar ---------- The white band and rule under the section menu are gone; the pill track floats over the top of the hero (photo/cream shows right under the header) and keeps floating as it sticks on scroll. The negative bottom margin removes the band's height from the flow so the hero starts flush under the header; the nav itself keeps its height for the sticky offset math. */ .subnav { background: transparent; border-bottom: none; padding: 10px 0 0; margin-bottom: calc(-1 * (10px + 37px)); pointer-events: none; } .subnav .subnav-inner { pointer-events: auto; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--gray-300); box-shadow: 0 6px 18px rgba(40, 30, 20, 0.12); } .hero-split .hero-text { padding-top: 96px; } @media (max-width: 720px) { .subnav { padding: 8px 0 0; margin-bottom: calc(-1 * (8px + 37px)); } .hero-split .hero-text { padding-top: 18px; } } /* ---------- impact hero: red overline + stat band under the photo ---------- Keeps the full-bleed group photo; adds the section-title overline above the heading and a translucent band of the three headline figures along the bottom edge (option 3 of the hero mockups). On phones the photo already sits above the text, so the band simply closes the hero. */ /* Taller photo, a thinner veil, and a narrower heading so the faces on the right stay clear; the stat band sits below the photo instead of over it. */ .page-hero.hero-impact { padding: 0; } .hero-impact .hero-overlay { background: linear-gradient(100deg, var(--cream) 0%, rgba(253, 251, 250, 0.9) 24%, rgba(253, 251, 250, 0.45) 44%, rgba(253, 251, 250, 0) 62%); } .hero-impact h1 { max-width: 560px; font-size: clamp(26px, 3.2vw, 36px); } .hero-impact .lede { max-width: 520px; } .hero-over { display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--red); margin-bottom: 2px; } /* ---------- impact hero: photo band above the text ---------- The group photo is shown whole, full-width and uncovered; the title and lede sit below it on the cream ground instead of over the picture. */ .page-hero-stacked { padding: 0; } .page-hero-stacked .hero-bg { position: relative; inset: auto; height: clamp(320px, 44vw, 560px); } .page-hero-stacked .hero-bg img { object-position: center 42%; } .page-hero-stacked .hero-overlay { display: none; } .page-hero-stacked .container { padding-top: 22px; padding-bottom: 24px; } .page-hero-stacked h1 { margin-top: 0; } @media (max-width: 720px) { /* Phones show the whole frame at its natural ratio — nobody is cropped out. */ .page-hero-stacked .hero-bg { height: auto; } .page-hero-stacked .hero-bg img { height: auto; object-fit: fill; } .page-hero-stacked .container { padding-top: 14px; padding-bottom: 18px; } .page-hero.page-hero-stacked .container { margin-top: 0; } .page-hero.page-hero-stacked { padding: 0; } } /* impact hero, phones: white rounded card rising over the photo edge (approved mock) */ @media (max-width: 720px) { .page-hero.page-hero-stacked { padding: 0; background: var(--cream); } .page-hero.page-hero-stacked .hero-bg { height: auto; } .page-hero.page-hero-stacked .hero-bg img { height: auto; object-fit: fill; } .page-hero.page-hero-stacked .container { position: relative; margin-top: -18px; background: #fff; border-radius: 22px 22px 0 0; padding: 22px 18px 20px; } .page-hero.page-hero-stacked h1 { font-size: 20px; line-height: 1.3; margin-top: 0; } .page-hero.page-hero-stacked .lede { font-size: 12.5px; margin-top: 8px; } }