(see sample-event.html) for pages that have a real photo to show. Shorter and less dramatic than the homepage's full-bleed .hero — this is a banner, not the primary first impression. Text switches to light-on-dark. */ .page-hero--photo { position: relative; min-height: 420px; display: flex; align-items: flex-end; padding: 76px var(--pad-x) var(--space-xl); overflow: hidden; background: var(--charcoal); /* shows briefly if the image 404s/loads slowly */ } .page-hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .page-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); } .page-hero--photo .inner { position: relative; z-index: 1; } .page-hero--photo .page-hero-eyebrow { color: rgba(250,248,242,0.72); } .page-hero--photo .page-hero-h1 { color: var(--rice-paper); } .page-hero--photo .page-hero-lede { color: rgba(250,248,242,0.85); opacity: 1; } .page-hero--photo .page-hero-lede a { color: var(--rice-paper); text-decoration: underline; text-underline-offset: 2px; } /* ═══════════════════════════════════════════════════ NOTICE SECTION Thin wrapper around .schedule-closure-notice so the same alert component can be reused outside the schedule section (e.g. Visit Us). Padding is symmetric top/bottom (not the previous 0 bottom) so the boxed notice gets breathing room before whatever section follows — on Events, .section-notice (rice-paper) sits directly above .section-seminars (tatami), and the zero bottom padding made the notice box look like it was pasted right at the color seam between the two sections instead of sitting inside its own section with a proper margin. ═══════════════════════════════════════════════════ */ .section-notice { background: var(--rice-paper); padding: var(--space-md) var(--pad-x); } .section-notice .inner { max-width: var(--max-w); margin: 0 auto; } /* ═══════════════════════════════════════════════════ LOCATION SECTION ═══════════════════════════════════════════════════ */ .section-location { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x); } .section-location .inner { max-width: var(--max-w); margin: 0 auto; } .location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 8px; } .location-address { font-family: Inter, sans-serif; font-size: 15.5px; font-weight: 500; color: var(--charcoal); line-height: 1.6; letter-spacing: 0.01em; margin-bottom: 28px; } .location-directions { display: inline-flex; align-items: center; font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: var(--green); text-decoration: none; letter-spacing: 0.04em; border-bottom: 1px solid var(--green); padding-bottom: 2px; transition: opacity 0.18s; } .location-directions:hover { opacity: 0.65; } .location-map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--stone); background: var(--stone); } .location-map iframe { display: block; width: 100%; height: 340px; border: 0; } .location-map figcaption { font-family: Inter, sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal); opacity: 0.6; padding: 14px 18px; background: var(--rice-paper); border-top: 1px solid var(--stone); } /* ═══════════════════════════════════════════════════ FIRST CLASS SECTION ═══════════════════════════════════════════════════ */ .section-first-class { background: var(--tatami); padding: var(--space-2xl) var(--pad-x); } .section-first-class .inner { max-width: 780px; margin: 0 auto; } .first-class-quote { margin: 40px 0; background: rgba(250,248,242,0.55); padding: 28px 32px; border-radius: var(--radius-md); } /* ═══════════════════════════════════════════════════ SCHEDULE FOOTNOTE (Events page) ═══════════════════════════════════════════════════ */ .schedule-footnote { margin-top: 32px; margin-bottom: 0; } .schedule-footnote a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; } /* ═══════════════════════════════════════════════════ SEMINARS & GRADINGS SECTION (Events page) ═══════════════════════════════════════════════════ */ .section-seminars { background: var(--tatami); padding: var(--space-2xl) var(--pad-x); } .section-seminars .inner { max-width: 780px; margin: 0 auto; } /* ═══════════════════════════════════════════════════ PAST EVENTS SECTION (Events page) Curated migrated-history highlights — rice-paper background to alternate with Seminars & Gradings' tatami above it. Reuses the same .seminars-list / .event-card grid as Seminars & Gradings (rendered by script/past-events.js from data/past-events.js). ═══════════════════════════════════════════════════ */ .section-past-events { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x); } .section-past-events .inner { max-width: 780px; margin: 0 auto; } /* ═══════════════════════════════════════════════════ EVENT CARDS (Events page — Seminars & Gradings) Rendered by script/seminars.js from data/seminars.js. See COMPONENTS.md → Cards → Event Card. ═══════════════════════════════════════════════════ */ .seminars-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: 40px 0; } .event-card { background: var(--rice-paper); border: 1px solid var(--stone); border-radius: var(--radius-lg); padding: 30px 26px; transition: border-color 0.2s; } .event-card:hover { border-color: var(--bamboo); } .event-card-date { font-family: Inter, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bamboo); margin-bottom: 12px; line-height: 1; } .event-card-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 24px; color: var(--charcoal); line-height: 1.2; margin-bottom: 8px; } .event-card-meta { font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: 0.03em; color: var(--green); margin-bottom: 14px; line-height: 1.5; } .event-card-desc { font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; color: var(--charcoal); opacity: 0.8; line-height: 1.65; margin-bottom: 16px; } .event-card-link { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: var(--green); text-decoration: none; letter-spacing: 0.02em; border-bottom: 1px solid var(--green); padding-bottom: 2px; transition: opacity 0.18s; } .event-card-link:hover { opacity: 0.65; } /* ═══════════════════════════════════════════════════ EVENT FLYER Full flyer/poster image for an event detail page. See COMPONENTS.md → Event Flyer. ═══════════════════════════════════════════════════ */ .section-flyer { background: var(--tatami); padding: var(--space-2xl) var(--pad-x); } .section-flyer .inner { max-width: 780px; margin: 0 auto; } .event-flyer { max-width: 380px; margin: 40px auto 0; border: 1px solid var(--stone); border-radius: var(--radius-lg); overflow: hidden; background: var(--rice-paper); } .event-flyer img { display: block; width: 100%; height: auto; } .event-flyer figcaption { font-family: Inter, sans-serif; font-size: 12px; font-weight: 400; color: var(--charcoal); opacity: 0.65; line-height: 1.5; padding: 16px 20px; border-top: 1px solid var(--stone); text-align: center; } /* ═══════════════════════════════════════════════════ ABOUT PAGE SECTION WRAPPERS Content typography reuses .philosophy-h2 / .philosophy-body throughout — only background/padding/width differ per section. ═══════════════════════════════════════════════════ */ .section-story { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x); } .section-story .inner { max-width: 780px; margin: 0 auto; } .section-instructors { background: var(--tatami); padding: var(--space-2xl) var(--pad-x); } .section-instructors .inner { max-width: var(--max-w); margin: 0 auto; } .section-instructors .philosophy-body { max-width: 720px; } .section-lineage { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x); } .section-lineage .inner { max-width: 780px; margin: 0 auto; } .section-affiliation { background: var(--tatami); padding: var(--space-2xl) var(--pad-x); } .section-affiliation .inner { max-width: 780px; margin: 0 auto; } /* Start Here page */ .section-what-is-aikido { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x); } .section-what-is-aikido .inner { max-width: 780px; margin: 0 auto; } .section-what-to-expect { background: var(--tatami); padding: var(--space-2xl) var(--pad-x); } .section-what-to-expect .inner { max-width: 780px; margin: 0 auto; } .section-faq { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x); } .section-faq .inner { max-width: 780px; margin: 0 auto; } /* FAQ accordion — native

, no JS needed */ .faq-list { margin: 0 0 8px; } .faq-item { border-bottom: 1px solid var(--stone); padding: 18px 0; } .faq-item:first-child { border-top: 1px solid var(--stone); } .faq-item summary { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(18px, 2vw, 21px); color: var(--charcoal); cursor: pointer; list-style: none; position: relative; padding-right: 32px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 0; top: 0; font-family: Inter, sans-serif; font-size: 22px; color: var(--green); } .faq-item[open] summary::after { content: '\2212'; } .faq-item .philosophy-body { margin-top: 14px; } /* Events page — Community Traditions */ .section-traditions { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x); } .section-traditions .inner { max-width: 780px; margin: 0 auto; } .traditions-photo { margin: 32px 0 40px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--stone); background: var(--tatami); } .traditions-photo img { display: block; width: 100%; /* Fixed min/max banner height that scales fluidly with viewport width in between — same crop proportions on mobile, tablet, and desktop, rather than the tall/squashed heights a plain width:100%/height:auto photo produces at different container widths. object-position pushes the visible crop down toward the group, away from the blank ceiling space at the top of the original photo. */ height: clamp(220px, 32vw, 420px); object-fit: cover; object-position: center 62%; } .traditions-photo figcaption { font-family: Inter, sans-serif; font-size: 12px; font-weight: 400; color: var(--charcoal); opacity: 0.65; line-height: 1.5; padding: 14px 20px; border-top: 1px solid var(--stone); text-align: center; } /* ═══════════════════════════════════════════════════ INSTRUCTOR CARDS Built for About's full 6-instructor "Our Instructors" grid; reused as-is on the homepage's curated 3-card introduction. See COMPONENTS.md → Cards → Instructor Card. ═══════════════════════════════════════════════════ */ .instructors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 36px; margin-top: 8px; } .instructor-card-portrait { width: 100%; aspect-ratio: 4 / 5; background: var(--stone); border-radius: var(--radius-lg); overflow: hidden; position: relative; margin-bottom: 20px; } .instructor-card-portrait img { width: 100%; height: 100%; object-fit: cover; } .instructor-card-portrait-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: monospace; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(46,46,46,0.35); line-height: 1.9; text-align: center; padding: 12px; } .instructor-card-name { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 24px; color: var(--charcoal); line-height: 1.15; margin-bottom: 6px; } .instructor-card-rank { font-family: Inter, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; line-height: 1.4; } .instructor-card-bio { font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; color: var(--charcoal); opacity: 0.82; line-height: 1.65; } .instructor-card-quote { margin-top: 16px; border-left: 2px solid var(--green); padding: 2px 0 2px 16px; } .instructor-card-quote p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 16.5px; color: var(--charcoal); line-height: 1.5; } /* ═══════════════════════════════════════════════════ CONTACT SECTION ═══════════════════════════════════════════════════ */ .section-contact { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x); } .section-contact .inner { max-width: var(--max-w); margin: 0 auto; display: flex; gap: 88px; align-items: flex-start; } .contact-intro { flex: 1; min-width: 0; max-width: 420px; } .contact-channels { list-style: none; margin-top: 40px; } .contact-channels li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--stone); } .contact-channels li:last-child { border-bottom: 1px solid var(--stone); } .contact-channel-label { font-family: Inter, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bamboo); } .contact-channels a, .contact-channels span:not(.contact-channel-label) { font-family: Inter, sans-serif; font-size: 14.5px; font-weight: 400; color: var(--charcoal); line-height: 1.5; } .contact-channels a { text-decoration: none; } .contact-channels a:hover { color: var(--green); } .contact-form { flex: 1; min-width: 0; max-width: 480px; display: flex; flex-direction: column; gap: 24px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-label { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: var(--charcoal); } .form-optional { font-weight: 400; opacity: 0.55; } .form-input { font-family: Inter, sans-serif; font-size: 15px; color: var(--charcoal); background: var(--rice-paper); border: 1px solid var(--stone); border-radius: var(--radius-md); padding: 13px 16px; line-height: 1.4; transition: border-color 0.18s; min-height: 44px; } .form-input:focus { outline: 2px solid var(--bamboo); outline-offset: 1px; border-color: var(--bamboo); } .form-input[aria-invalid="true"] { border-color: #b3413a; } .form-textarea { resize: vertical; min-height: 120px; } .form-error { font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 400; color: #b3413a; } .form-submit { align-self: flex-start; border: none; margin-top: 4px; min-height: 44px; } .form-note { font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 400; color: var(--charcoal); opacity: 0.62; line-height: 1.6; border-top: 1px solid var(--stone); padding-top: 18px; } .form-note a { color: var(--green); } .form-note--flash { opacity: 1; color: var(--green); } /* ═══════════════════════════════════════════════════ ARTICLES — index page (articles.html) Card grid linking out to individual essay pages under src/articles/. See COMPONENTS.md → Cards → Article Card. ═══════════════════════════════════════════════════ */ .section-articles-intro { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x) var(--space-lg); } .section-articles-intro .inner { max-width: 780px; margin: 0 auto; } .section-articles-index { background: var(--rice-paper); padding: 0 var(--pad-x) var(--space-2xl); } .section-articles-index .inner { max-width: var(--max-w); margin: 0 auto; } .articles-cluster { margin-top: 12px; } .articles-cluster + .articles-cluster { margin-top: 64px; } .articles-cluster-label { font-family: Inter, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bamboo); margin-bottom: 20px; } .articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .article-card { background: var(--tatami); border-radius: var(--radius-lg); padding: 30px 26px; transition: background 0.2s; } .article-card:hover { background: var(--stone); } .article-card-source { font-family: Inter, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; line-height: 1; } .article-card-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 23px; color: var(--charcoal); line-height: 1.25; margin-bottom: 10px; } .article-card-teaser { font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; color: var(--charcoal); opacity: 0.8; line-height: 1.65; margin-bottom: 16px; } .article-card-link { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: var(--green); text-decoration: none; letter-spacing: 0.02em; border-bottom: 1px solid var(--green); padding-bottom: 2px; transition: opacity 0.18s; } .article-card-link:hover { opacity: 0.65; } /* ═══════════════════════════════════════════════════ ARTICLE (individual essay page, src/articles/*.html) ═══════════════════════════════════════════════════ */ .section-article { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x); } .section-article .inner { max-width: 720px; margin: 0 auto; } .section-article ol, .section-article ul { margin: 0 0 26px; padding-left: 22px; } .section-article li { font-family: Inter, sans-serif; font-size: 17px; font-weight: 400; color: var(--charcoal); line-height: 1.74; margin-bottom: 12px; } .section-article li:last-child { margin-bottom: 0; } .article-subhead { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); color: var(--charcoal); line-height: 1.3; margin: 44px 0 18px; } /* Inline photo within a migrated article's body — distinct from .page-hero--photo (banner) and .traditions-photo (fixed-crop featured photo): this one keeps the image's natural aspect ratio, since it's a supporting photo inside the reading flow, not a cropped banner. */ .article-photo { margin: 8px 0 34px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--stone); background: var(--tatami); } .article-photo img { display: block; width: 100%; height: auto; } .article-photo figcaption { font-family: Inter, sans-serif; font-size: 12px; font-weight: 400; color: var(--charcoal); opacity: 0.65; line-height: 1.5; padding: 14px 20px; border-top: 1px solid var(--stone); text-align: center; } /* Modifier for near-square/portrait photos (e.g. a headshot) that look better centered and constrained, rather than stretched full-width. */ .article-photo--narrow { max-width: 360px; margin-left: auto; margin-right: auto; } /* ═══════════════════════════════════════════════════ VIDEO EMBED Responsive 16:9 YouTube/video wrapper — replaces the legacy site's fixed 560×315 iframes, which didn't resize on mobile. Reusable for any future migrated article or event with embedded video. See COMPONENTS.md → Video Embed. ═══════════════════════════════════════════════════ */ .video-embed { position: relative; padding-top: 56.25%; /* 16:9 */ margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; background: var(--charcoal); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .article-back-link { display: inline-block; margin-top: 8px; font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: var(--green); text-decoration: none; letter-spacing: 0.02em; border-bottom: 1px solid var(--green); padding-bottom: 2px; transition: opacity 0.18s; } .article-back-link:hover { opacity: 0.65; } /* ═══════════════════════════════════════════════════ CONTENT LIST Two-column "Browse All" list — used on articles-list.html and events-list.html once there are enough entries that a scannable table reads faster than scrolling a card grid. Each row is a single clickable link (not just a small "read more"), since a title+date list with dozens of rows benefits from a large hit target. See COMPONENTS.md → Content List. ═══════════════════════════════════════════════════ */ .section-content-list { background: var(--rice-paper); padding: var(--space-2xl) var(--pad-x); } .section-content-list .inner { max-width: var(--max-w); margin: 0 auto; } .content-list { border-top: 1px solid var(--stone); margin-top: 8px; } .content-list-row { display: flex; gap: 40px; padding: 26px 0; border-bottom: 1px solid var(--stone); text-decoration: none; transition: opacity 0.18s; } .content-list-row:hover { opacity: 0.7; } .content-list-meta { flex: 0 0 260px; } .content-list-title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 20px; color: var(--charcoal); line-height: 1.3; margin-bottom: 8px; } .content-list-date { font-family: Inter, sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bamboo); } .content-list-desc { flex: 1; min-width: 0; font-family: Inter, sans-serif; font-size: 14.5px; font-weight: 400; color: var(--charcoal); opacity: 0.8; line-height: 1.65; } /* Pagination — Prev/Next controls under a paginated Content List. Rendered by script/pagination.js; see COMPONENTS.md → Content List. */ .pagination { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: var(--space-md); } .pagination-btn { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: var(--green); text-decoration: none; letter-spacing: 0.02em; border-bottom: 1px solid var(--green); padding-bottom: 2px; transition: opacity 0.18s; } .pagination-btn:hover { opacity: 0.65; } .pagination-btn[aria-disabled="true"] { color: var(--stone); border-bottom-color: var(--stone); pointer-events: none; } .pagination-status { font-family: Inter, sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bamboo); } /* ═══════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════ */ @media (max-width: 900px) { .location-grid { grid-template-columns: 1fr; gap: 40px; } .section-contact .inner { flex-direction: column; gap: 56px; } .contact-intro, .contact-form { max-width: none; } } @media (max-width: 640px) { .schedule-grid { grid-template-columns: 1fr; } .footer-top { flex-direction: column; gap: 40px; } .page-hero { padding: calc(76px + var(--space-lg)) var(--pad-x) var(--space-lg); } .page-hero--photo { min-height: 320px; padding: 76px var(--pad-x) var(--space-lg); } .section-first-class, .section-location, .section-contact, .section-seminars, .section-flyer, .section-traditions, .section-story, .section-instructors, .section-lineage, .section-affiliation, .section-article, .section-past-events { padding: var(--space-xl) var(--pad-x); } .section-articles-intro { padding: var(--space-xl) var(--pad-x) var(--space-md); } .section-articles-index { padding: 0 var(--pad-x) var(--space-xl); } .section-content-list { padding: var(--space-xl) var(--pad-x); } .content-list-row { flex-direction: column; gap: 10px; } .content-list-meta { flex-basis: auto; } .pagination { gap: 16px; } .pagination-status { text-align: center; } }