/* ===== header ===== */ /* the sticky is on the #header wrapper (a direct child of ) — putting it on .site-header does nothing, since its parent is exactly its own height */ #header { position: sticky; top: 0; z-index: 50; } .site-header { background: rgba(255, 253, 248, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); height: var(--header-h); } .site-header .inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--sp-4); height: 100%; display: flex; align-items: center; gap: var(--sp-5); } .brand { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--primary); white-space: nowrap; } .brand:hover { text-decoration: none; } .brand .brand-mark { color: var(--accent); margin-left: 6px; } .main-nav { display: flex; gap: var(--sp-3); flex: 1; } .main-nav a { padding: 9px 20px; border-radius: 999px; font-size: 16px; color: var(--text); } .main-nav a:hover { background: var(--surface-2); text-decoration: none; } .main-nav a.active { background: var(--primary); color: #fff; font-weight: 600; } .header-actions { display: flex; gap: var(--sp-2); align-items: center; margin-inline-start: auto; } .header-search { display: flex; gap: 7px; align-items: center; } .header-search input[type="search"] { width: 170px; padding: 7px 14px; font-size: 13.5px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); } .header-search select { padding: 6px 6px; font-size: 12.5px; max-width: 92px; } .header-search label { display: flex; gap: 4px; align-items: center; cursor: pointer; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; } .header-actions .search-link { display: none; } @media (max-width: 1010px) { .header-search { display: none; } .header-actions .search-link { display: inline-flex; } } .icon-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); font-size: 17px; } .icon-btn:hover { background: var(--surface-2); } .menu-btn { display: none; } @media (max-width: 760px) { .site-header .inner { gap: var(--sp-2); } .brand { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 17px; } .main-nav { display: none; position: absolute; top: var(--header-h); right: 0; left: 0; background: var(--surface); border-bottom: 1px solid var(--border); flex-direction: column; padding: var(--sp-3); gap: 4px; box-shadow: var(--shadow-strong); } .main-nav.open { display: flex; } .main-nav a { padding: 12px 16px; border-radius: var(--radius-s); } .menu-btn { display: inline-flex; } } /* ===== chips / tags ===== */ .chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .chip { padding: 6px 15px; border-radius: 999px; font-size: 13.5px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); } .chip:hover { border-color: var(--accent); } .chip.on { background: var(--primary); border-color: var(--primary); color: #fff; } /* sticky in-page nav for topic sections / piyut folders */ .subnav { position: sticky; top: calc(var(--header-h) + var(--catbar-h)); z-index: 40; display: flex; gap: var(--sp-2); align-items: center; overflow-x: auto; scrollbar-width: none; background: var(--background); padding: 10px 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); } .subnav::-webkit-scrollbar { display: none; } .subnav .chip { flex-shrink: 0; white-space: nowrap; cursor: pointer; text-decoration: none; } /* folder boxes inside the sticky bar (name + count) */ .fbox { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; cursor: pointer; text-decoration: none; padding: 9px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow); transition: border-color .15s; } .fbox:hover { border-color: var(--accent-2); text-decoration: none; } .fbox .fb-name { font-weight: 700; font-size: 14.5px; color: var(--primary); white-space: nowrap; } .fbox .fb-count { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; } .fbox.on { background: var(--primary); border-color: var(--primary); } .fbox.on .fb-name { color: #fff; } .fbox.on .fb-count { color: #C9D4E4; } .tag { display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--accent-soft); color: #7A5A24; font-size: var(--fs-tiny); white-space: nowrap; } .tag.blue { background: var(--primary-soft); color: var(--primary); } /* ===== status badges ===== */ .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: var(--fs-tiny); white-space: nowrap; } .status-badge::before { content: "●"; font-size: 8px; } .status-verified { background: var(--success-soft); color: var(--success); } .status-traditional { background: var(--info-soft); color: var(--primary); } .status-research { background: var(--warning-soft); color: var(--warning); } .status-unknown { background: var(--neutral-soft); color: var(--text-muted); } /* ===== cards ===== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .section { margin: var(--sp-6) 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); } .section-head .more { font-size: var(--fs-small); color: var(--accent); font-weight: 600; } /* nigun tile grid */ .nigun-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); align-items: stretch; } .nigun-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 14px 14px 12px; cursor: pointer; position: relative; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-l); box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s; } .nigun-tile:hover { border-color: var(--accent-2); transform: translateY(-2px); box-shadow: var(--shadow-strong); } .nt-ornament { color: var(--accent-2); font-size: 10px; line-height: 1; } .nt-title { font-family: var(--font-display); font-weight: 700; color: var(--primary); font-size: 18px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .nt-sub { color: var(--accent); font-size: 12px; } .nt-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; min-height: 20px; } .nt-tags .tag { padding: 1px 9px; font-size: 11px; } .nt-stats { color: var(--text-muted); font-size: 12.5px; } .nt-share { position: absolute; top: 6px; inset-inline-start: 6px; padding: 4px 7px; font-size: 12px; border: none; background: none; opacity: .55; } .nt-share:hover { opacity: 1; } .nt-player { display: flex; gap: 8px; align-items: center; width: 100%; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--border); } .nt-player .btn-play { width: 36px; height: 36px; font-size: 13px; flex-shrink: 0; } .nt-prog { flex: 1; height: 14px; display: flex; align-items: center; cursor: pointer; /* thin visible bar, larger hit area */ background: linear-gradient(var(--accent-soft), var(--accent-soft)) center / 100% 4px no-repeat; border-radius: 99px; } .nt-fill { height: 4px; border-radius: 99px; background: var(--accent); transition: width .2s linear; } .nt-time { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; min-width: 34px; text-align: center; direction: ltr; } /* nigun card (compact row — the whole row is clickable) */ .nigun-card { display: flex; align-items: center; gap: var(--sp-3); padding: 6px 14px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .15s; } .nigun-card:hover { border-color: var(--accent-2); } .nigun-card .nc-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-s); background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; } .nigun-card .nc-main { flex: 1; min-width: 0; } .nigun-card .nc-title { font-weight: 600; font-size: 14.5px; color: var(--primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1.35; } .nigun-card .nc-meta { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: 1px; font-size: 12.5px; color: var(--text-muted); } .nigun-card .nc-meta .tag { padding: 1px 8px; font-size: 11px; } .nigun-card .nc-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; align-items: center; } .nigun-card .btn-play { width: 32px; height: 32px; font-size: 12px; } /* floating nigun card (opened from lists) — fixed height, the active tab scrolls inside the card (no page scrollbar) */ .ncard-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(30, 24, 14, .5); display: flex; align-items: flex-start; justify-content: center; padding: 3vh 14px; } .ncard { position: relative; width: 100%; max-width: 780px; display: flex; flex-direction: column; overflow: hidden; max-height: 94vh; background: var(--background); border-radius: var(--radius-l); box-shadow: var(--shadow-strong); padding: 8px 22px 14px; } .ncard-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; margin-inline-start: auto; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-size: 13px; box-shadow: var(--shadow); } .ncard-close:hover { border-color: var(--accent); background: var(--accent-soft); } @media (max-width: 720px) { .ncard-backdrop { padding: 0; } .ncard { border-radius: 0; max-width: none; height: 100dvh; max-height: 100dvh; padding: 8px 12px 10px; } } /* hero + tabs stay put; the active tab panel is the scroll area (panel scrolling itself is defined in nigun-card.css) */ .ncard .nigunCard { flex: 1; min-height: 0; border: none; box-shadow: none; background: transparent; margin-top: 4px; } .ncard .nigunHero { padding-top: 0; } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; border: 1px solid transparent; transition: background .15s; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); } .btn-outline { border-color: var(--border-strong); color: var(--primary); background: var(--surface); } .btn-outline:hover { border-color: var(--accent); background: var(--accent-soft); } .btn-ghost { color: var(--primary); } .btn-ghost:hover { background: var(--surface-2); } .btn-play { width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--primary); color: #fff; font-size: 15px; flex-shrink: 0; } .btn-play:hover { background: var(--primary-dark); } .btn-play.playing { background: var(--accent); color: var(--primary-dark); } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ===== hero ===== */ .hero { padding: var(--sp-8) 0 var(--sp-7); text-align: center; background: radial-gradient(ellipse 900px 380px at 50% -60px, var(--accent-soft) 0%, transparent 65%), var(--background); border-bottom: 1px solid var(--border); } .hero h1 { font-size: 46px; margin-bottom: var(--sp-2); } .hero .hero-sub { font-size: 17px; color: var(--text-muted); margin-bottom: var(--sp-6); } .hero .search-wrap { max-width: 620px; margin: 0 auto var(--sp-4); position: relative; } .hero .chip-row { justify-content: center; } @media (max-width: 640px) { .hero { padding: var(--sp-6) 0 var(--sp-5); } .hero h1 { font-size: 32px; } } .search-bar { width: 100%; padding: 15px 48px 15px 20px; font-size: 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--shadow); } .search-wrap .search-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } /* topic cards */ .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-4); } .topic-card { padding: var(--sp-5); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .15s; } .topic-card:hover { border-color: var(--accent-2); text-decoration: none; } .topic-card .t-icon { font-size: 26px; color: var(--accent); margin-bottom: var(--sp-2); } .topic-card .t-name { font-weight: 700; color: var(--primary); font-size: 16px; } .topic-card .t-count { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; } /* featured */ .featured { display: flex; gap: var(--sp-6); align-items: center; padding: var(--sp-6); border-radius: var(--radius-l); background: linear-gradient(160deg, var(--surface) 60%, var(--accent-soft)); border: 1px solid var(--border); box-shadow: var(--shadow); } .featured .f-main { flex: 1; min-width: 0; } .featured .f-kicker { font-size: var(--fs-small); color: var(--accent); font-weight: 700; letter-spacing: .06em; } @media (max-width: 700px) { .featured { flex-direction: column; align-items: stretch; } } /* ===== nigun page ===== */ .breadcrumb { font-size: var(--fs-small); color: var(--text-muted); margin: var(--sp-5) 0 var(--sp-3); } .breadcrumb a { color: var(--text-muted); } .breadcrumb .sep { margin: 0 7px; color: var(--border-strong); } .nigun-head { margin-bottom: var(--sp-5); } .nigun-head .nh-row { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; } .nigun-head h1 { flex: 1; min-width: 200px; margin-bottom: var(--sp-2); } .nigun-head .nh-actions { display: flex; gap: var(--sp-2); } .nigun-head .nh-meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-muted); } .main-player { padding: var(--sp-5); border-radius: var(--radius-l); background: var(--primary); color: #EFE8DA; box-shadow: var(--shadow-strong); } .main-player .mp-title { font-size: 16px; font-weight: 600; color: #fff; } .main-player .mp-sub { font-size: var(--fs-small); color: #B9C4D6; margin-bottom: var(--sp-3); } .main-player .mp-controls { display: flex; align-items: center; gap: var(--sp-3); } .main-player .mp-play { width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; background: var(--accent); color: var(--primary-dark); font-size: 20px; } .main-player .mp-skip { color: #B9C4D6; font-size: 13px; padding: 6px; } .main-player .mp-skip:hover { color: #fff; } .main-player .mp-time { font-size: var(--fs-tiny); color: #B9C4D6; min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; } .progress { flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; } .progress .bar { width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); position: relative; } .progress .fill { position: absolute; top: 0; bottom: 0; right: 0; border-radius: 3px; background: var(--accent); } .main-player .mp-vol { display: flex; align-items: center; gap: 6px; } .main-player input[type=range] { width: 80px; accent-color: var(--accent); } @media (max-width: 640px) { .main-player .mp-vol { display: none; } .main-player .mp-play { width: 62px; height: 62px; } } /* version list */ .version-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--sp-2); } .version-row.current { border-color: var(--accent); background: var(--accent-soft); } .version-row.primary { border-color: var(--accent-2); border-width: 1.5px; } .primary-tag { background: var(--accent); color: #fff; } .version-row .v-main { flex: 1; min-width: 0; } .version-row .v-name { font-weight: 600; font-size: 14.5px; word-break: break-word; } .version-row .v-meta { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; } .version-row .v-note { font-size: var(--fs-small); color: var(--warning); margin-top: 3px; } /* timeline */ .timeline { display: flex; gap: var(--sp-4); overflow-x: auto; padding: var(--sp-3) 2px var(--sp-4); } .timeline .tl-item { min-width: 130px; padding: var(--sp-3); text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .timeline .tl-year { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--accent); } /* metadata table */ .meta-grid { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-2) var(--sp-4); font-size: 14.5px; } .meta-grid dt { color: var(--text-muted); } .meta-grid dd { margin: 0; } /* discussion */ .discussion-summary { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); } .msg-item { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); } .msg-item .m-head { font-size: var(--fs-tiny); color: var(--text-muted); margin-bottom: 4px; display: flex; gap: 8px; } .msg-item .m-sender { font-weight: 700; color: var(--primary); } .msg-item .m-text { white-space: pre-wrap; font-size: 14.5px; } .msg-item audio { width: 100%; margin-top: var(--sp-2); } /* archive attachments */ .attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); } .attach-card { border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; background: var(--surface); text-align: center; font-size: var(--fs-tiny); color: var(--text-muted); } .attach-card img { width: 100%; height: 110px; object-fit: cover; display: block; } .attach-card .a-doc { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--accent); } .attach-card .a-name { padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== mini player ===== */ .mini-player { position: fixed; bottom: 0; right: 0; left: 0; z-index: 60; background: var(--primary); color: #fff; border-top: 2px solid var(--accent); height: var(--player-h); display: none; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-5); } .mini-player.visible { display: flex; } .mini-player .mp2-titles { min-width: 0; flex: 0 1 260px; } .mini-player .mp2-nigun { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .mini-player .mp2-ver { font-size: var(--fs-tiny); color: #B9C4D6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-player .mp2-btn { color: #D9E1EC; font-size: 15px; padding: 8px; } .mini-player .mp2-btn:hover { color: #fff; } .mini-player .mp2-play { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--primary-dark); font-size: 16px; flex-shrink: 0; } .mini-player .progress { flex: 1; } .mini-player .mp2-time { font-size: var(--fs-tiny); color: #B9C4D6; font-variant-numeric: tabular-nums; } .mini-player .mp2-close { margin-right: auto; } @media (max-width: 640px) { .mini-player { padding: 0 var(--sp-3); gap: var(--sp-2); } .mini-player .mp2-titles { flex: 1; } .mini-player .progress, .mini-player .mp2-time, .mini-player .mp2-skip { display: none; } } /* ===== states ===== */ .empty-state { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--text-muted); } .empty-state .e-icon { font-size: 34px; color: var(--accent-2); margin-bottom: var(--sp-3); } .skeleton { border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2) 25%, #fff 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; } @keyframes shimmer { to { background-position: -200% 0; } } .error-state { padding: var(--sp-4); border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); text-align: center; } /* mobile tabs on nigun page */ .mobile-tabs { display: none; } @media (max-width: 700px) { .mobile-tabs { display: flex; gap: 4px; position: sticky; top: calc(var(--header-h) + var(--catbar-h)); z-index: 20; background: var(--background); padding: var(--sp-2) 0; margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border); } .mobile-tabs button { flex: 1; padding: 9px 4px; font-size: 13.5px; border-radius: var(--radius-s); color: var(--text-muted); } .mobile-tabs button.on { background: var(--primary); color: #fff; } .tabbed-section { display: none; } .tabbed-section.tab-visible { display: block; } } @media (min-width: 701px) { .tabbed-section { display: block !important; } } /* list page toolbar */ .list-toolbar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin: var(--sp-4) 0; } .list-toolbar .search-wrap { flex: 1; min-width: 220px; position: relative; } .list-toolbar .search-bar { padding: 11px 42px 11px 16px; font-size: 15px; box-shadow: none; } /* ===== persistent category bar (all public pages) ===== */ /* like #header: the sticky must sit on the wrapper (direct child of ) */ #catbar { position: sticky; top: var(--header-h); z-index: 45; } .catbar { background: var(--background); border-bottom: 1px solid var(--border); } .catbar.hidden { display: none; } .catbar-inner { max-width: var(--max-width); margin: 0 auto; padding: 8px var(--sp-4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); } .cb-item { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .15s; } .cb-item:hover { border-color: var(--accent-2); text-decoration: none; } .cb-item .cb-icon { font-size: 16px; } .cb-item .cb-name { font-weight: 600; font-size: 14px; color: var(--primary); white-space: nowrap; } .cb-item.on { background: var(--primary); border-color: var(--primary); } .cb-item.on .cb-name { color: #fff; } @media (max-width: 860px) { .catbar-inner { gap: 6px; padding: 7px var(--sp-3); } .cb-item { flex-direction: column; gap: 2px; padding: 6px 4px; } .cb-item .cb-icon { font-size: 14px; } .cb-item .cb-name { font-size: 11.5px; white-space: normal; text-align: center; line-height: 1.2; } } /* ===== homepage ===== */ /* the homepage fits the viewport — no page scroll (desktop) */ @media (min-width: 761px) { body.route-home { overflow: hidden; } body.route-home #app { min-height: 0; } } body.route-home #app { padding-bottom: 0; } body.route-home .site-footer { margin-top: 8px; } .home-hero { text-align: center; padding: 16px 0 12px; } .home-hero h1 { font-size: 33px; margin: 0 0 4px; } .home-hero .hero-sub { font-size: 15px; color: var(--text-muted); margin-bottom: 12px; } .home-search { position: relative; max-width: 340px; margin: 0 auto; } .home-search input { width: 100%; padding: 8px 38px 8px 15px; font-size: 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); } .home-search .search-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 14px; } .home-main { display: flex; gap: var(--sp-3); align-items: stretch; padding-bottom: 10px; } /* row 1: two boxes, row 2: three boxes */ .home-boxes { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); } .home-boxes .home-box:nth-child(-n+2) { grid-column: span 3; } .home-boxes .home-box:nth-child(n+3) { grid-column: span 2; } .home-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 18px 14px; text-align: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-l); box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s; } .home-box:hover { border-color: var(--accent-2); transform: translateY(-3px); box-shadow: var(--shadow-strong); text-decoration: none; } .home-box .hb-icon { font-size: 25px; } .home-box .hb-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--primary); line-height: 1.25; } .home-box .hb-count { font-size: 12.5px; color: var(--text-muted); } /* heichal page intro line */ .heichal-intro { color: var(--text-muted); font-size: var(--fs-small); text-align: center; margin: 14px 0 16px; } /* upright hilula card */ .hilula-card { width: 160px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 14px 12px; text-align: center; background: var(--surface); border: 1px solid var(--accent-2); border-radius: var(--radius-l); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; } .hilula-card:hover { border-color: var(--accent); transform: translateY(-3px); text-decoration: none; } .hilula-card .hc-icon { font-size: 24px; } .hilula-card .hc-kicker { font-size: 12px; color: var(--accent); font-weight: 700; letter-spacing: .02em; } .hilula-card .hc-date { font-size: 13px; color: var(--text-muted); padding-bottom: 7px; border-bottom: 1px solid var(--border); } .hilula-card .hc-name { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--primary); line-height: 1.35; } .hilula-card .hc-count { font-size: 12.5px; color: var(--text-muted); } .hilula-card .hc-more { font-size: 11.5px; color: var(--accent); margin-top: 6px; } .hilula-card .hc-more:hover { text-decoration: underline; } @media (max-width: 760px) { .home-hero { padding: 26px 0 20px; } .home-hero h1 { font-size: 30px; } .home-main { flex-direction: column; } .home-boxes .home-box:nth-child(n) { grid-column: span 3; } .home-boxes .home-box:last-child { grid-column: 1 / -1; } .home-box { padding: 20px 10px; } .home-box .hb-icon { font-size: 26px; } .home-box .hb-name { font-size: 16px; } .hilula-card { width: 100%; padding: 16px; } } /* ===== footer ===== */ .site-footer { text-align: center; padding: 18px 0 26px; border-top: 1px solid var(--border); margin-top: 30px; } .site-footer a { font-size: 13px; color: var(--text-muted); } .site-footer a:hover { color: var(--primary); } .load-more-btn { display: block; margin: var(--sp-5) auto; padding: 10px 34px; border-radius: 999px; border: 1px solid var(--primary); color: var(--primary); font-weight: 600; } .load-more-btn:hover { background: var(--primary-soft); }