Template:ICCard/styles.css: Difference between revisions
| [unchecked revision] | [unchecked revision] |
Crustify cards: red-dot heads, bold Libre Franklin, tone top-accents, padded news items |
Crustify cards (literal light values; dark handled in Common.css) |
||
| Line 1: | Line 1: | ||
/* ICE List card system — CRUST editorial */ | /* ICE List card system — CRUST editorial (light base; dark handled in Common.css) */ | ||
.ic-card { background:#fff; border:1px solid #DCDEE1; border-radius:5px; overflow:hidden; | .ic-card { background:#fff; border:1px solid #DCDEE1; border-radius:5px; overflow:hidden; | ||
margin:0 0 14px 0; box-shadow:0 1px 2px rgba(8,12,18,. | margin:0 0 14px 0; box-shadow:0 1px 2px rgba(8,12,18,.08); } | ||
.ic-card__head { font-family:'Libre Franklin','Helvetica Neue',Arial,sans-serif; font-weight:800; | |||
.ic-card__head { | |||
font-size:1.02rem; line-height:1.2; letter-spacing:-.01em; color:#0D0D0D; | font-size:1.02rem; line-height:1.2; letter-spacing:-.01em; color:#0D0D0D; | ||
padding:12px 16px 10px; background:#fff; border-bottom:1px solid #E9EAEC; | padding:12px 16px 10px; background:#fff; border-bottom:1px solid #E9EAEC; | ||
display:flex; align-items:center; gap:.5rem; } | display:flex; align-items:center; gap:.5rem; } | ||
.ic-card__head::before { content:""; width:9px; height:9px; border-radius:50%; | .ic-card__head::before { content:""; width:9px; height:9px; border-radius:50%; background:#E2231A; flex:0 0 auto; } | ||
.ic-card__body { padding:14px 16px; font-family:'Libre Franklin',Arial,sans-serif; | .ic-card__body { padding:14px 16px; font-family:'Libre Franklin',Arial,sans-serif; | ||
| Line 20: | Line 17: | ||
.ic-card__body a:hover { color:#E2231A; border-bottom-color:#E2231A; } | .ic-card__body a:hover { color:#E2231A; border-bottom-color:#E2231A; } | ||
.ic-card--blue { border-top:3px solid #2E6FB0; } | .ic-card--blue { border-top:3px solid #2E6FB0; } | ||
.ic-card--gray { border-top:3px solid #8B8E92; } | .ic-card--gray { border-top:3px solid #8B8E92; } | ||
| Line 30: | Line 26: | ||
.ic-card--green .ic-card__head::before { background:#309F44; } | .ic-card--green .ic-card__head::before { background:#309F44; } | ||
.ic-card-list ul { list-style:none; margin:0; padding:0; } | .ic-card-list ul { list-style:none; margin:0; padding:0; } | ||
.ic-news-item { margin:0 0 .7rem; padding:.55rem .55rem .55rem .95rem; | .ic-news-item { margin:0 0 .7rem; padding:.55rem .55rem .55rem .95rem; | ||
border-left:3px solid #E2231A; background:#FAF9F6; border-radius:0 4px 4px 0; } | border-left:3px solid #E2231A; background:#FAF9F6; border-radius:0 4px 4px 0; } | ||
.ic-news-item:last-child { margin-bottom:0; } | .ic-news-item:last-child { margin-bottom:0; } | ||
.ic-news-item a { color:#0D0D0D; font-weight:600; text-decoration:none; | .ic-news-item a { color:#0D0D0D; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(226,35,26,.35); } | ||
.ic-news-item a:hover { color:#E2231A; border-bottom-color:#E2231A; } | .ic-news-item a:hover { color:#E2231A; border-bottom-color:#E2231A; } | ||
.ic-card-note { margin-top:10px; padding-top:10px; border-top:1px solid #efede8; font-size:.8rem; line-height:1.55; color:#6e6c66; } | |||
.ic-card-note { margin-top:10px; padding-top:10px; border-top:1px solid #efede8; | |||
.ic-card-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } | .ic-card-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } | ||
.ic-card-button-primary a { display:inline-block; background:#E2231A; color:#fff; padding:8px 16px; | .ic-card-button-primary a { display:inline-block; background:#E2231A; color:#fff; padding:8px 16px; | ||
| Line 51: | Line 42: | ||
padding:7px 16px; border-radius:3px; text-decoration:none; font-weight:600; } | padding:7px 16px; border-radius:3px; text-decoration:none; font-weight:600; } | ||
.ic-feature { display:flex; gap:.9em; align-items:flex-start; } | .ic-feature { display:flex; gap:.9em; align-items:flex-start; } | ||
.ic-feature__media { flex:0 0 auto; max-width:140px; } | .ic-feature__media { flex:0 0 auto; max-width:140px; } | ||
Revision as of 07:33, 30 June 2026
/* ICE List card system — CRUST editorial (light base; dark handled in Common.css) */
.ic-card { background:#fff; border:1px solid #DCDEE1; border-radius:5px; overflow:hidden;
margin:0 0 14px 0; box-shadow:0 1px 2px rgba(8,12,18,.08); }
.ic-card__head { font-family:'Libre Franklin','Helvetica Neue',Arial,sans-serif; font-weight:800;
font-size:1.02rem; line-height:1.2; letter-spacing:-.01em; color:#0D0D0D;
padding:12px 16px 10px; background:#fff; border-bottom:1px solid #E9EAEC;
display:flex; align-items:center; gap:.5rem; }
.ic-card__head::before { content:""; width:9px; height:9px; border-radius:50%; background:#E2231A; flex:0 0 auto; }
.ic-card__body { padding:14px 16px; font-family:'Libre Franklin',Arial,sans-serif;
font-size:.95rem; line-height:1.6; color:#1c1b19; }
.ic-card__body > :first-child { margin-top:0; }
.ic-card__body > :last-child { margin-bottom:0; }
.ic-card__body p { margin:0 0 .6rem; }
.ic-card__body a { color:#0D0D0D; text-decoration:none; border-bottom:1px solid rgba(226,35,26,.35); }
.ic-card__body a:hover { color:#E2231A; border-bottom-color:#E2231A; }
.ic-card--blue { border-top:3px solid #2E6FB0; }
.ic-card--gray { border-top:3px solid #8B8E92; }
.ic-card--green { border-top:3px solid #309F44; }
.ic-card--red { border-top:3px solid #E2231A; }
.ic-card--news { border-top:3px solid #E2231A; }
.ic-card--blue .ic-card__head::before { background:#2E6FB0; }
.ic-card--gray .ic-card__head::before { background:#8B8E92; }
.ic-card--green .ic-card__head::before { background:#309F44; }
.ic-card-list ul { list-style:none; margin:0; padding:0; }
.ic-news-item { margin:0 0 .7rem; padding:.55rem .55rem .55rem .95rem;
border-left:3px solid #E2231A; background:#FAF9F6; border-radius:0 4px 4px 0; }
.ic-news-item:last-child { margin-bottom:0; }
.ic-news-item a { color:#0D0D0D; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(226,35,26,.35); }
.ic-news-item a:hover { color:#E2231A; border-bottom-color:#E2231A; }
.ic-card-note { margin-top:10px; padding-top:10px; border-top:1px solid #efede8; font-size:.8rem; line-height:1.55; color:#6e6c66; }
.ic-card-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ic-card-button-primary a { display:inline-block; background:#E2231A; color:#fff; padding:8px 16px;
border-radius:3px; text-decoration:none; font-family:'Libre Franklin',Arial,sans-serif; font-weight:700; }
.ic-card-button-primary a:hover { background:#C71912; }
.ic-card-button-secondary a { display:inline-block; background:#fff; color:#0D0D0D; border:1px solid #DCDEE1;
padding:7px 16px; border-radius:3px; text-decoration:none; font-weight:600; }
.ic-feature { display:flex; gap:.9em; align-items:flex-start; }
.ic-feature__media { flex:0 0 auto; max-width:140px; }
.ic-feature__media img { border-radius:4px; }
.ic-feature__body { flex:1; }
.ic-feature__meta { font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:.72rem;
text-transform:uppercase; letter-spacing:.04em; color:#6E747C; }