Template:ICCard/styles.css: Difference between revisions

Latest revision as of 03:26, 20 July 2026

/* ICE List cards — flat editorial, matched to the hero + stat tiles. */
.ic-card { background:var(--cn-surface,#fff); border:1px solid var(--cn-rule,#DDD7CB);
  border-top:3px solid #7B838F; border-radius:3px; margin:0 0 1rem; padding:1.05rem 1.2rem 1.15rem;
  transition:border-color .16s ease, transform .16s ease; }
.ic-card:hover { transform:translateY(-2px); }

.ic-card__kicker { font-family:'Spline Sans Mono',ui-monospace,Menlo,monospace; font-size:.64rem;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#7B838F;
  display:flex; align-items:center; gap:.5rem; }
.ic-card__kicker::before { content:""; width:7px; height:7px; border-radius:1px; background:currentColor; flex:0 0 auto; }

.ic-card__head { font-family:'Anton','Oswald',Impact,sans-serif; font-weight:400; font-size:1.6rem;
  line-height:1.03; letter-spacing:.01em; text-transform:uppercase; color:var(--cn-text,#0D0D0D); margin:.42rem 0 .5rem; }

.ic-card__body { font-family:'Libre Franklin','Helvetica Neue',Arial,sans-serif; font-size:.94rem;
  line-height:1.6; color:var(--cn-text,#1c1b19); }
.ic-card__body > :first-child { margin-top:0; }
.ic-card__body > :last-child { margin-bottom:0; }
.ic-card__body p { margin:0 0 .7rem; }
.ic-card__body a { color:var(--cn-text,#0D0D0D); text-decoration:none;
  border-bottom:1px solid rgba(226,35,26,.4); transition:color .15s, border-color .15s; }
.ic-card__body a:hover { color:var(--cn-red,#E2231A); border-bottom-color:var(--cn-red,#E2231A); }
.ic-card__body > p:last-child > a:only-child, .ic-card__body > a:last-child {
  display:inline-block; margin-top:.55rem; font-family:'Spline Sans Mono',ui-monospace,Menlo,monospace;
  font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--cn-red,#E2231A); border-bottom:2px solid rgba(226,35,26,.35); }
.ic-card__body > p:last-child > a:only-child:hover, .ic-card__body > a:last-child:hover { border-bottom-color:var(--cn-red,#E2231A); }

.ic-card--red { border-top-color:#E2231A; } .ic-card--red:hover { border-color:#E2231A; } .ic-card--red .ic-card__kicker { color:#E2231A; }
.ic-card--news { border-top-color:#E2231A; } .ic-card--news:hover { border-color:#E2231A; } .ic-card--news .ic-card__kicker { color:#E2231A; }
.ic-card--blue { border-top-color:#3B7DD8; } .ic-card--blue:hover { border-color:#3B7DD8; } .ic-card--blue .ic-card__kicker { color:#3B7DD8; }
.ic-card--green { border-top-color:#1FA85D; } .ic-card--green:hover { border-color:#1FA85D; } .ic-card--green .ic-card__kicker { color:#1FA85D; }
.ic-card--gray { border-top-color:#7B838F; } .ic-card--gray:hover { border-color:#7B838F; } .ic-card--gray .ic-card__kicker { color:#7B838F; }

.ic-card-list ul { list-style:none; margin:0; padding:0; }
.ic-news-item { margin:0 0 .55rem; padding:.55rem .7rem .55rem .95rem; border-left:3px solid var(--cn-red,#E2231A);
  background:var(--cn-paper,#FAF9F6); border-radius:0 3px 3px 0; }
.ic-news-item:last-child { margin-bottom:0; }
.ic-news-item a { color:var(--cn-text,#0D0D0D); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(226,35,26,.4); }
.ic-news-item a:hover { color:var(--cn-red,#E2231A); border-bottom-color:var(--cn-red,#E2231A); }

.ic-card-note { margin-top:.85rem; padding:.65rem .8rem; border-radius:3px; background:var(--cn-paper,#FAF9F6);
  border:1px solid var(--cn-rule-soft,#E9EAEC); border-left:3px solid var(--cn-rule,#DDD7CB);
  font-family:'Spline Sans Mono',ui-monospace,Menlo,monospace; font-size:.72rem; line-height:1.55; color:var(--cn-text,#6e6c66); opacity:.85; }

.ic-card-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem; }
.ic-card-button-primary a, .ic-card-button-secondary a { display:inline-block; padding:.55rem 1rem; border-radius:3px;
  text-decoration:none; font-family:'Spline Sans Mono',ui-monospace,Menlo,monospace; font-weight:600; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.05em; border-bottom:none !important; transition:transform .15s, background .15s, border-color .15s; }
.ic-card-button-primary a { background:var(--cn-red,#E2231A); color:#fff !important; }
.ic-card-button-primary a:hover { background:var(--cn-red-hover,#C71912); transform:translateY(-1px); }
.ic-card-button-secondary a { background:var(--cn-surface,#fff); color:var(--cn-text,#0D0D0D) !important; border:1px solid var(--cn-rule,#DDD7CB); }
.ic-card-button-secondary a:hover { border-color:#E2231A; color:var(--cn-red,#E2231A) !important; transform:translateY(-1px); }

.ic-feature { display:flex; gap:1em; align-items:flex-start; }
.ic-feature__media { flex:0 0 auto; max-width:150px; }
.ic-feature__media img { border-radius:3px; }
.ic-feature__body { flex:1; }
.ic-feature__meta { font-family:'Spline Sans Mono',ui-monospace,Menlo,monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#8a8f97; }