/* ================================================================
通信制高校ポータルサイト — main.css v4.0
Design System classes used directly throughout theme + plugin
================================================================ */
/* ----------------------------------------------------------------
TOKENS
Design tokens live in assets/css/tokens.css.
---------------------------------------------------------------- */
/* ============================================================
Card scaffolding — every card uses this shell so the
manifest tiles share a single visual chrome.
============================================================ */
.dscard {
padding: 40px 48px 56px;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
.dscard__eyebrow {
font-family: var(--tsk-font-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tsk-primary-600);
margin: 0 0 6px;
}
.dscard__title {
font-family: var(--tsk-font-display);
font-size: var(--tsk-fs-2xl);
font-weight: 700;
letter-spacing: .01em;
margin: 0 0 8px;
line-height: 1.35;
}
.dscard__desc {
color: var(--tsk-ink-600);
font-size: var(--tsk-fs-sm);
max-width: 64ch;
margin: 0 0 32px;
}
.dscard__divider {
border: 0;
border-top: 1px solid var(--tsk-ink-100);
margin: 32px 0;
}
/* generic helpers */
.tsk-row { display:flex; gap: var(--tsk-sp-4); flex-wrap: wrap; align-items: flex-start; }
.tsk-stack { display:flex; gap: var(--tsk-sp-3); flex-direction: column; }
.tsk-grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--tsk-sp-6); }
.tsk-grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--tsk-sp-6); }
.tsk-grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--tsk-sp-4); }
.tsk-grid-6 { display:grid; grid-template-columns: repeat(6,1fr); gap: var(--tsk-sp-3); }
.tsk-label { font-family: var(--tsk-font-mono); font-size: 11px; color: var(--tsk-ink-500); letter-spacing: .04em; }
.tsk-meta { font-size: var(--tsk-fs-xs); color: var(--tsk-ink-500); }
/* ----------------------------------------------------------------
RESET & BASE
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--tsk-surface-page);
color: var(--tsk-text-primary);
font-family: var(--tsk-font-sans);
font-kerning: normal;
font-feature-settings: "palt" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--tsk-primary-600); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--tsk-primary-700); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--tsk-font-display);
font-weight: 700;
line-height: 1.35;
color: var(--tsk-ink-900);
margin: 0 0 .5em;
}
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.5em; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-size: 11px; font-weight: 700; font-family: var(--tsk-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tsk-primary-700); padding: 0; margin-bottom: 8px; }
/* === DS: Buttons === */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--tsk-font-sans); font-weight: 700; font-size: 15px; letter-spacing: .02em;
padding: 14px 24px; border-radius: var(--tsk-r-md);
border: 1.5px solid transparent; cursor: pointer; transition: all var(--tsk-dur-fast) var(--tsk-ease);
text-decoration: none; line-height: 1; white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--tsk-sh-focus); }
/* variants */
.btn--primary {
background: var(--tsk-action-primary); color: #fff;
font-weight: 700; font-size: 16px; width: 100%; margin-top: 12px;
box-shadow: 0 2px 0 var(--tsk-action-primary-hover);
}
.btn--primary:hover { background: var(--tsk-action-primary-hover); box-shadow: 0 1px 0 var(--tsk-action-primary-hover); transform: translateY(1px); }
.btn--secondary { background: #fff; color: var(--tsk-primary-700); border-color: var(--tsk-primary-300); }
.btn--secondary:hover { background: var(--tsk-primary-50); border-color: var(--tsk-primary-500); }
.btn--ghost { background: transparent; color: var(--tsk-primary-700); }
.btn--ghost:hover { background: var(--tsk-primary-50); }
.btn--accent { background: var(--tsk-accent-500); color: #fff; box-shadow: 0 2px 0 var(--tsk-accent-700); }
.btn--accent:hover { background: var(--tsk-accent-700); box-shadow: 0 1px 0 var(--tsk-accent-700); transform: translateY(1px); }
.btn--danger { background: #fff; color: var(--tsk-danger-700); border-color: var(--tsk-danger-500); }
.btn--danger:hover { background: var(--tsk-danger-bg); }
.btn--ink { background: var(--tsk-ink-900); color: #fff; box-shadow: 0 2px 0 #000; }
.btn--ink:hover { background: var(--tsk-ink-800); }
.btn--disabled { background: var(--tsk-ink-100); color: var(--tsk-ink-400); cursor: not-allowed; box-shadow: none; }
.btn--block { display: flex; width: 100%; }
.ico { width: 18px; height: 18px; stroke-width: 2; }
/* === DS: Chips & Tags === */
.label { font-family: var(--tsk-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--tsk-primary-700); text-transform: uppercase; min-width: 88px; }
/* base chip */
.chip {
display:inline-flex; align-items:center; gap: 6px;
font-family: var(--tsk-font-sans); font-size: 13px; font-weight: 700;
padding: 8px 14px; border-radius: var(--tsk-r-pill);
background: #fff; color: var(--tsk-ink-700); border: 1.5px solid var(--tsk-ink-200);
cursor: pointer; transition: all var(--tsk-dur-fast) var(--tsk-ease);
}
.chip:hover { border-color: var(--tsk-primary-400); color: var(--tsk-primary-700); background: var(--tsk-primary-50); }
.chip .ct { font-family: var(--tsk-font-mono); font-size: 11px; color: var(--tsk-ink-500); font-weight: 500; }
.chip.is-on { background: var(--tsk-primary-500); color: #fff; border-color: var(--tsk-primary-500); }
.chip.is-on .ct { color: rgba(255,255,255,.85); }
.chip.is-on:hover { background: var(--tsk-primary-600); }
.chip--check::before {
content: ""; width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--tsk-ink-300); background: #fff; flex: none;
display:inline-block;
}
.chip--check.is-on::before { background: #fff url("data:image/svg+xml;utf8,") center/12px no-repeat; border-color: #fff; }
.chip--ghost { background: transparent; border-style: dashed; }
.chip--close { padding: 6px 10px 6px 14px; }
.chip--close .x {
width: 18px; height: 18px; display:inline-flex; align-items:center; justify-content:center;
border-radius: 999px; background: rgba(255,255,255,.25); pointer-events: none;
}
.chip--close .x svg { width: 10px; height: 10px; }
/* tags (static, non-interactive) */
.tag {
display:inline-flex; align-items:center; gap: 4px;
font-family: var(--tsk-font-sans); font-size: 11px; font-weight: 700;
padding: 3px 8px; border-radius: var(--tsk-r-sm);
}
.tag.t-primary { background: var(--tsk-primary-100); color: var(--tsk-primary-700); }
.tag.t-accent { background: var(--tsk-accent-100); color: var(--tsk-accent-700); }
.tag.t-ink { background: var(--tsk-ink-100); color: var(--tsk-ink-700); }
.tag.t-success { background: var(--tsk-success-bg); color: var(--tsk-success-700); }
.tag.t-info { background: var(--tsk-info-bg); color: var(--tsk-info-700); }
.tag.t-warning { background: var(--tsk-warning-bg); color: var(--tsk-warning-700); }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.applied-bar {
display:flex; gap: 10px; align-items: center; flex-wrap: wrap;
padding: 14px 18px; background: var(--tsk-bg-tint); border: 1px solid var(--tsk-primary-100); border-radius: var(--tsk-r-md);
}
.applied-bar .count { font-family: var(--tsk-font-mono); font-size: 11px; color: var(--tsk-primary-700); margin-right: 4px; }
.clear-link { font-size: 13px; color: var(--tsk-primary-700); text-decoration: underline; cursor: pointer; margin-left: auto; font-weight: 700; }
/* === DS: Cards === */
.card {
background: #fff; border-radius: var(--tsk-r-lg); border: 1px solid var(--tsk-ink-100);
box-shadow: var(--tsk-sh-1); overflow: hidden;
display:grid; grid-template-columns: 240px 1fr;
transition: box-shadow var(--tsk-dur-fast) var(--tsk-ease), transform var(--tsk-dur-fast) var(--tsk-ease);
}
.card:hover { box-shadow: var(--tsk-sh-3); transform: translateY(-2px); }
.card__media {
background: repeating-linear-gradient(135deg, var(--tsk-primary-100) 0 14px, var(--tsk-primary-50) 14px 28px);
border-right: 1px solid var(--tsk-primary-200);
position: relative; padding: 16px;
display:flex; flex-direction: column; justify-content: space-between;
}
.card__media .anno { font-family: var(--tsk-font-mono); font-size: 10px; color: var(--tsk-primary-700); letter-spacing: .08em; }
.card__media .anno b { font-weight: 700; }
.card__media .badge {
align-self: flex-start;
background: var(--tsk-accent-500); color: #fff; font-size: 11px; font-weight: 700;
padding: 3px 10px; border-radius: var(--tsk-r-pill); font-family: var(--tsk-font-mono); letter-spacing: .04em;
}
.card__meta .pin { color: var(--tsk-primary-600); }
.card__title { margin: 0; font-family: var(--tsk-font-display); font-size: 22px; font-weight: 700; line-height: 1.35; color: var(--tsk-ink-900); }
.card__title a { color: inherit; text-decoration: none; }
.card__desc { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--tsk-ink-700); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__tags { display:flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; margin-bottom: 14px; }
.card__footer {
display:flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--tsk-ink-200);
}
.stat { font-size: 12px; color: var(--tsk-ink-600); }
.stat b { color: var(--tsk-ink-900); font-family: var(--tsk-font-display); font-size: 16px; font-weight: 700; }
/* add-to-list toggle */
.toggle-add {
margin-left: auto; display:inline-flex; gap: 8px; align-items: center;
background: var(--tsk-primary-500); color: #fff; border: 0; border-radius: var(--tsk-r-md);
padding: 10px 16px; font-weight: 700; font-size: 13px; cursor: pointer;
box-shadow: 0 2px 0 var(--tsk-primary-700);
}
.toggle-add.is-added { background: var(--tsk-success-500); box-shadow: 0 2px 0 var(--tsk-success-700); }
.toggle-add .ico { width: 14px; height: 14px; stroke-width: 2.5; }
.heart {
display:inline-flex; align-items:center; justify-content:center; width: 36px; height: 36px;
border-radius: 50%; background: rgba(255,255,255,.85); border: 1px solid var(--tsk-ink-100);
cursor: pointer;
}
.heart svg { width: 16px; height: 16px; color: var(--tsk-ink-500); }
.heart.on svg { color: var(--tsk-danger-500); fill: var(--tsk-danger-500); }
/* compact (search result row) */
.card--row { grid-template-columns: 200px 1fr 180px; }
.card--row .stats { border-left: 1px dashed var(--tsk-ink-200); padding: 20px 22px; display:flex; flex-direction: column; gap: 8px; justify-content: center; }
.card--row .stats .row { display:flex; justify-content: space-between; font-size: 12px; color: var(--tsk-ink-600); }
.card--row .stats .row b { color: var(--tsk-ink-900); font-family: var(--tsk-font-display); font-size: 15px; font-weight: 700; }
/* large hero */
.card--hero { grid-column: 1 / -1; grid-template-columns: 1.1fr 1fr; }
.card--hero .card__media { padding: 28px; min-height: 280px; }
.card--hero .card__desc { font-size: 15px; -webkit-line-clamp: 4; }
/* === DS: Search === */
.section h3 { margin: 0 0 14px; font-family: var(--tsk-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tsk-ink-500); }
/* Hero search */
.search-hero {
display:grid; grid-template-columns: 1fr 220px 220px auto; gap: 0;
background: #fff; border-radius: var(--tsk-r-lg); padding: 6px;
box-shadow: var(--tsk-sh-2); border: 1px solid var(--tsk-ink-100);
}
.search-hero .cell { display:flex; flex-direction: column; padding: 10px 16px; gap: 2px; border-right: 1px solid var(--tsk-ink-100); }
.search-hero .cell:nth-last-child(2) { border-right: 0; }
.search-hero .cell label { font-family: var(--tsk-font-mono); font-size: 10px; letter-spacing: .12em; color: var(--tsk-primary-700); }
.search-hero .cell input, .search-hero .cell select {
border: 0; padding: 4px 0; background: transparent; font-family: var(--tsk-font-sans); font-size: 15px; font-weight: 700; color: var(--tsk-ink-900); outline: none;
}
.search-hero .cell select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0 center; background-size: 16px; padding-right: 20px; }
.search-hero .submit {
background: var(--tsk-primary-500); color: #fff; border: 0; border-radius: var(--tsk-r-md); margin: 0 0 0 6px;
display:flex; align-items:center; justify-content:center; gap: 8px; padding: 0 28px; font-size: 16px; font-weight: 700; cursor: pointer;
box-shadow: 0 2px 0 var(--tsk-primary-700);
}
/* compact search */
.search-compact {
display:flex; align-items: center; gap: 8px;
background: #fff; border: 1.5px solid var(--tsk-ink-200); border-radius: var(--tsk-r-pill); padding: 6px 6px 6px 18px;
max-width: 540px;
}
.search-compact:focus-within { border-color: var(--tsk-primary-500); box-shadow: var(--tsk-sh-focus); }
.search-compact svg { color: var(--tsk-ink-500); flex: none; }
.search-compact input { flex: 1; border: 0; outline: none; padding: 8px 0; font-size: 15px; font-family: var(--tsk-font-sans); color: var(--tsk-ink-900); background: transparent; }
.search-compact .go { border: 0; background: var(--tsk-primary-500); color: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer; }
/* with autocomplete */
.ac-wrap { position: relative; max-width: 540px; }
.ac {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: #fff; border-radius: var(--tsk-r-lg); box-shadow: var(--tsk-sh-3);
padding: 8px; border: 1px solid var(--tsk-ink-100);
}
.ac__group { padding: 6px 10px; font-family: var(--tsk-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tsk-ink-500); }
.ac__item { display:flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--tsk-r-sm); cursor: pointer; font-size: 14px; }
.ac__item:hover, .ac__item.is-active { background: var(--tsk-primary-50); }
.ac__item .badge { margin-left: auto; font-family: var(--tsk-font-mono); font-size: 10px; color: var(--tsk-ink-500); background: var(--tsk-ink-50); padding: 2px 6px; border-radius: 4px; letter-spacing: .04em; }
.ac__item .ico-sm { width: 14px; height: 14px; color: var(--tsk-primary-500); }
.ac__item b { color: var(--tsk-primary-700); font-weight: 700; }
/* zip search */
.zip {
display:flex; align-items: center; gap: 10px; background: var(--tsk-bg-tint); border: 1px solid var(--tsk-primary-200); border-radius: var(--tsk-r-md); padding: 12px 16px; max-width: 560px;
}
.zip input { border: 1.5px solid var(--tsk-ink-200); background: #fff; border-radius: var(--tsk-r-sm); padding: 8px 10px; width: 120px; font-family: var(--tsk-font-mono); font-size: 15px; }
.zip .btn { background: var(--tsk-primary-500); color: #fff; border: 0; padding: 8px 14px; border-radius: var(--tsk-r-sm); font-weight: 700; cursor: pointer; }
.zip .hint { font-size: 13px; color: var(--tsk-ink-700); }
/* Legacy DS cart/request prototype removed in Phase 2-7; live request UI is plugin-owned. */
/* Legacy DS form prototype removed in Phase 2-7; shared form UI lives in form-ui.css. */
/* === Shared empty state === */
/* empty state */
.empty {
background: #fff; border-radius: var(--tsk-r-lg); border: 1px dashed var(--tsk-ink-200);
padding: 56px 24px; text-align: center; display:flex; flex-direction: column; gap: 12px; align-items: center;
}
.empty__art {
width: 120px; height: 88px; aspect-ratio: 4/3; padding: 12px; margin: 0 auto 14px;
background: repeating-linear-gradient(135deg, var(--tsk-primary-100) 0 12px, var(--tsk-primary-50) 12px 24px);
border-radius: var(--tsk-r-md); border: 1px solid var(--tsk-primary-200);
display:flex; align-items: flex-end; justify-content: center;
font-family: var(--tsk-font-mono); font-size: 10px; color: var(--tsk-primary-700); letter-spacing: .06em;
}
.empty h4 { margin: 0; font-family: var(--tsk-font-display); font-size: 20px; }
.empty p { margin: 0; font-size: 14px; color: var(--tsk-ink-600); max-width: 40ch; }
.empty .btn { display:inline-flex; gap: 6px; align-items: center; background: var(--tsk-primary-500); color: #fff; border: 0; border-radius: var(--tsk-r-md); padding: 12px 22px; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; box-shadow: 0 2px 0 var(--tsk-primary-700); }
/* === DS: Badges === */
.badge {
display:inline-flex; align-items: center; gap: 4px;
font-family: var(--tsk-font-sans); font-size: 11px; font-weight: 700;
padding: 4px 10px; border-radius: var(--tsk-r-sm); letter-spacing: .04em;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--lg { font-size: 13px; padding: 6px 12px; }
.badge--pill { border-radius: var(--tsk-r-pill); padding: 4px 12px; }
.b-primary { background: var(--tsk-primary-100); color: var(--tsk-primary-700); }
.b-primary-solid { background: var(--tsk-primary-500); color: #fff; }
.b-accent { background: var(--tsk-accent-100); color: var(--tsk-accent-700); }
.b-accent-solid { background: var(--tsk-accent-500); color: #fff; }
.b-ink { background: var(--tsk-ink-100); color: var(--tsk-ink-700); }
.b-ink-solid { background: var(--tsk-ink-900); color: #fff; }
.b-success { background: var(--tsk-success-bg); color: var(--tsk-success-700); }
.b-warning { background: var(--tsk-warning-bg); color: var(--tsk-warning-700); }
.b-danger { background: var(--tsk-danger-bg); color: var(--tsk-danger-700); }
.b-info { background: var(--tsk-info-bg); color: var(--tsk-info-700); }
/* dot status */
.dot-status { display:inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--tsk-ink-700); }
.dot-status .d { width: 8px; height: 8px; border-radius: 50%; position: relative; }
.dot-status .d::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; opacity: .25; }
.ds-on .d { background: var(--tsk-success-500); color: var(--tsk-success-500); }
.ds-off .d { background: var(--tsk-ink-300); color: var(--tsk-ink-300); }
.ds-warn .d { background: var(--tsk-warning-500); color: var(--tsk-warning-500); }
.ds-down .d { background: var(--tsk-danger-500); color: var(--tsk-danger-500); }
/* request status (cart / mypage) */
.req-status { display:flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--tsk-bg-tint); border: 1px solid var(--tsk-primary-100); border-radius: var(--tsk-r-md); }
.req-status .ic { width: 36px; height: 36px; border-radius: 50%; background: #fff; display:flex; align-items: center; justify-content: center; border: 2px solid var(--tsk-primary-500); color: var(--tsk-primary-700); flex: none; }
.req-status .ic.done { background: var(--tsk-primary-500); color: #fff; }
.req-status .info { flex: 1; }
.req-status .info b { font-family: var(--tsk-font-display); font-size: 15px; }
.req-status .info p { margin: 2px 0 0; font-size: 12px; color: var(--tsk-ink-600); }
.req-status .ts { font-family: var(--tsk-font-mono); font-size: 11px; color: var(--tsk-ink-500); }
/* counter badge on icon */
.icon-stack { position: relative; width: 44px; height: 44px; display:inline-flex; align-items: center; justify-content: center; background: var(--tsk-ink-50); border-radius: 50%; color: var(--tsk-ink-700); }
.icon-stack .ctr {
position: absolute; top: -4px; right: -4px; background: var(--tsk-accent-500); color: #fff;
font-family: var(--tsk-font-mono); font-size: 10px; font-weight: 700; border-radius: 999px;
min-width: 20px; height: 20px; display:flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fff;
}
/* === DS: Tabs/Accordion === */
/* underline tabs */
.tabs { display:flex; gap: 4px; border-bottom: 1px solid var(--tsk-ink-100); margin-bottom: 24px; }
.tab {
border: 0; background: transparent; padding: 14px 18px; cursor: pointer;
font-family: var(--tsk-font-sans); font-size: 14px; font-weight: 700; color: var(--tsk-ink-600);
border-bottom: 3px solid transparent; margin-bottom: -1px; display:inline-flex; gap: 8px; align-items: center;
}
.tab:hover { color: var(--tsk-primary-700); }
.tab.is-active { color: var(--tsk-primary-700); border-bottom-color: var(--tsk-primary-500); }
.tab .ct { font-family: var(--tsk-font-mono); font-size: 11px; color: var(--tsk-ink-400); background: var(--tsk-ink-50); padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.tab.is-active .ct { color: var(--tsk-primary-700); background: var(--tsk-primary-50); }
/* pill tabs */
.tabs-pill { display:inline-flex; background: var(--tsk-ink-50); padding: 4px; border-radius: var(--tsk-r-pill); gap: 2px; }
.tab-pill { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font-family: var(--tsk-font-sans); font-size: 13px; font-weight: 700; color: var(--tsk-ink-700); cursor: pointer; }
.tab-pill.is-active { background: #fff; color: var(--tsk-primary-700); box-shadow: var(--tsk-sh-1); }
/* card-style tabs */
.tabs-card { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.tab-card {
border: 1.5px solid var(--tsk-ink-200); background: #fff; border-radius: var(--tsk-r-md); padding: 16px;
cursor: pointer; text-align: left;
display:flex; flex-direction: column; gap: 4px;
}
.tab-card:hover { border-color: var(--tsk-primary-300); background: var(--tsk-primary-50); }
.tab-card.is-active { border-color: var(--tsk-primary-500); background: var(--tsk-bg-tint); box-shadow: inset 0 0 0 1px var(--tsk-primary-500); }
.tab-card .num { font-family: var(--tsk-font-mono); font-size: 11px; color: var(--tsk-primary-600); letter-spacing: .08em; }
.tab-card .ttl { font-family: var(--tsk-font-display); font-weight: 700; font-size: 16px; }
.tab-card .sub { font-size: 12px; color: var(--tsk-ink-600); }
/* accordion */
.acc-list { background: #fff; border: 1px solid var(--tsk-ink-100); border-radius: var(--tsk-r-md); overflow: hidden; }
details { border-bottom: 1px solid var(--tsk-ink-100); }
details:last-child { border-bottom: 0; }
summary {
list-style: none; cursor: pointer; padding: 18px 22px;
display:flex; align-items: center; gap: 14px; font-weight: 700; font-size: 15px;
transition: background var(--tsk-dur-fast);
}
summary::-webkit-details-marker { display: none; }
summary .q {
width: 28px; height: 28px; border-radius: 50%; background: var(--tsk-primary-100); color: var(--tsk-primary-700);
display:flex; align-items: center; justify-content: center; font-family: var(--tsk-font-display); font-weight: 900; flex: none;
}
summary .arr { margin-left: auto; transition: transform var(--tsk-dur-fast); color: var(--tsk-ink-500); }
details[open] summary { background: var(--tsk-primary-50); }
details[open] summary .arr { transform: rotate(180deg); color: var(--tsk-primary-700); }
details .details .body p { margin: 0 0 8px; }
details .body p:last-child { margin-bottom: 0; }
/* tab body placeholder */
.tab-
/* === DS: Pagination === */
/* breadcrumb */
.crumb { display:flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; color: var(--tsk-ink-600); }
.crumb a { color: var(--tsk-ink-600); text-decoration: none; padding: 4px 6px; border-radius: 4px; }
.crumb a:hover { background: var(--tsk-primary-50); color: var(--tsk-primary-700); }
.crumb .sep { color: var(--tsk-ink-300); font-family: var(--tsk-font-mono); padding: 0 2px; }
.crumb .here { color: var(--tsk-ink-900); font-weight: 700; padding: 4px 6px; }
/* result-meta + sort */
.result-bar {
display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
margin-top: 22px;
padding: 16px 20px; background: var(--tsk-bg-tint); border: 1px solid var(--tsk-primary-100); border-radius: var(--tsk-r-md);
}
.result-bar .meta { font-size: 14px; }
.result-bar .meta b { color: var(--tsk-primary-700); font-family: var(--tsk-font-display); font-size: 18px; font-weight: 700; padding: 0 2px; }
.result-bar .controls { display:flex; gap: 8px; align-items: center; }
/* sort segmented */
.seg { display:inline-flex; background: #fff; border: 1.5px solid var(--tsk-ink-200); border-radius: var(--tsk-r-pill); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--tsk-ink-700); cursor: pointer; font-family: var(--tsk-font-sans); }
.seg button.is-active { background: var(--tsk-primary-500); color: #fff; }
/* view toggle */
.view-toggle { display:inline-flex; border: 1.5px solid var(--tsk-ink-200); border-radius: var(--tsk-r-sm); overflow: hidden; }
.view-toggle button { border: 0; background: #fff; padding: 8px 10px; cursor: pointer; color: var(--tsk-ink-500); display:flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; }
.view-toggle button + button { border-left: 1.5px solid var(--tsk-ink-200); }
.view-toggle button.is-active { background: var(--tsk-primary-50); color: var(--tsk-primary-700); }
/* pagination */
.pager { display:flex; gap: 6px; justify-content: center; align-items: center; }
.pager__item {
box-sizing: border-box;
min-width: 40px;
height: 40px;
padding: 0;
border-radius: var(--tsk-r-md);
border: 1.5px solid var(--tsk-ink-200);
background: #fff;
font-family: var(--tsk-font-mono);
font-size: 14px;
font-weight: 400;
color: var(--tsk-ink-700);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.pager__item--nav {
padding: 14px 24px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1;
}
.pager__item.is-current,
.pager__item--disabled { padding-left: 8px; padding-right: 8px; }
a.pager__item:hover { border-color: var(--tsk-primary-400); color: var(--tsk-primary-700); background: var(--tsk-primary-50); text-decoration: none; }
.pager__item.is-current { background: var(--tsk-primary-500); color: #fff; border-color: var(--tsk-ink-200); font-weight: 700; }
.pager__item--disabled { border-color: var(--tsk-ink-100); background: var(--tsk-ink-50); color: var(--tsk-ink-300); font-weight: 500; }
/* condensed pager */
.pager-mini { display:flex; align-items: center; gap: 14px; font-size: 13px; color: var(--tsk-ink-700); }
.pager-mini .nums { font-family: var(--tsk-font-mono); }
.pager-mini .nums b { color: var(--tsk-ink-900); font-weight: 700; }
/* sort dropdown */
.sort-dd { position: relative; }
.sort-dd button {
display:inline-flex; gap: 8px; align-items: center; padding: 8px 14px;
border: 1.5px solid var(--tsk-ink-200); border-radius: var(--tsk-r-md); background: #fff; cursor: pointer;
font-family: var(--tsk-font-sans); font-size: 13px; font-weight: 700; color: var(--tsk-ink-800);
}
.sort-dd button .lbl { color: var(--tsk-ink-500); font-weight: 400; }
/* ----------------------------------------------------------------
SITE LAYOUT
---------------------------------------------------------------- */
.site-container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.site-main { min-height: 70vh; }
/* ----------------------------------------------------------------
CARD — Vertical orientation for 3-column grid
DS card is horizontal by default (.card__media left + body right)
.card--vert stacks them vertically
---------------------------------------------------------------- */
.card--vert {
grid-template-columns: 1fr;
/* Keep the image row fixed even when sibling cards make the grid item taller. */
grid-template-rows: 200px minmax(0, 1fr);
}
.card--vert .card__media {
height: 200px;
border-right: 0;
border-bottom: 0;
aspect-ratio: unset;
padding: 0;
}
.card--vert .card__body {
padding: 20px 20px 16px;
display: flex;
flex-direction: column;
min-height: 0;
}
.card--vert .card__footer {
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--tsk-ink-200);
display: grid;
grid-template-columns: minmax(106px, .72fr) minmax(0, 1.58fr);
gap: 8px;
align-items: stretch;
}
.card--vert .card__title { font-size: 17px; margin: 0 0 6px; }
.card--vert .card__desc { font-size: 13px; -webkit-line-clamp: 2; }
/* Badge overlay on card image */
.card__media-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
display: flex;
gap: 8px;
align-items: flex-start;
flex-wrap: wrap;
}
/* School/campus unit badge */
.badge--school { background: var(--tsk-primary-500); color: #fff; }
.badge--campus { background: var(--tsk-accent-500); color: #fff; }
/* Card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.listing-page-section { padding-bottom: 64px; }
.card-grid--results { margin-top: 0; }
.card__image { width: 100%; height: 100%; object-fit: contain; background: var(--tsk-bg-tint); }
.card__media-placeholder-icon {
color: var(--tsk-primary-600);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.filter-native-input { display: none; }
/* ----------------------------------------------------------------
SEARCH FORM (theme version with chips integrated)
---------------------------------------------------------------- */
.search-form-wrap {
background: #fff;
border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-lg);
padding: 22px;
box-shadow: var(--tsk-sh-2);
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 18px;
}
.search-keyword-row {
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid var(--tsk-ink-200);
border-radius: var(--tsk-r-md);
padding: 8px 14px;
gap: 8px;
transition: border-color var(--tsk-dur-fast) var(--tsk-ease),
box-shadow var(--tsk-dur-fast) var(--tsk-ease);
}
.search-keyword-row:focus-within {
border-color: var(--tsk-primary-500);
box-shadow: var(--tsk-sh-focus);
}
.search-keyword-row svg { width: 18px; height: 18px; color: var(--tsk-ink-400); flex: none; }
.search-keyword-row input[type="search"],
.search-keyword-row input[type="text"] {
flex: 1; border: 0; outline: none;
padding: 6px 0; font-size: 15px;
font-family: var(--tsk-font-sans);
color: var(--tsk-ink-900); background: transparent;
min-width: 0;
}
.search-keyword-row input::placeholder { color: var(--tsk-ink-400); }
.search-keyword-row .go-btn {
border: 0; background: var(--tsk-primary-500); color: #fff;
border-radius: var(--tsk-r-pill); padding: 9px 20px;
font-family: var(--tsk-font-sans); font-weight: 700; font-size: 13px;
cursor: pointer; white-space: nowrap;
transition: background var(--tsk-dur-fast) var(--tsk-ease);
}
.search-keyword-row .go-btn:hover { background: var(--tsk-primary-600); }
/* Filter row: 3-column grid */
.filter-groups {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-md);
background: var(--tsk-ink-50, #f8faf9);
}
.filter-group-label {
font-family: var(--tsk-font-mono);
font-size: 11px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--tsk-primary-700);
}
.chips-row {
display: flex; flex-wrap: wrap; gap: 6px;
max-height: 112px; overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--tsk-primary-200) transparent;
}
.chips-row::-webkit-scrollbar { width: 4px; }
.chips-row::-webkit-scrollbar-thumb { background: var(--tsk-primary-200); border-radius: 4px; }
/* Toggle to show/hide filters on front page */
.filter-toggle-details { border: 0; margin: 0; }
.filter-toggle-details summary {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 700; color: var(--tsk-primary-700);
cursor: pointer; list-style: none; padding: 4px 0; user-select: none;
}
.filter-toggle-details summary::-webkit-details-marker { display: none; }
.filter-toggle-details .filter-groups {
padding-top: 16px;
border-top: 1px solid var(--tsk-ink-100);
margin-top: 8px;
}
/* Applied filters bar */
.applied-filters {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--tsk-primary-50);
border: 1px solid var(--tsk-primary-200);
border-radius: var(--tsk-r-md);
}
.applied-filters__label {
font-family: var(--tsk-font-mono); font-size: 11px; font-weight: 700;
letter-spacing: .08em; color: var(--tsk-primary-700); text-transform: uppercase;
}
.applied-filters__clear {
margin-left: auto; font-size: 12px; color: var(--tsk-danger-700);
text-decoration: underline; cursor: pointer; background: none; border: 0;
}
/* ----------------------------------------------------------------
HEADER
---------------------------------------------------------------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,.96);
border-bottom: 1px solid var(--tsk-ink-100);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.site-header > .site-container {
width: min(1200px, calc(100% - 40px));
max-width: none;
padding-inline: 0;
}
.site-header__inner {
display: block;
min-height: 0;
padding: 0;
}
/* Logo */
.site-logo {
display: flex; align-items: center; gap: 10px;
text-decoration: none; flex-shrink: 0;
}
.site-logo:hover { text-decoration: none; }
.site-logo__mark {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 10px 10px 10px 3px;
background: var(--tsk-primary-500);
box-shadow: 0 3px 0 var(--tsk-primary-700);
flex: none;
}
.site-logo__mark svg { color: #fff; width: 18px; height: 18px; }
.site-logo__text {
font-family: var(--tsk-font-display); font-weight: 900;
font-size: 16px; color: var(--tsk-ink-900); line-height: 1.2;
}
.site-logo__sub {
display: block; margin: 0; font-family: var(--tsk-font-mono);
font-size: 9px; line-height: 1; color: var(--tsk-primary-600);
letter-spacing: .14em; text-transform: uppercase;
}
/* Navigation */
.site-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.site-nav a {
display: inline-flex; align-items: center;
padding: 8px 12px; border-radius: var(--tsk-r-sm);
font-size: 13px; font-weight: 700;
color: var(--tsk-ink-800); text-decoration: none; white-space: nowrap;
transition: background var(--tsk-dur-fast) var(--tsk-ease),
color var(--tsk-dur-fast) var(--tsk-ease);
}
.site-nav a:hover { background: var(--tsk-primary-50); color: var(--tsk-primary-700); text-decoration: none; }
.site-nav a.is-current { color: var(--tsk-primary-700); }
/* Header quick search */
.header-search-form {
display: flex;
align-items: center;
gap: 6px;
flex: 1 1 240px;
min-width: 0;
max-width: 420px;
}
.header-search-form input[type="search"],
.header-search-form select,
.header-search-form .header-search-form__submit {
box-sizing: border-box;
font-family: var(--tsk-font-sans);
}
.header-search-form input[type="search"] {
flex: 1 1 auto;
min-width: 0;
width: 100%;
height: 36px;
padding: 0 10px;
border: 1.5px solid var(--tsk-ink-200);
border-radius: var(--tsk-r-md);
font-size: 13px;
color: var(--tsk-ink-800);
background: #fff;
outline: none;
}
.header-search-form select {
flex: 0 0 auto;
max-width: 132px;
height: 36px;
padding: 0 28px 0 8px;
border: 1.5px solid var(--tsk-ink-200);
border-radius: var(--tsk-r-md);
font-size: 13px;
color: var(--tsk-ink-800);
background-color: #fff;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233F4D4D' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px 8px;
cursor: pointer;
white-space: nowrap;
outline: none;
}
.header-search-form input[type="search"]:focus,
.header-search-form select:focus {
border-color: var(--tsk-primary-400);
box-shadow: 0 0 0 3px rgba(22,147,137,.14);
}
.header-search-form .header-search-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
padding: 0;
border: 0;
border-radius: var(--tsk-r-md);
background: var(--tsk-primary-500);
color: #fff;
cursor: pointer;
transition: background var(--tsk-dur-fast) var(--tsk-ease), box-shadow var(--tsk-dur-fast) var(--tsk-ease);
}
.header-search-form .header-search-form__submit:hover { background: var(--tsk-primary-600); }
.header-search-form .header-search-form__submit:focus-visible {
outline: none;
box-shadow: var(--tsk-sh-focus);
}
/* Header actions */
.site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; flex-shrink: 0; }
.site-header__actions [data-tsg-cart-link] {
position: relative;
gap: 6px;
}
/* Cart icon button */
.cart-btn {
position: relative; display: inline-flex;
align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
border: 1px solid var(--tsk-ink-200); background: #fff;
cursor: pointer; color: var(--tsk-ink-700); text-decoration: none;
transition: border-color var(--tsk-dur-fast) var(--tsk-ease);
}
.cart-btn:hover { border-color: var(--tsk-primary-300); color: var(--tsk-primary-700); text-decoration: none; }
.cart-btn svg { width: 18px; height: 18px; }
.cart-count {
position: absolute; top: -4px; right: -4px;
background: var(--tsk-danger-500); color: #fff;
font-family: var(--tsk-font-mono); font-size: 10px; font-weight: 700;
border-radius: var(--tsk-r-pill); min-width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center;
padding: 0 4px; border: 2px solid #fff;
}
.cart-count[hidden] { display: none; }
/* Burger */
.burger-btn {
display: none; width: 40px; height: 40px;
border-radius: var(--tsk-r-sm); border: 0;
background: var(--tsk-primary-50); color: var(--tsk-primary-700);
cursor: pointer; flex-direction: column; gap: 5px; padding: 10px;
align-items: center; justify-content: center;
}
.burger-btn span {
display: block; width: 18px; height: 2px;
background: currentColor; border-radius: 2px;
transition: all var(--tsk-dur-fast) var(--tsk-ease);
}
.burger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile nav */
.mobile-nav {
display: none; flex-direction: column; gap: 2px;
padding: 12px 0 16px;
border-top: 1px solid var(--tsk-ink-100);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
padding: 12px 8px; font-size: 15px; font-weight: 700;
color: var(--tsk-ink-800); border-radius: var(--tsk-r-sm);
text-decoration: none; display: flex;
align-items: center; justify-content: space-between;
}
.mobile-nav a:hover { background: var(--tsk-primary-50); color: var(--tsk-primary-700); }
.mobile-nav .cta-link {
gap: 8px;
background: var(--tsk-accent-500);
color: #fff;
border-radius: var(--tsk-r-md);
justify-content: center;
margin-top: 8px;
}
/* ----------------------------------------------------------------
FOOTER
---------------------------------------------------------------- */
.site-footer { margin-top: 48px; background: var(--tsk-surface-brand); color: var(--tsk-text-on-brand); }
.footer-body { padding: 40px 0; }
.footer-grid {
display: grid;
grid-template-columns: 1fr repeat(3, auto);
gap: 32px; align-items: start;
}
.footer-logo .site-logo__text { color: #fff; }
.footer-logo .site-logo__sub { color: var(--tsk-text-on-brand-muted); }
.footer-tagline { font-size: 13px; color: var(--tsk-text-on-brand-muted); margin-top: 12px; line-height: 1.7; }
.footer-col h5 {
font-family: var(--tsk-font-mono); font-size: 11px;
letter-spacing: .14em; color: #FFE7C7;
text-transform: uppercase; margin: 0 0 12px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: 13px; color: var(--tsk-text-on-brand); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.34);
padding: 16px 0;
display: flex; align-items: center;
justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-bottom small { font-family: var(--tsk-font-mono); font-size: 11px; color: var(--tsk-text-on-brand-muted); letter-spacing: .04em; }
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { font-size: 12px; color: var(--tsk-text-on-brand); text-decoration: none; }
.footer-legal a:hover { color: #fff; }
/* ----------------------------------------------------------------
HERO
---------------------------------------------------------------- */
.site-hero {
padding: 64px 0 56px;
background: linear-gradient(145deg, #fff 0%, var(--tsk-primary-50) 60%, var(--tsk-bg-tint) 100%);
border-bottom: 1px solid var(--tsk-primary-100);
position: relative; overflow: hidden;
}
.site-hero::before {
content: ''; position: absolute; top: -80px; right: -80px;
width: 420px; height: 420px; border-radius: 50%;
background: radial-gradient(circle, var(--tsk-primary-100) 0%, transparent 70%);
pointer-events: none;
}
.hero-inner { position: relative; }
.hero-eyebrow {
font-family: var(--tsk-font-mono); font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--tsk-primary-600); margin: 0 0 12px;
}
.hero-h1 {
max-width: 720px;
font-size: clamp(26px, 3.5vw, 38px);
line-height: 1.25; margin: 0 0 16px; color: var(--tsk-ink-900);
}
.hero-lead {
max-width: 600px; font-size: 16px; color: var(--tsk-ink-700);
line-height: 1.7; margin: 0;
}
/* ----------------------------------------------------------------
SECTIONS
---------------------------------------------------------------- */
.site-section { margin-top: 48px; }
.section-head { margin-bottom: 24px; }
.section-head h1, .section-head h2 { margin-bottom: 8px; }
.section-head p { color: var(--tsk-ink-600); font-size: 13px; margin: 0; }
.section-eyebrow {
font-family: var(--tsk-font-mono); font-size: 11px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--tsk-primary-600); margin: 0 0 8px;
}
.section-tint {
background: var(--tsk-bg-tint); border-radius: var(--tsk-r-xl);
padding: 40px 32px; border: 1px solid var(--tsk-primary-100);
}
.site-band {
background: var(--tsk-bg-tint);
border-top: 1px solid var(--tsk-primary-100);
border-bottom: 1px solid var(--tsk-primary-100);
padding: 48px 0; margin-top: 48px;
}
/* ----------------------------------------------------------------
RESULT BAR (DS: .result-bar)
---------------------------------------------------------------- */
/* Already in DS CSS, add site-specific view switcher layout */
.view-switcher {
display: inline-flex; background: var(--tsk-ink-50);
padding: 4px; border: 1px solid var(--tsk-ink-100); border-radius: var(--tsk-r-pill); gap: 2px;
}
.view-switcher a {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 14px; border-radius: 999px;
font-size: 12px; font-weight: 700;
color: var(--tsk-ink-700); text-decoration: none;
transition: all var(--tsk-dur-fast) var(--tsk-ease);
}
.view-switcher a.is-active {
background: #fff; color: var(--tsk-primary-700);
box-shadow: var(--tsk-sh-1);
}
.view-switcher a:hover { text-decoration: none; }
.count-ct {
font-family: var(--tsk-font-mono); font-size: 10px;
background: var(--tsk-ink-100); color: var(--tsk-ink-600);
padding: 1px 6px; border-radius: var(--tsk-r-pill);
}
.view-switcher a.is-active .count-ct {
background: var(--tsk-primary-50); color: var(--tsk-primary-700);
}
/* ----------------------------------------------------------------
DETAIL PAGES
---------------------------------------------------------------- */
.detail-breadcrumb {
padding: 12px 0; font-size: 12px; color: var(--tsk-ink-500);
display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.detail-breadcrumb a { color: var(--tsk-primary-600); text-decoration: none; }
.detail-breadcrumb a:hover { text-decoration: underline; }
.detail-breadcrumb__sep { color: var(--tsk-ink-300); }
/* Hero layout */
.detail-hero {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 560px);
gap: 44px; align-items: start; padding-top: 32px; margin-bottom: 40px;
}
.detail-hero h1 {
font-size: clamp(24px, 3.5vw, 36px);
line-height: 1.25; margin: 0 0 12px;
}
.detail-meta {
display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;
}
.detail-meta span {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: var(--tsk-r-pill);
background: var(--tsk-bg-tint); border: 1px solid var(--tsk-primary-100);
font-size: 12px; color: var(--tsk-ink-700);
}
.detail-actions {
display: flex; flex-wrap: wrap; gap: 12px;
align-items: center; margin-top: 20px;
}
/* Gallery */
.detail-gallery {
overflow: hidden; border-radius: var(--tsk-r-lg);
border: 1px solid var(--tsk-ink-100); background: #fff;
box-shadow: var(--tsk-sh-2);
}
.gallery__viewport { aspect-ratio: 16/10; background: var(--tsk-bg-tint); position: relative; }
.gallery__slide { display: none; width: 100%; height: 100%; margin: 0; }
.gallery__slide.is-active { display: block; }
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; background: var(--tsk-bg-tint); }
.gallery__controls {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 12px; background: #fff;
border-top: 1px solid var(--tsk-ink-100);
}
.gallery__controls button {
border: 1.5px solid var(--tsk-ink-200); border-radius: var(--tsk-r-pill);
background: #fff; padding: 5px 14px; font-size: 12px; font-weight: 700;
cursor: pointer; color: var(--tsk-ink-700);
transition: all var(--tsk-dur-fast) var(--tsk-ease);
}
.gallery__controls button:hover { border-color: var(--tsk-primary-400); color: var(--tsk-primary-700); }
.gallery__count { font-family: var(--tsk-font-mono); font-size: 12px; color: var(--tsk-ink-500); }
.gallery-placeholder {
aspect-ratio: 16/10; border-radius: var(--tsk-r-lg);
background: repeating-linear-gradient(135deg, var(--tsk-primary-100) 0 14px, var(--tsk-primary-50) 14px 28px);
border: 1px solid var(--tsk-primary-200);
display: flex; align-items: center; justify-content: center;
color: var(--tsk-primary-600); font-family: var(--tsk-font-mono); font-size: 12px; letter-spacing: .08em;
}
/* Definition list */
.detail-dl {
display: grid; grid-template-columns: 140px 1fr;
background: #fff; border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-lg); overflow: hidden; box-shadow: var(--tsk-sh-1);
}
.detail-dl dt, .detail-dl dd {
margin: 0; padding: 12px 16px;
border-bottom: 1px solid var(--tsk-ink-100); font-size: 13px;
}
.detail-dl dt { background: var(--tsk-bg-tint); font-weight: 700; color: var(--tsk-ink-700); }
.detail-dl dt:last-of-type, .detail-dl dd:last-child { border-bottom: 0; }
/* Content area */
.prose-content {
width: 100%;
max-width: none;
box-sizing: border-box;
background: #fff; border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-lg); padding: 24px 32px;
line-height: 1.85;
}
/* Section h2 in detail */
.detail-section h2 {
font-size: 20px; margin-bottom: 16px; padding-bottom: 12px;
border-bottom: 2px solid var(--tsk-primary-100); position: relative;
}
.detail-section h2::after {
content: ''; position: absolute; bottom: -2px; left: 0;
width: 36px; height: 2px; background: var(--tsk-primary-500); border-radius: 2px;
}
/* ----------------------------------------------------------------
STATIC PAGES
---------------------------------------------------------------- */
.static-page { padding-top: 40px; padding-bottom: 64px; }
.static-page h1 {
font-size: clamp(24px, 3vw, 36px);
margin-bottom: 32px; padding-bottom: 16px;
border-bottom: 2px solid var(--tsk-primary-100);
}
.prose {
background: #fff; border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-xl); padding: 40px 48px;
max-width: 68ch; box-shadow: var(--tsk-sh-1); line-height: 1.85;
}
.prose h2 {
font-size: 22px; margin-top: 32px; padding-top: 24px;
border-top: 1px solid var(--tsk-ink-100);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 18px; color: var(--tsk-primary-800); margin-top: 20px; }
.prose p { margin-bottom: 1.1em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 20px 0; }
.prose th, .prose td { border: 1px solid var(--tsk-ink-200); padding: 10px 14px; }
.prose th { background: var(--tsk-bg-tint); font-weight: 700; }
.prose blockquote { border-left: 4px solid var(--tsk-primary-300); margin-left: 0; padding: 12px 16px; background: var(--tsk-primary-50); border-radius: 0 var(--tsk-r-md) var(--tsk-r-md) 0; color: var(--tsk-ink-700); }
/* Static information pages: company / privacy / terms */
.prose--information {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.prose--information h2 {
position: relative;
margin-top: 44px;
margin-bottom: 20px;
padding: 0 0 12px;
border-top: 0;
border-bottom: 2px solid var(--tsk-primary-100);
}
.prose--information h2::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 36px;
height: 2px;
background: var(--tsk-primary-500);
border-radius: 2px;
}
.prose--information h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.prose--information h3 {
margin-top: 28px;
margin-bottom: 12px;
padding-left: 12px;
border-left: 4px solid var(--tsk-primary-400);
color: var(--tsk-ink-800);
}
.prose--information p,
.prose--information > ul,
.prose--information > ol {
max-width: 82ch;
}
.page--information .wp-block-table {
margin: 24px 0 32px;
}
.page--information .wp-block-table table {
margin: 0;
}
.page--information .wp-block-table tr:first-child > * {
border-top: 0;
}
.page--information .wp-block-table tr > * + * {
border-left: 1px solid var(--tsk-ink-100);
}
.page--information .wp-block-table th,
.page--information .wp-block-table td {
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.page--information .wp-block-table th {
width: 24%;
min-width: 160px;
font-weight: 700;
}
@media (max-width: 600px) {
.prose--information { max-width: none; }
.prose--information h2 { margin-top: 36px; }
.prose--information h3 { margin-top: 24px; }
.page--information .wp-block-table { margin-bottom: 24px; }
}
/* ----------------------------------------------------------------
REQUEST PAGE — adapter for plugin-generated tsg-* classes
(Kept for backward compatibility during transition)
---------------------------------------------------------------- */
.tsg-button { /* → .btn.btn--primary */ }
.tsg-button, button.tsg-button, a.tsg-button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--tsk-font-sans); font-weight: 700; font-size: 13px;
padding: 11px 20px; border-radius: var(--tsk-r-md);
border: 1.5px solid transparent; cursor: pointer;
text-decoration: none;
transition: all var(--tsk-dur-fast) var(--tsk-ease);
background: var(--tsk-primary-500); color: #fff; box-shadow: 0 2px 0 var(--tsk-primary-700);
}
.tsg-button:hover { background: var(--tsk-primary-600); transform: translateY(1px); box-shadow: 0 1px 0 var(--tsk-primary-700); text-decoration: none; color: #fff; }
.tsg-button--ghost { background: #fff; color: var(--tsk-primary-700); border-color: var(--tsk-primary-300); box-shadow: none; }
.tsg-button--ghost:hover { background: var(--tsk-primary-50); border-color: var(--tsk-primary-500); transform: none; box-shadow: none; color: var(--tsk-primary-700); }
.tsg-button[disabled], .tsg-button[aria-disabled="true"] { background: var(--tsk-ink-100); color: var(--tsk-ink-400); box-shadow: none; cursor: not-allowed; transform: none; opacity: .55; }
.tsg-inline-form { display: inline-flex; }
/* request page sections */
.tsg-container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.tsg-section { margin-top: 48px; }
.tsg-section-head { margin-bottom: 24px; }
.tsg-section-head h1 { font-size: clamp(24px, 3vw, 36px); }
.tsg-eyebrow { font-family: var(--tsk-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tsk-primary-600); margin: 0 0 8px; display: block; }
.tsg-request-box { background: #fff; border: 1px solid var(--tsk-ink-100); border-radius: var(--tsk-r-xl); padding: 32px; box-shadow: var(--tsk-sh-1); margin-bottom: 20px; }
.tsg-request-box h2 { font-size: 20px; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--tsk-primary-100); position: relative; }
.tsg-request-box h2::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 36px; height: 2px; background: var(--tsk-primary-500); border-radius: 2px; }
.tsg-request-box h3 { font-size: 17px; font-weight: 700; color: var(--tsk-ink-800); margin: 20px 0 12px; }
.tsg-complete-box { text-align: center; padding: 40px 32px; }
.tsg-complete-box h2 { font-size: 26px; color: var(--tsk-success-700); margin-bottom: 12px; }
.tsg-complete-box h2::after { display: none; }
.tsg-complete-box h3 { text-align: left; }
.tsg-request-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
/* Input form */
.tsg-input-form { display: flex; flex-direction: column; }
.tsg-input-form > label {
display: grid; grid-template-columns: 170px 1fr; gap: 20px;
align-items: start; padding: 18px 0; border-bottom: 1px solid var(--tsk-ink-100);
}
.tsg-input-form > label:last-of-type { border-bottom: 0; }
.tsg-input-form label > span { font-size: 13px; font-weight: 700; color: var(--tsk-ink-700); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 11px; }
.tsg-input-form label em { font-style: normal; font-family: var(--tsk-font-mono); font-size: 10px; font-weight: 700; background: var(--tsk-danger-bg); color: var(--tsk-danger-700); padding: 2px 5px; border-radius: var(--tsk-r-xs); }
.tsg-input-form input[type="text"],.tsg-input-form input[type="email"],.tsg-input-form input[type="tel"],.tsg-input-form select,.tsg-form-grid input,.tsg-form-grid select { font-family: var(--tsk-font-sans); font-size: 15px; color: var(--tsk-ink-900); background: #fff; border: 1.5px solid var(--tsk-ink-200); border-radius: var(--tsk-r-md); padding: 11px 14px; width: 100%; line-height: 1.4; transition: border-color var(--tsk-dur-fast), box-shadow var(--tsk-dur-fast); -webkit-appearance: none; appearance: none; }
.tsg-input-form input:focus,.tsg-input-form select:focus,.tsg-form-grid input:focus,.tsg-form-grid select:focus { outline: none; border-color: var(--tsk-primary-500); box-shadow: var(--tsk-sh-focus); }
.tsg-input-form select,.tsg-form-grid select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238E9999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.tsg-input-form input::placeholder { color: var(--tsk-ink-400); }
.tsg-input-form small { font-size: 12px; color: var(--tsk-ink-500); display: block; margin-top: 4px; }
.tsg-input-form > .tsg-button { align-self: flex-start; margin-top: 12px; }
.tsg-form-grid { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--tsk-ink-100); }
.tsg-input-form .tsg-form-grid { grid-column: 1/-1; display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 0; border-bottom: 0; }
.tsg-input-form .tsg-form-grid > label { display: flex; flex-direction: column; gap: 6px; padding: 0; border-bottom: 0; }
.tsg-input-form .tsg-form-grid > label > span { padding-top: 0; }
.tsg-form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 20px; border-top: 1px dashed var(--tsk-ink-200); margin-top: 20px; }
.tsg-definition-list { display: grid; grid-template-columns: 130px 1fr; background: #fff; border: 1px solid var(--tsk-ink-100); border-radius: var(--tsk-r-lg); overflow: hidden; box-shadow: var(--tsk-sh-1); }
.tsg-definition-list dt, .tsg-definition-list dd { margin: 0; padding: 11px 16px; border-bottom: 1px solid var(--tsk-ink-100); font-size: 13px; }
.tsg-definition-list dt { background: var(--tsk-bg-tint); font-weight: 700; color: var(--tsk-ink-700); }
.tsg-definition-list dt:last-of-type,.tsg-definition-list dd:last-child { border-bottom: 0; }
/* Request list/item presentation is owned by tsg-shiryo-manager/assets/css/request.css. */
.tsg-muted { color: var(--tsk-ink-500); font-size: 12px; }
/* Notices */
.tsg-notice { padding: 14px 18px; border-radius: var(--tsk-r-md); border-left: 4px solid var(--tsk-info-500); background: var(--tsk-info-bg); font-size: 13px; margin-bottom: 16px; }
.tsg-notice--warning { background: var(--tsk-warning-bg); border-color: var(--tsk-warning-500); color: var(--tsk-warning-700); }
.tsg-notice--with-action { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.tsg-error-box { background: var(--tsk-danger-bg); border: 1.5px solid var(--tsk-danger-500); border-left-width: 4px; border-radius: var(--tsk-r-md); padding: 14px 18px; margin-bottom: 16px; font-size: 13px; color: var(--tsk-danger-700); }
.tsg-error-box strong { display: block; margin-bottom: 8px; }
.tsg-error-box ul { margin: 0; padding-left: 1.5em; }
/* SP CTA */
.sp-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(255,255,255,.96); border-top: 1px solid var(--tsk-ink-100); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); backdrop-filter: blur(10px); }
/* ----------------------------------------------------------------
RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 900px) {
.detail-hero { grid-template-columns: 1fr; gap: 24px; }
.info-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.detail-dl { grid-template-columns: 110px 1fr; }
.filter-groups { grid-template-columns: 1fr 1fr; }
.sp-cta { display: block; }
.tsg-request-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.site-container { width: calc(100% - 32px); }
.site-hero { padding: 40px 0 32px; }
.filter-groups { grid-template-columns: 1fr; }
.result-bar { flex-direction: column; align-items: flex-start; }
.footer-grid { grid-template-columns: 1fr; }
.prose { padding: 24px 20px; }
.detail-dl { grid-template-columns: 1fr; }
.detail-dl dt { border-bottom: 0; padding-bottom: 4px; }
.tsg-form-actions { flex-direction: column; align-items: stretch; }
.tsg-form-actions .tsg-button, .tsg-form-actions .tsg-inline-form, .tsg-form-actions .tsg-inline-form button { width: 100%; }
.tsg-input-form > label { grid-template-columns: 1fr; gap: 6px; }
.tsg-input-form label > span { padding-top: 0; }
.tsg-input-form .tsg-form-grid { grid-template-columns: 1fr; }
.tsg-request-box { padding: 20px; }
.detail-hero { padding-top: 16px; }
.detail-hero h1 { font-size: 24px; }
.hero-h1 { font-size: 24px; }
}
/* ----------------------------------------------------------------
BUTTON STATES / SECONDARY ACTIONS
---------------------------------------------------------------- */
/* Make secondary actions visible on white and pale backgrounds. */
.btn--secondary,
.tsg-button--ghost,
.section-tint .btn--secondary,
.site-band .btn--secondary {
background: var(--tsk-primary-50);
color: var(--tsk-primary-800, var(--tsk-primary-700));
border-color: var(--tsk-primary-400);
box-shadow: 0 1px 0 var(--tsk-primary-200);
}
.btn--secondary:hover,
.tsg-button--ghost:hover,
.section-tint .btn--secondary:hover,
.site-band .btn--secondary:hover {
background: var(--tsk-primary-100);
border-color: var(--tsk-primary-600);
color: var(--tsk-primary-800, var(--tsk-primary-700));
}
/* Keep linked terms visually identical to tags, but clearly interactive. */
a.tag,
a.badge,
.tag--link {
text-decoration: none;
border: 1px solid transparent;
}
a.tag:hover,
a.badge:hover,
.tag--link:hover {
border-color: currentColor;
filter: saturate(1.08);
text-decoration: none;
}
/* Applied-filter chips are links. */
.applied-filters a.chip {
text-decoration: none;
}
.applied-filters a.chip:hover {
color: #fff;
}
/* Add safe vertical rhythm where templates use adjacent modules. */
.site-section + .site-section,
.detail-section + .detail-section,
.detail-section + .section-tint,
.section-tint + .detail-section,
.result-bar + form,
.result-bar + .tsg-inline-form,
.result-bar + .tsg-selected-request-block,
.tsg-selected-request-block + .alert,
.tsg-inline-form + .alert,
.alert + .card-grid,
.search-form-wrap + .result-bar {
margin-top: 24px;
}
.detail-section {
margin-bottom: 32px;
}
.info-grid.detail-section {
margin-bottom: 32px;
}
.card__body > * + * {
margin-top: 10px;
}
.card__body > .card__footer {
margin-top: 16px;
}
.card--vert .card__body > .card__footer {
margin-top: auto;
}
/* Front search filters are open by default; give the contents enough separation. */
.filter-toggle-details[open] .filter-groups {
margin-top: 12px;
}
.filter-group legend {
margin-bottom: 8px;
padding: 0 4px;
font-family: var(--tsk-font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
color: var(--tsk-primary-700);
}
/* ----------------------------------------------------------------
SEARCH / SELECTED REQUESTS AND FILTER TOOLBAR
---------------------------------------------------------------- */
.search-form-wrap > .filter-groups {
margin-top: 16px;
}
.tsg-selected-request-block {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 10px 0 20px;
padding: 10px 12px;
border: 1px solid var(--tsk-primary-100);
border-radius: var(--tsk-r-md, 12px);
background: var(--tsk-bg-tint);
box-shadow: none;
}
.tsg-selected-request-block__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 0;
flex: 1 1 auto;
min-width: 0;
}
.tsg-selected-request-block__text {
display: flex;
flex-direction: column;
gap: 0;
min-width: 180px;
color: var(--tsk-ink-800);
}
.tsg-selected-request-block__text strong {
font-size: 13px;
}
.tsg-selected-request-block__text span {
font-size: 12px;
color: var(--tsk-ink-600);
}
.tsg-selected-request-block__tools {
display: flex;
flex: 0 0 auto;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-end;
gap: 8px;
}
.tsg-selected-request-form .tsg-button[disabled] {
opacity: .55;
cursor: not-allowed;
filter: grayscale(.15);
}
.tsg-selected-request-form.has-selection .tsg-button {
box-shadow: 0 8px 18px rgba(15, 118, 110, .18);
}
.request-select {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 8px 10px;
border: 1px solid var(--tsk-primary-200);
border-radius: var(--tsk-r-md, 12px);
background: #fff;
color: var(--tsk-ink-800);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.request-select:hover {
border-color: var(--tsk-primary-400);
background: var(--tsk-primary-50);
}
.request-select input {
width: 16px;
height: 16px;
accent-color: var(--tsk-primary-600);
flex: 0 0 auto;
}
.request-select:has(input:checked) {
border-color: var(--tsk-primary-500);
background: var(--tsk-primary-50);
box-shadow: inset 0 0 0 1px var(--tsk-primary-300);
}
.request-select.is-disabled {
background: var(--tsk-ink-50, #f5f5f5);
color: var(--tsk-ink-500);
border-color: var(--tsk-ink-200, #e2e2e2);
cursor: not-allowed;
}
.request-select.is-disabled input {
cursor: not-allowed;
}
/* ----------------------------------------------------------------
SEARCH / FORM HEADER AND RESULT CONTROLS
---------------------------------------------------------------- */
.search-form-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--tsk-ink-100);
}
.search-form-head__label {
display: block;
margin-bottom: 4px;
font-family: var(--tsk-font-display);
font-size: 17px;
font-weight: 700;
color: var(--tsk-ink-900);
}
.search-form-head p {
margin: 0;
font-size: 13px;
line-height: 1.7;
color: var(--tsk-ink-600);
}
.search-keyword-block {
display: flex;
flex-direction: column;
gap: 8px;
}
.search-field-label {
font-family: var(--tsk-font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
color: var(--tsk-primary-700);
}
.search-form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
padding-top: 16px;
border-top: 1px solid var(--tsk-ink-100);
}
.search-submit-btn {
flex: 1 1 auto;
min-width: 180px;
}
.search-form-clear {
display: inline-block;
flex: 0 0 auto;
min-width: max-content;
white-space: nowrap;
word-break: keep-all;
font-size: 13px;
font-weight: 700;
color: var(--tsk-ink-600);
text-decoration: underline;
}
.search-form-clear:hover {
color: var(--tsk-primary-700);
}
.result-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 22px 0 10px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.result-toolbar--simple {
margin-top: 18px;
}
.result-summary {
display: flex;
align-items: baseline;
gap: 5px;
min-width: 0;
color: var(--tsk-ink-700);
}
.result-summary__label {
margin-right: 4px;
font-size: 12px;
font-weight: 700;
color: var(--tsk-ink-500);
}
.result-summary strong {
font-family: var(--tsk-font-display);
font-size: 24px;
line-height: 1;
color: var(--tsk-primary-700);
}
.result-summary__breakdown {
margin-left: 8px;
font-size: 12px;
color: var(--tsk-ink-500);
white-space: nowrap;
}
.result-toolbar .view-switcher {
flex: 0 0 auto;
}
.tsg-selected-request-block .tsg-selected-request-form {
flex: 0 0 auto;
}
.tsg-selected-request-form .tsg-button {
min-height: 38px;
padding: 9px 14px;
font-size: 12px;
white-space: nowrap;
}
.tsg-button__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: rgba(255,255,255,.22);
font-family: var(--tsk-font-mono);
font-size: 11px;
}
.tsg-selected-request-form .tsg-button[disabled] .tsg-button__count,
.tsg-selected-request-form .tsg-button[aria-disabled="true"] .tsg-button__count {
background: rgba(0,0,0,.06);
}
.detail-term-groups {
display: grid;
gap: 10px;
margin: 0 0 18px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.detail-term-group {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
align-items: start;
gap: 12px;
}
.detail-term-label {
display: inline-flex;
align-items: center;
justify-content: flex-start;
min-height: 28px;
padding: 3px 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--tsk-ink-500);
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: .04em;
white-space: nowrap;
}
.detail-term-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.detail-term-chip {
border-radius: var(--tsk-r-xs);
padding: 5px 10px;
font-size: 12px;
line-height: 1.2;
}
.detail-term-chip--type {
background: var(--tsk-ink-100);
color: var(--tsk-ink-700);
border: 1px solid var(--tsk-ink-100);
}
.detail-term-chip--area,
.tag.card-term-area.detail-term-chip--area {
background: var(--tsk-info-bg);
color: var(--tsk-info-700);
border: 1px solid var(--tsk-info-500);
}
.detail-term-chip--feature {
background: var(--tsk-primary-50);
color: var(--tsk-primary-800);
border: 1px solid var(--tsk-primary-100);
}
.result-toolbar + .tsg-selected-request-block,
.result-bar + .tsg-selected-request-block {
margin-top: 8px;
}
.tsg-selected-request-block + .alert,
.tsg-selected-request-block + .card-grid,
.tsg-selected-request-block + .tsg-card-grid {
margin-top: 18px;
}
@media (max-width: 760px) {
.search-form-wrap {
padding: 18px;
}
.search-form-head,
.search-form-actions,
.result-toolbar,
.tsg-selected-request-block,
.tsg-selected-request-block__head {
align-items: stretch;
flex-direction: column;
}
.search-submit-btn,
.search-form-actions .btn {
width: 100%;
}
.filter-group {
padding: 12px;
}
.result-summary {
flex-wrap: wrap;
}
.result-summary__breakdown {
width: 100%;
margin-left: 0;
}
.result-toolbar .view-switcher {
width: 100%;
overflow-x: auto;
}
.tsg-selected-request-block .tsg-selected-request-form,
.tsg-selected-request-form .tsg-button {
width: 100%;
}
.tsg-selected-request-block__tools {
flex-wrap: wrap;
justify-content: flex-start;
}
.detail-term-group {
grid-template-columns: 1fr;
gap: 5px;
}
.detail-term-label {
justify-self: flex-start;
padding: 0 10px;
}
}
/* ----------------------------------------------------------------
REQUEST PAGE v4.0.4 — plugin shortcode layout adapter
---------------------------------------------------------------- */
.tsg-request-page {
width: min(1200px, calc(100% - 40px));
margin-inline: auto;
padding: 44px 0 72px;
}
.tsg-request-header {
margin: 0 0 24px;
}
.tsg-request-header .tsg-kicker,
.tsg-kicker {
display: block;
margin: 0 0 8px;
font-family: var(--tsk-font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
line-height: 1.2;
text-transform: uppercase;
color: var(--tsk-primary-600);
}
.tsg-request-header h1 {
margin: 0 0 10px;
font-size: clamp(26px, 4vw, 40px);
line-height: 1.25;
}
.tsg-request-header p:last-child {
max-width: 68ch;
color: var(--tsk-ink-700);
font-weight: 700;
}
.tsg-alert {
margin: 0 0 16px;
padding: 13px 16px;
border-radius: var(--tsk-r-md);
border: 1px solid var(--tsk-info-500);
border-left-width: 5px;
background: var(--tsk-info-bg);
color: var(--tsk-info-700);
font-size: 13px;
font-weight: 700;
}
.tsg-alert--success {
border-color: var(--tsk-success-500);
background: var(--tsk-success-bg);
color: var(--tsk-success-700);
}
.tsg-alert--error {
border-color: var(--tsk-danger-500);
background: var(--tsk-danger-bg);
color: var(--tsk-danger-700);
}
.tsg-alert--info {
border-color: var(--tsk-info-500);
background: var(--tsk-info-bg);
color: var(--tsk-info-700);
}
.tsg-request-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px dashed var(--tsk-ink-200);
}
.tsg-request-actions form {
margin: 0;
}
.tsg-request-box > .tsg-request-list:last-child,
.tsg-request-box > p:last-child {
margin-bottom: 0;
}
.tsg-input-form .tsg-form-grid + label {
border-top: 0;
}
.tsg-request-page .tsg-definition-list {
margin-bottom: 18px;
}
.tsg-request-page form .tsg-button + .tsg-button,
.tsg-request-page form .tsg-button + button.tsg-button {
margin-left: 8px;
}
@media (max-width: 760px) {
.tsg-request-page {
width: calc(100% - 32px);
padding-top: 28px;
}
.tsg-request-header h1 {
font-size: 26px;
}
.tsg-request-actions,
.tsg-request-actions .tsg-button,
.tsg-request-actions .tsg-inline-form,
.tsg-request-actions .tsg-inline-form button {
width: 100%;
}
.tsg-request-page form .tsg-button + .tsg-button,
.tsg-request-page form .tsg-button + button.tsg-button {
margin-left: 0;
margin-top: 8px;
}
}
/* ================================================================
CARDS / MEDIA / SELECTION / DETAIL REQUEST BAND
================================================================ */
/* No.6 — 校種ラベルと学校名の間に余白 */
.card__meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
/* No.6 — ボタン高さ揃え */
.card__footer .btn {
height: 36px;
padding-top: 0;
padding-bottom: 0;
display: inline-flex;
align-items: center;
}
/* No.6 — エリアタームを独立した体裁に（タグとは異なるバッジスタイル） */
.tag.card-term-area,
a.tag.card-term-area {
background: var(--tsk-info-bg);
color: var(--tsk-info-700);
border: 1px solid var(--tsk-info-500);
border-radius: var(--tsk-r-xs);
font-size: 11px;
padding: 3px 8px;
}
.tag.card-term-area:hover,
a.tag.card-term-area:hover {
background: var(--tsk-info-500);
color: #fff;
}
/* ---------------------------------------------------------------
No.13 — YouTube動画: アスペクト比維持・中央配置
--------------------------------------------------------------- */
.tsg-youtube-wrap {
margin: 0 auto 32px;
max-width: 720px;
}
.tsg-youtube-wrap .tsg-youtube-inner {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--tsk-r-lg);
border: 1px solid var(--tsk-ink-100);
}
.tsg-youtube-wrap .tsg-youtube-inner iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ---------------------------------------------------------------
No.1 — 選択ツールバー: ボタンを横並び・高さ統一
--------------------------------------------------------------- */
.tsg-selected-request-block__tools .tsg-button,
.tsg-selected-request-block__tools button,
.tsg-selected-request-block__tools .tsg-inline-form .tsg-button {
height: 38px;
padding-top: 0;
padding-bottom: 0;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.tsg-selected-request-block__tools .tsg-inline-form {
display: inline-flex;
}
/* ---------------------------------------------------------------
No.2 — 検索結果ページのアラートを通常テキストに
--------------------------------------------------------------- */
.search-results-notice {
font-size: 13px;
color: var(--tsk-ink-600);
margin: 12px 0;
line-height: 1.7;
}
/* ---------------------------------------------------------------
No.3 — ページネーション
--------------------------------------------------------------- */
.tsg-pagination {
display: flex;
justify-content: center;
margin-top: 40px;
padding-bottom: 24px;
}
/* ---------------------------------------------------------------
No.8 — パンくず直下の「無料資料請求リストに追加」エリア
--------------------------------------------------------------- */
.detail-request-band {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 20px;
background: var(--tsk-bg-tint);
border: 1px solid var(--tsk-primary-100);
border-radius: var(--tsk-r-md);
margin-bottom: 20px;
}
.detail-request-band__label {
font-size: 13px;
color: var(--tsk-ink-700);
font-weight: 700;
}
.detail-request-band__actions {
display: flex;
gap: 10px;
align-items: center;
flex-shrink: 0;
}
/* ---------------------------------------------------------------
レスポンシブ補完
--------------------------------------------------------------- */
@media (max-width: 760px) {
.detail-request-band {
flex-direction: column;
align-items: flex-start;
}
.detail-request-band__actions {
width: 100%;
flex-direction: column;
}
.detail-request-band__actions .btn,
.detail-request-band__actions .tsg-button {
width: 100%;
justify-content: center;
}
}
/* ================================================================
DETAIL CTA / GALLERY PRESENTATION
================================================================ */
/* Keep orange CTA readable on hover. Global a:hover otherwise turns text green. */
.btn--accent,
.btn--accent:visited,
.btn--accent:hover,
.btn--accent:focus-visible,
.btn--accent:hover * {
color: #fff;
text-decoration: none;
}
.btn--accent svg,
.btn--accent:hover svg {
color: #fff;
stroke: currentColor;
}
/* Detail: keep the gallery column full width. */
.detail-hero > div:last-child {
width: 100%;
}
.detail-address-line {
margin: 0 0 18px;
color: var(--tsk-ink-700);
font-size: 14px;
line-height: 1.8;
}
/* ================================================================
SEARCH / COMPACT FINDER
================================================================ */
.search-form-wrap--finder {
gap: 16px;
padding: 20px;
}
.search-form-wrap--finder .search-form-head {
padding-bottom: 12px;
}
.search-form-wrap--finder .search-form-head__label {
font-size: 18px;
}
.search-form-wrap--finder .search-keyword-block {
gap: 7px;
}
.search-form-wrap--finder .search-keyword-row {
min-height: 44px;
}
.search-quick-groups {
display: grid;
grid-template-columns: minmax(260px, .85fr) minmax(320px, 1.15fr);
gap: 14px;
align-items: stretch;
}
.search-quick-groups .filter-group,
.filter-groups--details .filter-group {
margin: 0;
}
.search-quick-groups .chips-row {
max-height: none;
overflow: visible;
}
.search-details {
border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-md);
background: #fff;
padding: 0;
}
.search-details summary {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
border-radius: var(--tsk-r-md);
color: var(--tsk-primary-700);
font-size: 13px;
font-weight: 700;
cursor: pointer;
list-style: none;
user-select: none;
}
.search-details summary::-webkit-details-marker { display: none; }
.search-details .summary-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--tsk-primary-50);
border: 1px solid var(--tsk-primary-200);
line-height: 1;
}
.search-details[open] .summary-plus {
transform: rotate(45deg);
}
.search-details .filter-groups--details {
padding: 0 14px 14px;
border-top: 1px solid var(--tsk-ink-100);
margin-top: 0;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
gap: 14px;
}
.search-form-wrap--finder .filter-group {
padding: 12px;
background: var(--tsk-ink-50, #f8faf9);
}
.search-form-wrap--finder .filter-group legend {
font-family: var(--tsk-font-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
color: var(--tsk-ink-800);
padding: 0 2px;
}
.search-form-wrap--finder .chip--check::before {
content: none;
display: none;
}
.search-form-wrap--finder .chip--check.is-on::after {
content: "✓";
font-weight: 900;
line-height: 1;
}
.search-form-wrap--finder .chip {
padding: 7px 12px;
font-size: 13px;
}
.search-form-wrap--finder .filter-groups--details .chips-row {
max-height: 112px;
overflow-y: auto;
}
.search-form-wrap--finder.search-form-actions {
padding-top: 14px;
}
.search-form-wrap--finder .search-submit-btn {
flex: 1 1 auto;
min-width: 0;
}
@media (max-width: 900px) {
.search-quick-groups,
.search-details .filter-groups--details {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.search-form-wrap--finder {
padding: 16px;
gap: 14px;
}
.search-form-wrap--finder .search-form-head,
.search-form-wrap--finder.search-form-actions {
align-items: stretch;
flex-direction: column;
}
.search-form-wrap--finder .search-form-actions .btn,
.search-form-wrap--finder .search-submit-btn {
width: 100%;
min-width: 0;
justify-content: center;
}
.search-form-wrap--finder .search-keyword-row {
border-radius: var(--tsk-r-md);
}
}
.search-quick-groups .filter-group:only-child {
grid-column: 1 / -1;
}
.filter-groups--details .filter-group:only-child {
grid-column: 1 / -1;
}
/* ================================================================
Content Manager: guide / Q&A articles
================================================================ */
.content-archive .section-head h1,
.content-detail__header h1 {
line-height: 1.38;
letter-spacing: .02em;
}
.content-list {
display: grid;
gap: 18px;
}
.content-card {
display: grid;
grid-template-columns: minmax(180px, 32%) 1fr;
gap: 20px;
padding: 18px;
background: #fff;
border: 1px solid var(--tsk-border-subtle);
border-radius: var(--tsk-r-xl);
box-shadow: var(--tsk-sh-1);
}
.content-card__thumb {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--tsk-r-lg);
background: var(--tsk-bg-tint);
color: var(--tsk-ink-400);
text-decoration: none;
}
.content-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.content-card__placeholder {
display: grid;
width: 100%;
height: 100%;
place-items: center;
font-family: var(--tsk-font-mono);
font-size: 12px;
letter-spacing: .08em;
}
.content-card__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
}
.content-card__date,
.content-detail__meta {
margin: 0;
color: var(--tsk-ink-500);
font-size: var(--tsk-fs-xs);
font-family: var(--tsk-font-mono);
letter-spacing: .04em;
}
.content-card h3 {
margin: 0;
font-size: var(--tsk-fs-lg);
line-height: 1.5;
}
.content-card h3 a {
color: var(--tsk-ink-900);
text-decoration: none;
}
.content-card h3 a:hover { color: var(--tsk-primary-700); }
.content-card__excerpt {
margin: 0;
color: var(--tsk-ink-600);
font-size: var(--tsk-fs-sm);
line-height: 1.75;
}
.content-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.content-tags a {
display: inline-flex;
align-items: center;
border-radius: var(--tsk-r-pill);
background: var(--tsk-primary-50);
border: 1px solid var(--tsk-primary-100);
color: var(--tsk-primary-700);
padding: 5px 10px;
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
.content-tags a:hover { background: var(--tsk-primary-100); }
.content-detail {
max-width: 900px;
}
.content-detail__nav {
margin-bottom: 22px;
font-size: var(--tsk-fs-sm);
}
.content-detail__nav--bottom {
margin-top: 26px;
margin-bottom: 0;
text-align: center;
}
.content-detail__header {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--tsk-border-subtle);
}
.content-detail__header h1 {
font-size: clamp(26px, 3.2vw, 36px);
margin: 0 0 12px;
}
.content-detail__eyecatch {
margin: 0 0 28px;
border-radius: var(--tsk-r-xl);
overflow: hidden;
background: var(--tsk-bg-tint);
}
.content-detail__eyecatch img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.content-detail__body {
background: #fff;
border: 1px solid var(--tsk-border-subtle);
border-radius: var(--tsk-r-xl);
padding: clamp(22px, 3vw, 38px);
box-shadow: 0 6px 22px rgba(28,32,32,.06);
}
.content-components > * + * { margin-top: 22px; }
.content-components > .cc-heading:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.cc-heading {
color: var(--tsk-ink-900);
line-height: 1.55;
letter-spacing: .02em;
}
.cc-heading--h2 {
margin-top: 42px;
padding-top: 24px;
border-top: 1px solid var(--tsk-border-subtle);
font-size: clamp(22px, 2.4vw, 26px);
}
.cc-heading--h3 {
margin-top: 32px;
font-size: clamp(19px, 2vw, 22px);
}
.cc-heading--h4 {
margin-top: 28px;
font-size: var(--tsk-fs-md);
}
.cc-text {
color: var(--tsk-ink-800);
line-height: 1.95;
}
.cc-text p { margin: 0 0 1em; }
.cc-text p:last-child { margin-bottom: 0; }
.cc-image,
.cc-embed {
margin-left: 0;
margin-right: 0;
}
.cc-image img {
display: block;
border-radius: var(--tsk-r-lg);
width: 100%;
height: auto;
}
.cc-image figcaption,
.cc-embed figcaption,
.cc-quote figcaption {
margin-top: 8px;
color: var(--tsk-ink-500);
font-size: var(--tsk-fs-xs);
line-height: 1.7;
}
.cc-embed__inner {
position: relative;
overflow: hidden;
border-radius: var(--tsk-r-lg);
background: var(--tsk-ink-900);
}
.cc-embed__inner iframe,
.cc-embed__inner embed,
.cc-embed__inner object {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
min-height: 260px;
border: 0;
}
.cc-list {
margin-left: 0;
padding: 18px 22px 18px 2.1em;
background: var(--tsk-bg-tint);
border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-lg);
line-height: 1.85;
}
.cc-list li + li { margin-top: 8px; }
.cc-list--ordered_list { padding-left: 2.4em; }
.cc-quote {
margin-left: 0;
margin-right: 0;
padding: 22px 24px;
border-left: 5px solid var(--tsk-primary-400);
background: var(--tsk-primary-50);
border-radius: 0 var(--tsk-r-lg) var(--tsk-r-lg) 0;
}
.cc-quote blockquote {
margin: 0;
color: var(--tsk-ink-800);
font-size: var(--tsk-fs-md);
line-height: 1.85;
}
.cc-table-wrap,
.prose--information .wp-block-table {
overflow-x: auto;
border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-lg);
background: #fff;
}
.cc-table,
.prose--information .wp-block-table table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
background: #fff;
font-size: var(--tsk-fs-sm);
}
.cc-table caption {
caption-side: top;
text-align: left;
padding: 12px 14px;
font-weight: 700;
color: var(--tsk-ink-800);
}
.cc-table th,
.cc-table td,
.prose--information .wp-block-table th,
.prose--information .wp-block-table td {
border-top: 1px solid var(--tsk-ink-100);
padding: 12px 14px;
text-align: left;
vertical-align: top;
line-height: 1.75;
}
.cc-table th,
.prose--information .wp-block-table th {
background: var(--tsk-bg-tint);
color: var(--tsk-ink-800);
}
.cc-note {
padding: 20px 22px;
border-radius: var(--tsk-r-lg);
border: 1px solid var(--tsk-primary-200);
background: var(--tsk-primary-50);
}
.cc-note--warning {
border-color: #F6C895;
background: #FEF5EC;
}
.cc-note h3 {
font-size: var(--tsk-fs-md);
margin: 0 0 6px;
}
.cc-note p { margin: 0; line-height: 1.8; }
.cc-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
padding: 22px;
border-radius: var(--tsk-r-xl);
background: var(--tsk-bg-tint);
border: 1px solid var(--tsk-primary-100);
}
.cc-cta p {
margin: 0;
color: var(--tsk-ink-700);
line-height: 1.8;
}
.content-share {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 24px;
padding: 14px 0;
border-top: 1px solid var(--tsk-border-subtle);
border-bottom: 1px solid var(--tsk-border-subtle);
}
.content-share span {
color: var(--tsk-ink-500);
font-size: var(--tsk-fs-xs);
font-weight: 700;
}
.content-share a,
.content-share button,
.content-prevnext a {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--tsk-ink-200);
border-radius: var(--tsk-r-pill);
background: #fff;
color: var(--tsk-ink-700);
min-height: 34px;
padding: 7px 12px;
font-size: var(--tsk-fs-xs);
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
.content-share a:hover,
.content-share button:hover,
.content-prevnext a:hover {
border-color: var(--tsk-primary-400);
color: var(--tsk-primary-700);
background: var(--tsk-primary-50);
}
.content-prevnext {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 24px;
}
.content-home-latest__more {
margin-top: 24px;
text-align: center;
}
.content-home-qa { margin-bottom: 48px; }
.content-home-qa__panel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.content-home-qa__title {
font-size: 20px;
margin-bottom: 8px;
}
.content-home-qa__copy {
color: var(--tsk-ink-600);
font-size: 13px;
}
.qa-section + .qa-section { margin-top: 42px; }
.qa-section h2 {
font-size: clamp(20px, 2.2vw, 24px);
margin-bottom: 16px;
}
.qa-list {
display: grid;
gap: 10px;
}
.qa-list__item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-lg);
color: var(--tsk-ink-900);
text-decoration: none;
box-shadow: var(--tsk-sh-1);
}
.qa-list__item:hover {
border-color: var(--tsk-primary-300);
background: var(--tsk-primary-50);
}
.qa-list__item span,
.qa-answer__label,
.qa-detail__header h1 span {
color: var(--tsk-primary-700);
font-family: var(--tsk-font-display);
font-weight: 900;
}
.qa-detail__header h1 {
display: flex;
gap: 12px;
align-items: flex-start;
}
.qa-answer {
background: #fff;
border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-xl);
padding: clamp(22px, 3vw, 38px);
box-shadow: var(--tsk-sh-1);
}
.qa-answer__label {
font-size: clamp(22px, 2.4vw, 26px);
margin: 0 0 8px;
}
.qa-answer__lead {
font-size: var(--tsk-fs-md);
color: var(--tsk-ink-800);
font-weight: 700;
line-height: 1.8;
margin-bottom: 24px;
}
@media (max-width: 760px) {
.content-card { grid-template-columns: 1fr; }
.content-detail__body,
.qa-answer { padding: 22px 18px; }
.content-prevnext { flex-direction: column; }
.cc-embed__inner iframe { min-height: 200px; }
}
/* ================================================================
DETAIL / ACCESS METADATA AND SOCIAL LINKS
================================================================ */
.detail-access-info {
display: grid;
gap: 8px;
}
.detail-access-info__line {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 10px;
align-items: baseline;
}
.detail-access-info__line span {
color: var(--tsk-ink-500, #8e9999);
font-size: 12px;
font-weight: 700;
line-height: 1.6;
}
.detail-access-info__line b {
color: var(--tsk-ink-800, #2c3939);
font-size: 14px;
font-weight: 500;
line-height: 1.7;
}
.detail-access-info__note {
margin: 4px 0 0;
padding: 10px 12px;
border-radius: var(--tsk-r-sm, 8px);
background: var(--tsk-bg-tint, #f4faf8);
color: var(--tsk-ink-600, #556262);
font-size: 13px;
line-height: 1.8;
}
.detail-social-icons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.detail-social-icons__link {
width: 38px;
height: 38px;
border: 1px solid var(--tsk-ink-200, #d4dcdb);
border-radius: 999px;
display: inline-grid;
place-items: center;
background: #fff;
color: var(--tsk-ink-700, #3f4d4d);
text-decoration: none;
transition: border-color var(--tsk-dur-fast, 120ms) var(--tsk-ease, ease), color var(--tsk-dur-fast, 120ms) var(--tsk-ease, ease), background-color var(--tsk-dur-fast, 120ms) var(--tsk-ease, ease), transform var(--tsk-dur-fast, 120ms) var(--tsk-ease, ease);
}
.detail-social-icons__link:hover,
.detail-social-icons__link:focus-visible {
border-color: var(--tsk-primary-500, #57C88A);
background: var(--tsk-primary-50, #eef8f6);
color: var(--tsk-primary-700, #0b5a55);
text-decoration: none;
transform: translateY(-1px);
}
.detail-social-icons__link svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.detail-social-icons__link span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@media (max-width: 600px) {
.detail-access-info__line {
grid-template-columns: 1fr;
gap: 2px;
}
}
/* ================================================================
GUIDE ARCHIVE / SEARCH AND TAG FILTER
通信制高校について一覧のキーワード検索・ハッシュタグ絞り込み。
学校検索UIの共通語彙を利用し、記事一覧固有の余白だけこのブロックで管理する。
================================================================ */
.content-filter-form {
margin: 24px 0 28px;
}
.content-filter-form .filter-group {
margin-top: 16px;
}
.content-filter-form .chips-row {
max-height: none;
overflow: visible;
}
.content-filter-form + .result-toolbar,
.result-toolbar--guide {
margin-top: 0;
}
.content-filter-form + .content-list {
margin-top: 24px;
}
.content-filter-form.search-form-actions {
border-top: 1px solid var(--tsk-ink-100);
}
.empty--guide-filtered {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.empty--guide-filtered .empty__sub {
margin: 0;
color: var(--tsk-ink-600);
font-size: 14px;
}
/* Final spec: pickup listing label */
.badge--pickup {
background: var(--tsk-warning-500, #F6A21A);
color: #111;
border: 1px solid rgba(0,0,0,.12);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
/* Final polish: pickup badge role differentiation
- Match school/campus badge sizing.
- Show pickup as a status badge, not another content-type badge. */
.card__media .badge--pickup {
display: inline-flex;
align-items: center;
gap: 5px;
padding-top: 2px;
padding-bottom: 2px;
background: rgba(246, 162, 26, 0.12);
color: #A85B00;
border: 1px solid currentColor;
box-shadow: none;
text-shadow: none;
}
.card__media .badge--pickup::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
flex: 0 0 auto;
}
/* Final label height fix: keep PICK UP the same outer height as school/campus labels. */
.card__media .badge,
.card__media .badge--pickup {
box-sizing: border-box;
height: calc(1.2em + 6px);
line-height: 1.2;
display: inline-flex;
align-items: center;
}
/* Card request UX: conversion CTA keeps its readable size and receives the wider column. */
.card--vert .card__footer > .btn,
.card--vert .card__footer > .tsg-inline-form,
.card--vert .card__footer .tsg-button {
width: 100%;
min-width: 0;
margin: 0;
}
.card--vert .card__footer > .btn:only-child {
grid-column: 1 / -1;
}
.card--vert .card__footer > .btn,
.card--vert .card__footer .tsg-button {
height: 100%;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
padding-left: 11px;
padding-right: 11px;
text-align: center;
line-height: 1.35;
white-space: nowrap;
}
.request-select,
.tsg-selected-request-form,
[data-tsg-select-clear] { display: none; }
@media (max-width: 1180px) {
.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.card--vert .card__footer { grid-template-columns: 1fr; }
}
/* Supplied brand mark: retain the existing 36px footprint without adding a second background tile. */
.site-logo__mark--brand {
background: transparent;
box-shadow: none;
border-radius: 0;
}
.site-logo__mark--brand img {
display: block;
width: 36px;
height: 36px;
object-fit: contain;
}
/* ================================================================
MOBILE / REQUEST NAVIGATION AND DETAIL CONTROLS
================================================================ */
/* Count badges remain in the DOM at zero; Ajax toggles the native hidden attribute. */
[data-tsg-cart-link] {
position: relative;
}
.cart-count--mobile-nav {
position: static;
flex: 0 0 auto;
border-color: rgba(255,255,255,.96);
}
/* Smartphone fixed request CTA: count is a badge, never inline text. */
.sp-cta__button {
position: relative;
min-height: 54px;
justify-content: center;
}
.sp-cta__label {
display: block;
white-space: nowrap;
}
.sp-cta__count {
top: -7px;
right: -7px;
min-width: 22px;
height: 22px;
font-size: 11px;
border-width: 2px;
}
@media (max-width: 600px) {
/* Detail-page request controls no longer outrank the page title. */
.detail-request-band {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 52px;
padding: 8px 10px 8px 12px;
margin-bottom: 14px;
border-color: var(--tsk-primary-100);
border-radius: var(--tsk-r-md);
background: rgba(240, 249, 247, .72);
box-shadow: none;
}
.detail-request-band__label {
min-width: 0;
overflow: hidden;
color: var(--tsk-ink-700);
font-size: 12px;
line-height: 1.45;
text-overflow: ellipsis;
white-space: nowrap;
}
.detail-request-band__actions {
width: auto;
min-width: 0;
flex-direction: row;
flex: 0 0 auto;
gap: 0;
}
.detail-request-band__actions > a.btn {
display: none;
}
.detail-request-band__actions .tsg-inline-form {
width: auto;
min-width: 0;
}
.detail-request-band__actions .tsg-button {
width: auto;
min-width: 0;
min-height: 38px;
padding: 7px 11px;
border: 1.5px solid var(--tsk-primary-400);
border-radius: var(--tsk-r-pill);
background: #fff;
color: var(--tsk-primary-800);
box-shadow: none;
font-size: 0;
line-height: 1;
white-space: nowrap;
transform: none;
}
.detail-request-band__actions .tsg-button::before {
content: '＋ リストに追加';
font-family: var(--tsk-font-sans);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.detail-request-band__actions .tsg-button:hover,
.detail-request-band__actions .tsg-button:focus-visible {
border-color: var(--tsk-primary-600);
background: var(--tsk-primary-50);
color: var(--tsk-primary-800);
box-shadow: 0 0 0 3px rgba(22,147,137,.12);
}
.detail-request-band__actions .tsg-button--in-cart,
.detail-request-band__actions .tsg-button--submitted,
.detail-request-band__actions .tsg-button[disabled],
.detail-request-band__actions .tsg-button[aria-disabled='true'] {
border-color: var(--tsk-ink-200);
background: var(--tsk-ink-50, #f5f7f7);
color: var(--tsk-ink-500);
box-shadow: none;
}
.detail-request-band__actions .tsg-button[aria-busy='true']::before {
content: '追加中…';
}
.detail-request-band__actions .tsg-button--in-cart::before {
content: '追加済み';
}
.detail-request-band__actions .tsg-button--submitted::before {
content: '請求済み';
}
/* School type, area and features share one compact attribute block. */
.detail-term-groups {
display: grid;
gap: 8px;
margin: 16px 0 4px;
padding: 12px;
border: 1px solid var(--tsk-primary-100);
border-radius: var(--tsk-r-md);
background: rgba(255,255,255,.58);
}
.detail-term-group {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
align-items: start;
gap: 8px;
}
.detail-term-label {
min-height: 24px;
padding: 4px 0 0;
color: var(--tsk-ink-500);
font-size: 11px;
line-height: 1.35;
}
.detail-term-tags {
gap: 5px 6px;
}
.detail-term-chip {
padding: 4px 8px;
font-size: 11px;
line-height: 1.25;
}
}
@media (max-width: 370px) {
.detail-request-band {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
padding-left: 10px;
}
.detail-request-band__actions .tsg-button {
padding-inline: 9px;
}
.detail-request-band__actions .tsg-button::before {
content: '＋ 追加';
}
}
/* ----------------------------------------------------------------
BRAND LOGOTYPE — supplied SVG wordmark
---------------------------------------------------------------- */
.site-logo__wordmark {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
min-width: 0;
}
.site-logo__logotype {
display: block;
color: #1e2828;
line-height: 0;
}
.site-logo__logotype svg {
display: block;
width: auto;
height: 16px;
max-width: 100%;
overflow: visible;
}
.footer-logo .site-logo__logotype {
color: #fff;
}
@media (max-width: 600px) {
.site-logo__logotype svg {
height: 16px;
}
}
/* Header navigation refinement: remove Home link and widen quick search */
@media (min-width: 1101px) {
.header-search-form {
flex: 1 1 300px;
max-width: 480px;
}
.header-search-form input[type="search"] {
min-width: 180px;
}
}
/* ----------------------------------------------------------------
TYPE REFINEMENT — Basic theme 1.12.3.13
---------------------------------------------------------------- */
.hero-h1,
.page-title,
.section-title,
.card__title,
.branch-block h3,
.item__name,
.tsg-request-item__body h3 {
font-kerning: normal;
font-feature-settings: "palt" 1;
letter-spacing: 0;
}
.hero-eyebrow,
.tsk-label,
.section h3,
.label,
.card__media .anno,
.card__meta,
.search-hero .cell label,
.ac__group,
.applied-bar .count,
.summary h4,
.mega h5,
.branch .pref,
.crumb .sep,
.tsg-eyebrow,
.footer-bottom small,
legend {
font-family: var(--tsk-font-latin);
font-kerning: normal;
font-feature-settings: normal;
}
/* ================================================================
COLOR SYSTEM REFINEMENT — component application
Token values are centralized in tokens.css.
================================================================ */
/* page and text hierarchy */
.content-card__excerpt,
.section-head p,
.cc-text,
.detail-lead {
color: var(--tsk-text-secondary);
}
.content-card__date,
.content-detail__meta,
.content-share span,
.form-help,
.tsg-input-form small {
color: var(--tsk-text-muted);
}
/* primary and accent actions */
.btn--primary,
.tsg-button,
.empty .btn,
.search-submit-btn,
.header-search-submit,
.toggle-add:not(.is-added) {
background: var(--tsk-action-primary);
color: #FFFFFF;
box-shadow: 0 2px 0 var(--tsk-action-primary-hover);
}
.btn--primary:hover,
.tsg-button:hover,
.empty .btn:hover,
.search-submit-btn:hover,
.header-search-submit:hover,
.toggle-add:not(.is-added):hover {
background: var(--tsk-action-primary-hover);
}
.btn--accent,
.mobile-nav a.cta-link,
.mobile-nav a.cta-link:hover {
background: var(--tsk-action-accent);
color: var(--tsk-action-accent-text);
}
/* input clarity and keyboard focus */
.input,
.select,
.textarea,
.search-keyword-row,
.header-search-form input[type="search"],
.header-search-form select,
.search-compact,
.zip input,
.tsg-input-form input[type="text"],
.tsg-input-form input[type="email"],
.tsg-input-form input[type="tel"],
.tsg-input-form select,
.tsg-form-grid input,
.tsg-form-grid select,
.tsg-advertise-input-form input,
.tsg-advertise-input-form textarea,
.tsg-advertise-input-form select {
border-color: var(--tsk-border-default);
}
.input:hover,
.select:hover,
.textarea:hover,
.header-search-form input[type="search"]:hover,
.header-search-form select:hover,
.tsg-input-form input:hover,
.tsg-input-form select:hover {
border-color: var(--tsk-border-strong);
}
.input:focus,
.select:focus,
.textarea:focus,
.search-compact:focus-within,
.header-search-form input[type="search"]:focus,
.header-search-form select:focus,
.tsg-input-form input:focus,
.tsg-input-form select:focus,
.tsg-form-grid input:focus,
.tsg-form-grid select:focus,
.tsg-advertise-input-form input:focus,
.tsg-advertise-input-form textarea:focus,
.tsg-advertise-input-form select:focus {
border-color: var(--tsk-focus);
box-shadow: var(--tsk-sh-focus);
}
.input::placeholder,
.textarea::placeholder,
.search-keyword-row input::placeholder,
.header-search-form input::placeholder,
.tsg-input-form input::placeholder {
color: #687372;
opacity: 1;
}
/* Shared legacy surfaces that still consume the final subtle-border token. */
.summary,
.form-shell,
.tsg-request-box,
.tsg-definition-list,
.tsg-request-item {
border-color: var(--tsk-border-subtle);
}
/* avoid near-invisible decorative separators */
.section-tint,
.site-band {
border-color: var(--tsk-border-subtle);
}
/* ================================================================
BRIGHTER BRAND BALANCE + RESPONSIVE HERO
================================================================ */
/* Softer supporting surfaces; dark green is reserved for text and interaction states. */
.search-hero .cell,
.applied-bar,
.summary,
.content-card__tag,
.tag,
.chip,
.tsg-chip {
background-color: #F3FCF6;
}
/* ----------------------------------------------------------------
HOME HERO VISUAL — Basic theme 1.12.3.15.8 consolidated cleanup
Removed layered experimental overrides and rebuilt the final hero
styles in one place for easier maintenance.
---------------------------------------------------------------- */
.hero-h1--mobile,
.hero-lead--mobile { display: none; }
.hero-h1__sp-break { display: none; }
.site-hero--visual {
padding: 0;
min-height: 0;
background: #FAF7F1;
border-bottom: none;
isolation: isolate;
overflow: hidden;
}
.site-hero--visual::before { display: none; }
.site-hero__visual {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
overflow: hidden;
pointer-events: none;
}
.site-hero__visual img {
position: absolute;
right: 0;
bottom: 0;
width: auto;
height: 100%;
max-width: none;
object-fit: contain;
object-position: right bottom;
transform: none;
}
.site-hero--visual::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(90deg,
rgba(250,247,241,1) 0%,
rgba(250,247,241,.99) 28%,
rgba(250,247,241,.72) 40%,
rgba(250,247,241,.10) 50%,
rgba(250,247,241,0) 58%);
}
.site-hero--visual .hero-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.hero-search-panel {
position: relative;
z-index: 4;
}
.hero-search-panel .search-form-wrap {
margin: 0;
background: rgba(255,255,255,.97);
border-color: rgba(255,255,255,.94);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
@media (min-width: 761px) {
.site-hero--visual .site-container {
max-width: 1320px;
}
.site-hero--visual .hero-inner {
min-height: 500px;
padding: 58px 0 92px;
}
.site-hero--visual .hero-copy {
width: 48%;
max-width: 620px;
}
.site-hero--visual .hero-h1 {
max-width: 620px;
font-size: clamp(34px, 2.65vw, 42px);
line-height: 1.38;
letter-spacing: .015em;
white-space: nowrap;
}
.site-hero--visual .hero-lead {
max-width: 590px;
font-size: 15px;
line-height: 1.9;
}
.site-hero__visual img {
left: auto;
right: max(0px, calc((100vw - 1260px) / 2));
}
.hero-search-panel {
margin-top: -54px;
}
.hero-search-panel .search-form-wrap {
box-shadow: 0 14px 38px rgba(0,0,0,.08);
}
}
@media (min-width: 761px) and (max-width: 1100px) {
.site-hero--visual .hero-inner {
min-height: 470px;
padding: 52px 0 86px;
}
.site-hero--visual .hero-copy {
width: 46%;
}
}
@media (max-width: 760px) {
.hero-h1--desktop,
.hero-lead--desktop { display: none; }
.hero-h1--mobile,
.hero-lead--mobile { display: block; }
.hero-h1__sp-break { display: inline; }
.site-hero--visual .site-container {
padding-inline: 0;
}
.site-hero--visual .hero-inner {
min-height: 640px;
padding: 40px 0 0;
}
.site-hero--visual .hero-copy {
width: 53%;
max-width: 200px;
}
.site-hero--visual .hero-eyebrow {
max-width: 188px;
font-size: 10px;
line-height: 1.75;
letter-spacing: .11em;
margin-bottom: 16px;
}
.site-hero--visual .hero-h1 {
max-width: 200px;
margin-bottom: 20px;
font-size: clamp(27px, 7vw, 29px);
line-height: 1.38;
letter-spacing: .01em;
white-space: normal;
}
.site-hero--visual .hero-lead {
max-width: 192px;
font-size: 12.5px;
line-height: 1.9;
}
.site-hero__visual img {
right: -18px;
bottom: 0;
height: 100%;
width: auto;
}
.site-hero--visual::after {
background: linear-gradient(90deg,
rgba(250,247,241,1) 0%,
rgba(250,247,241,.98) 31%,
rgba(250,247,241,.74) 44%,
rgba(250,247,241,.20) 54%,
rgba(250,247,241,0) 66%);
}
.hero-search-panel {
margin-top: 12px;
}
.hero-search-panel .search-form-wrap {
border-radius: 22px;
box-shadow: 0 10px 28px rgba(0,0,0,.07);
}
}
@media (max-width: 430px) {
.site-hero--visual .hero-inner {
min-height: 622px;
}
.site-hero__visual img {
right: -24px;
}
.site-hero--visual .hero-copy {
width: 54%;
max-width: 196px;
}
.site-hero--visual .hero-h1 {
max-width: 196px;
font-size: 27px;
}
.site-hero--visual .hero-lead {
max-width: 188px;
font-size: 12px;
}
}
@media (max-width: 370px) {
.site-hero--visual .hero-inner {
min-height: 596px;
padding-top: 36px;
}
.site-hero__visual img {
right: -30px;
}
.site-hero--visual .hero-copy {
width: 55%;
max-width: 176px;
}
.site-hero--visual .hero-h1 {
max-width: 176px;
font-size: 25px;
}
.site-hero--visual .hero-lead {
max-width: 168px;
font-size: 11.5px;
}
}
/* ================================================================
FREE BROCHURE FLOW — current layout
Single-layer 4-step diagram. Historical experiments were collapsed
into the final values that are actually rendered today.
================================================================ */
.hero-flow-wrap,
.site-hero--visual .hero-flow-wrap {
width: min(100%, 710px);
max-width: min(100%, 710px);
margin: 18px 0 0;
padding: 12px 16px 13px;
border: 1px solid rgba(87,200,138,.14);
border-radius: 16px;
background: rgba(255,255,255,.68);
box-shadow: 0 4px 14px rgba(28,32,32,.04);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-sizing: border-box;
}
.hero-flow__heading,
.site-hero--visual .hero-flow__heading {
display: block;
margin: 0 0 10px;
padding: 0 0 0 10px;
border-left: 4px solid #57C88A;
}
.hero-flow__heading-badge,
.hero-flow__sub {
display: none;
}
.hero-flow__title,
.site-hero--visual .hero-flow__title {
margin: 0;
padding: 0;
color: var(--tsk-primary-700);
line-height: 1.3;
font-weight: 700;
letter-spacing: .01em;
}
.hero-flow-wrap .hero-flow,
.site-hero--visual .hero-flow-wrap .hero-flow,
.site-hero--visual .hero-flow {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 0;
width: 100%;
max-width: none;
min-height: 0;
height: auto;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
overflow: visible;
box-sizing: border-box;
}
.hero-flow__step,
.site-hero--visual .hero-flow__step {
flex: 0 0 auto;
min-width: 0;
min-height: 0;
height: auto;
display: grid;
grid-template-columns: 28px minmax(0,1fr);
grid-template-rows: auto auto;
align-items: center;
align-content: start;
justify-content: start;
justify-items: start;
gap: 4px 8px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
white-space: normal;
}
.hero-flow__label,
.site-hero--visual .hero-flow__label {
grid-column: 1 / -1;
display: block;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--tsk-primary-600);
font-family: var(--tsk-font-mono);
font-size: 9px;
line-height: 1.1;
font-weight: 700;
letter-spacing: .08em;
}
.hero-flow__step-main,
.site-hero--visual .hero-flow__step-main {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 28px max-content;
align-items: center;
gap: 8px;
min-width: 0;
margin: 0;
padding: 0;
}
.hero-flow__num,
.site-hero--visual .hero-flow__num {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
margin: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: #57C88A;
color: #fff;
line-height: 1;
box-shadow: none;
}
.hero-flow__text,
.site-hero--visual .hero-flow__text {
display: block;
min-width: 0;
margin: 0;
color: var(--tsk-ink-800);
font-size: var(--tsk-type-small);
line-height: 1.35;
font-weight: 700;
letter-spacing: 0;
}
.hero-flow__arrow,
.site-hero--visual .hero-flow__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
flex: 0 0 14px;
width: 14px;
height: auto;
margin: 13px 0 0;
color: rgba(87,200,138,.78);
font-size: 22px;
line-height: 1;
}
@media (max-width: 760px) {
.hero-flow-wrap,
.site-hero--visual .hero-flow-wrap {
width: calc(100% + 32px);
max-width: none;
margin: 14px -16px 0;
padding: 11px 14px 13px;
border-left: 0;
border-right: 0;
border-bottom: 0;
border-radius: 16px 16px 0 0;
background: rgba(255,255,255,.78);
}
.hero-flow__heading,
.site-hero--visual .hero-flow__heading {
padding-left: 8px;
border-left-width: 3px;
}
.hero-flow-wrap .hero-flow,
.site-hero--visual .hero-flow-wrap .hero-flow {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 9px 12px;
}
.hero-flow__step,
.site-hero--visual .hero-flow__step {
gap: 3px 7px;
}
.hero-flow__step-main,
.site-hero--visual .hero-flow__step-main {
grid-template-columns: 28px minmax(0,1fr);
}
.hero-flow__arrow,
.site-hero--visual .hero-flow__arrow {
display: none;
}
.hero-flow__text,
.site-hero--visual .hero-flow__text {
font-size: var(--tsk-type-caption);
}
}
/* ----------------------------------------------------------------
PICKUP MANAGEMENT UI — front display
Theme 1.13.1
---------------------------------------------------------------- */
.pickup-carousel {
--pickup-columns: 3;
position: relative;
}
.pickup-carousel__viewport {
width: 100%;
overflow: hidden;
}
.pickup-carousel__track {
display: flex;
width: 100%;
align-items: stretch;
transition: transform .36s var(--tsk-ease);
will-change: transform;
}
.pickup-carousel__page {
flex: 0 0 100%;
min-width: 0;
}
.pickup-carousel__grid {
display: grid;
grid-template-columns: repeat(var(--pickup-columns), minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
.pickup-carousel__item {
min-width: 0;
display: flex;
}
.pickup-carousel__item > .card {
width: 100%;
height: 100%;
}
.pickup-carousel__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 22px;
}
.pickup-carousel__controls[hidden] {
display: none;
}
.pickup-carousel__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border: 1.5px solid var(--tsk-primary-300);
border-radius: 50%;
background: #fff;
color: var(--tsk-primary-700);
cursor: pointer;
transition: background var(--tsk-dur-fast) var(--tsk-ease), border-color var(--tsk-dur-fast) var(--tsk-ease), opacity var(--tsk-dur-fast) var(--tsk-ease);
}
.pickup-carousel__arrow svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pickup-carousel__arrow:hover:not(:disabled) {
border-color: var(--tsk-primary-500);
background: var(--tsk-primary-50);
}
.pickup-carousel__arrow:focus-visible,
.pickup-carousel__dot:focus-visible {
outline: none;
box-shadow: var(--tsk-sh-focus);
}
.pickup-carousel__arrow:disabled {
opacity: .35;
cursor: default;
}
.pickup-carousel__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 52px;
}
.pickup-carousel__dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--tsk-ink-200);
cursor: pointer;
transition: width var(--tsk-dur-fast) var(--tsk-ease), border-radius var(--tsk-dur-fast) var(--tsk-ease), background var(--tsk-dur-fast) var(--tsk-ease);
}
.pickup-carousel__dot.is-current {
width: 24px;
border-radius: 999px;
background: var(--tsk-primary-500);
}
.pickup-section__more {
margin-top: 24px;
text-align: center;
}
.pickup-results-intro {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 0 0 24px;
padding: 18px 20px;
border: 1px solid var(--tsk-primary-200);
border-radius: var(--tsk-r-lg);
background: var(--tsk-primary-50);
}
.pickup-results-intro p {
margin: 0;
color: var(--tsk-ink-700);
font-size: 13px;
line-height: 1.8;
}
.pickup-results-intro strong {
color: var(--tsk-ink-900);
}
.empty .btn + .btn {
margin-left: 8px;
}
/* Five navigation items use slightly tighter horizontal padding on medium desktop widths. */
@media (min-width: 1281px) and (max-width: 1440px) {
.site-nav a { padding-inline: 8px; }
}
@media (max-width: 1099px) and (min-width: 700px) {
.pickup-carousel { --pickup-columns: 2; }
}
@media (max-width: 699px) {
.pickup-carousel { --pickup-columns: 2; }
.pickup-carousel__grid { gap: 12px; }
.pickup-carousel__controls { margin-top: 18px; }
.pickup-carousel__arrow { width: 40px; height: 40px; }
/* On phones, PICK UP is an exposure-first compact grid: up to four
schools/campuses are visible before carousel navigation is needed. */
.pickup-section .pickup-carousel__item .card {
border-radius: var(--tsk-r-md);
}
.pickup-section .pickup-carousel__item .card--vert {
grid-template-rows: auto minmax(0, 1fr);
}
.pickup-section .pickup-carousel__item .card:hover {
transform: none;
}
.pickup-section .pickup-carousel__item .card--vert .card__media {
height: auto;
aspect-ratio: 4 / 3;
}
.pickup-section .pickup-carousel__item .card__media-badge {
top: 6px;
left: 6px;
gap: 4px;
}
.pickup-section .pickup-carousel__item .card__media .badge {
height: auto;
padding: 3px 7px;
font-size: 10px;
}
.pickup-section .pickup-carousel__item .badge--pickup {
display: none;
}
.pickup-section .pickup-carousel__item .card--vert .card__body {
padding: 11px 12px 12px;
}
.pickup-section .pickup-carousel__item .card__meta,
.pickup-section .pickup-carousel__item .card__address,
.pickup-section .pickup-carousel__item .card__desc,
.pickup-section .pickup-carousel__item .card__tags,
.pickup-section .pickup-carousel__item .card__footer {
display: none;
}
.pickup-section .pickup-carousel__item .card--vert .card__title {
margin: 0;
font-size: 14px;
line-height: 1.45;
}
.pickup-section .pickup-carousel__item .card__parent-school {
margin: 6px 0 0;
font-size: 11px;
line-height: 1.45;
}
.pickup-results-intro {
align-items: stretch;
flex-direction: column;
padding: 16px;
}
.pickup-results-intro .btn { width: 100%; }
.empty .btn + .btn {
margin: 10px 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
.pickup-carousel__track { transition: none; }
}
/* ----------------------------------------------------------------
HEADER CONTENT-GRID TWO-ROW LAYOUT — Theme 1.13.4
Navigation and conversion stay together on the first row. The
second row is a single-purpose quick-search bar. Background and
rules span the viewport; controls align to the page content grid.
---------------------------------------------------------------- */
.site-header__primary,
.site-header__secondary {
display: flex;
align-items: center;
width: 100%;
}
.site-header__primary {
min-height: 72px;
gap: 14px;
padding-block: 10px;
}
.site-header__secondary {
position: relative;
justify-content: flex-start;
gap: 28px;
min-height: 64px;
padding-block: 10px 12px;
}
.site-header__secondary::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 1px;
background: var(--tsk-ink-100);
transform: translateX(-50%);
pointer-events: none;
}
.site-header__primary .site-logo {
margin-right: auto;
}
.site-header__primary .site-nav {
margin-left: auto;
}
.site-header__primary .site-header__actions {
margin-left: 10px;
}
.site-header__secondary .header-search-form {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 auto;
width: auto;
max-width: none;
min-width: 0;
}
.site-header__secondary .header-search-form input[type="search"] {
flex: 1 1 auto;
width: auto;
max-width: none;
min-width: 220px;
height: 44px;
padding-inline: 14px;
}
.site-header__secondary .header-search-form select {
height: 44px;
max-width: 180px;
min-width: 150px;
padding: 0 38px 0 12px;
}
.site-header__secondary .header-search-form__submit {
width: 44px;
height: 44px;
flex-basis: 44px;
}
.header-search-form__label {
display: inline-flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
color: var(--tsk-ink-800);
font-size: 14px;
font-weight: 700;
line-height: 1.35;
white-space: nowrap;
}
.header-search-form__label::before {
content: "";
width: 4px;
height: 20px;
border-radius: 999px;
background: var(--tsk-primary-500);
}
@media (min-width: 1181px) {
.site-header__primary .site-nav {
display: flex;
}
.site-header__primary .burger-btn {
display: none;
}
}
@media (min-width: 901px) and (max-width: 1180px) {
.site-header__primary .site-nav {
display: none;
}
.site-header__primary .burger-btn {
display: inline-flex;
}
.site-header__primary .site-header__actions {
margin-left: auto;
}
.site-header__secondary {
gap: 20px;
}
.site-header__secondary .header-search-form {
display: flex;
flex: 1 1 auto;
width: auto;
max-width: none;
min-width: 0;
}
.site-header__secondary .header-search-form input[type="search"] {
flex: 1 1 auto;
min-width: 160px;
max-width: none;
}
.site-header__secondary .header-search-form select {
min-width: 138px;
max-width: 160px;
}
}
@media (max-width: 900px) {
.site-header > .site-container {
width: calc(100% - 32px);
}
.site-header__primary {
min-height: 64px;
gap: 12px;
padding-block: 8px;
}
.site-header__primary .site-nav,
.site-header__primary .site-header__actions,
.site-header__secondary {
display: none;
}
.site-header__primary .burger-btn {
display: inline-flex;
margin-left: auto;
}
}
/* ================================================================
DETAIL / SCHOOL-CAMPUS INFORMATION HIERARCHY
- detail title hierarchy
- school information strip
- lower-page detail components
================================================================ */
/* Detail title hierarchy: keep one H1 while showing school first, campus second. */
.detail-title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.detail-title__school {
display: block;
font: inherit;
font-weight: 700;
}
.detail-title__campus {
display: block;
color: var(--tsk-ink-700);
font-family: var(--tsk-font-sans);
font-size: .58em;
font-weight: 700;
line-height: 1.5;
letter-spacing: .01em;
}
/* School/campus introduction uses the same visual language. */
.detail-intro-card {
background: #fff;
border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-lg);
box-shadow: var(--tsk-sh-1);
}
/* School introduction supplementary information: subordinate three-column strip inside the parent section. */
.detail-school-introduction .detail-intro-card {
max-width: none;
}
.detail-info-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 20px;
padding: 22px 24px;
background: #fff;
border: 1px solid var(--tsk-ink-100);
border-radius: var(--tsk-r-lg);
box-shadow: var(--tsk-sh-1);
}
.detail-info-item {
min-width: 0;
padding: 2px 24px 4px;
}
.detail-info-item:first-child {
padding-left: 4px;
}
.detail-info-item:last-child {
padding-right: 4px;
}
.detail-info-item + .detail-info-item {
border-left: 1px solid var(--tsk-ink-100);
}
.detail-info-item__heading {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.detail-info-item__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
color: var(--tsk-primary-600);
background: var(--tsk-primary-50);
}
.detail-info-item__icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.detail-info-item h3 {
margin: 0;
color: var(--tsk-ink-800);
font-family: var(--tsk-font-display);
font-size: 17px;
font-weight: 700;
line-height: 1.45;
}
.detail-info-item p {
margin: 0;
color: var(--tsk-ink-700);
font-size: 14px;
line-height: 1.85;
}
@media (max-width: 900px) {
.detail-info-strip {
grid-template-columns: 1fr;
padding: 8px 20px;
}
.detail-info-item,
.detail-info-item:first-child,
.detail-info-item:last-child {
padding: 18px 0;
}
.detail-info-item + .detail-info-item {
border-left: 0;
border-top: 1px solid var(--tsk-ink-100);
}
}
.detail-request-cta {
border: 1px solid var(--tsk-primary-100);
}
/* Detail page layout modifiers. Keep template markup free of presentational inline styles. */
.detail-request-band-wrap {
margin-top: 12px;
}
.detail-section.detail-school-introduction,
.detail-section.detail-campus-introduction,
.detail-section.detail-campus-list-section {
margin-top: 40px;
}
.detail-section.detail-basic-section,
.detail-section.detail-section--space-32 {
margin-top: 32px;
}
.section-tint.detail-request-cta {
margin: 40px 0;
text-align: center;
}
.section-tint.detail-parent-cta {
margin: 40px 0 48px;
text-align: center;
}
.detail-parent-cta__groups {
display: flex;
align-items: stretch;
justify-content: center;
width: 100%;
max-width: 1120px;
margin: 0 auto;
}
.detail-parent-cta__group {
flex: 1 1 0;
min-width: 0;
display: grid;
grid-template-rows: 72px 64px;
justify-items: center;
align-items: start;
row-gap: 16px;
padding: 4px 48px;
}
.detail-parent-cta__group + .detail-parent-cta__group {
border-left: 1px solid var(--tsk-primary-200);
}
.detail-parent-cta__group:only-child {
max-width: 520px;
margin: 0 auto;
border-left: 0;
}
.detail-parent-cta__group .detail-cta-title,
.detail-parent-cta__group .detail-parent-cta__material-title {
display: block;
width: 100%;
height: 72px;
margin: 0;
font-family: var(--tsk-font-display);
font-size: var(--tsk-type-subheading);
font-weight: 700;
line-height: 1.5;
color: var(--tsk-ink-900);
text-align: center;
}
.detail-parent-cta__group > .btn,
.detail-parent-cta__group > .tsg-inline-form {
box-sizing: border-box;
width: min(100%, 360px);
height: 64px;
margin: 0 !important;
align-self: start;
}
.detail-parent-cta__group > .btn,
.detail-parent-cta__group > .tsg-inline-form > .tsg-button {
box-sizing: border-box;
width: 100%;
height: 64px;
min-height: 64px;
margin: 0 !important;
padding: 14px 24px;
font-size: 16px;
line-height: 1.2;
}
.detail-parent-cta__group > .tsg-inline-form {
display: flex;
align-items: stretch;
justify-content: center;
}
.detail-request-material-title {
margin: 10px 0 8px;
color: var(--tsk-ink-700);
font-weight: 700;
}
@media (max-width: 720px) {
.detail-parent-cta__groups {
flex-direction: column;
max-width: 520px;
}
.detail-parent-cta__group {
grid-template-rows: auto auto;
padding: 20px 0;
row-gap: 12px;
}
.detail-parent-cta__group + .detail-parent-cta__group {
border-left: 0;
border-top: 1px solid var(--tsk-primary-200);
}
.detail-parent-cta__group .detail-cta-title,
.detail-parent-cta__group .detail-parent-cta__material-title {
height: auto;
min-height: 0;
}
}
.btn--fallback-inactive {
opacity: .5;
}
/* Search results: bulk-add is a major conversion action, not a utility toolbar. */
.tsg-selected-request-block.tsg-bulk-all-only {
display: block;
margin: 16px 0 26px;
padding: 24px 28px;
border: 1px solid var(--tsk-ink-200);
border-radius: var(--tsk-r-lg);
background: var(--tsk-bg);
box-shadow: none;
}
.tsg-bulk-all-only .tsg-selected-request-block__head {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
margin: 0;
text-align: center;
}
.tsg-bulk-all-only .tsg-selected-request-block__text {
align-items: center;
gap: 6px;
min-width: 0;
max-width: 760px;
}
.tsg-bulk-all-only .tsg-selected-request-block__text strong {
color: var(--tsk-ink-900);
font-family: var(--tsk-font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.45;
}
.tsg-bulk-all-only .tsg-selected-request-block__text span {
color: var(--tsk-ink-600);
font-size: 13px;
line-height: 1.7;
}
.tsg-bulk-all-only .tsg-selected-request-block__tools,
.tsg-bulk-all-only .tsg-inline-form {
display: flex;
justify-content: center;
width: 100%;
}
.tsg-bulk-all-only .tsg-button--bulk-all,
.tsg-bulk-all-only .tsg-selected-request-block__tools .tsg-button--bulk-all {
width: auto;
height: auto;
min-height: 52px;
padding: 13px 28px;
border: 0;
border-radius: var(--tsk-r-md);
background: var(--tsk-accent-500);
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1.45;
box-shadow: 0 3px 0 var(--tsk-accent-700);
}
.tsg-bulk-all-only .tsg-button--bulk-all:hover {
background: var(--tsk-accent-700);
color: #fff;
text-decoration: none;
transform: translateY(1px);
box-shadow: 0 2px 0 var(--tsk-accent-700);
}
@media (max-width: 760px) {
.tsg-selected-request-block.tsg-bulk-all-only {
padding: 20px 16px;
}
.tsg-bulk-all-only .tsg-button--bulk-all,
.tsg-bulk-all-only .tsg-selected-request-block__tools .tsg-button--bulk-all {
width: 100%;
white-space: normal;
}
}
/* School detail: add breathing room between the campus list and the global footer. */
body.single-school .detail-school-page {
padding-bottom: 48px;
}
@media (max-width: 760px) {
body.single-school .detail-school-page {
padding-bottom: 40px;
}
}