Jump to content

Template:ICCard/styles.css: Difference between revisions

From ICE List Wiki
[unchecked revision][unchecked revision]
← Older edit
No edit summary
Rebuild cards: flat editorial, mono eyebrow, tone accents
 
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Base card */
/* ICE List cards — flat editorial, matched to the hero + stat tiles. */
.ic-card {
.ic-card { background:var(--cn-surface,#fff); border:1px solid var(--cn-rule,#DDD7CB);
  border: 1px solid #a7d7f9;
   border-top:3px solid #7B838F; border-radius:3px; margin:0 0 1rem; padding:1.05rem 1.2rem 1.15rem;
   background: #f8fcff;
   transition:border-color .16s ease, transform .16s ease; }
  margin: 0 0 14px 0;
.ic-card:hover { transform:translateY(-2px); }
   box-sizing: border-box;
}


/* Header */
.ic-card__kicker { font-family:'Spline Sans Mono',ui-monospace,Menlo,monospace; font-size:.64rem;
.ic-card__head {
   font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#7B838F;
   padding: 8px 10px;
   display:flex; align-items:center; gap:.5rem; }
  border-bottom: 1px solid #a7d7f9;
.ic-card__kicker::before { content:""; width:7px; height:7px; border-radius:1px; background:currentColor; flex:0 0 auto; }
   display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}


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


.ic-card__more {
.ic-card__body { font-family:'Libre Franklin','Helvetica Neue',Arial,sans-serif; font-size:.94rem;
   font-size: 0.9em;
  line-height:1.6; color:var(--cn-text,#1c1b19); }
   white-space: nowrap;
.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); }


/* Hide “more” when empty */
.ic-card--red { border-top-color:#E2231A; } .ic-card--red:hover { border-color:#E2231A; } .ic-card--red .ic-card__kicker { color:#E2231A; }
.ic-card__more:empty {
.ic-card--news { border-top-color:#E2231A; } .ic-card--news:hover { border-color:#E2231A; } .ic-card--news .ic-card__kicker { color:#E2231A; }
  display: none;
.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; }


/* Body */
.ic-card-list ul { list-style:none; margin:0; padding:0; }
.ic-card__body {
.ic-news-item { margin:0 0 .55rem; padding:.55rem .7rem .55rem .95rem; border-left:3px solid var(--cn-red,#E2231A);
   padding: 10px 12px;
   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);
  TONE VARIANTS
  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; }


/* Default / neutral blue (Wikipedia-style) */
.ic-card-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem; }
.ic-card--blue {
.ic-card-button-primary a, .ic-card-button-secondary a { display:inline-block; padding:.55rem 1rem; border-radius:3px;
   border-color: #a7d7f9;
   text-decoration:none; font-family:'Spline Sans Mono',ui-monospace,Menlo,monospace; font-weight:600; font-size:.76rem;
  background: #f8fcff;
  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--blue .ic-card__head {
.ic-card-button-primary a:hover { background:var(--cn-red-hover,#C71912); transform:translateY(-1px); }
  background: #cedff2;
.ic-card-button-secondary a { background:var(--cn-surface,#fff); color:var(--cn-text,#0D0D0D) !important; border:1px solid var(--cn-rule,#DDD7CB); }
  border-bottom-color: #a7d7f9;
.ic-card-button-secondary a:hover { border-color:#E2231A; color:var(--cn-red,#E2231A) !important; transform:translateY(-1px); }
}


/* News / current events (slightly stronger blue) */
.ic-feature { display:flex; gap:1em; align-items:flex-start; }
.ic-card--news {
.ic-feature__media { flex:0 0 auto; max-width:150px; }
  border-color: #a2c8ee;
.ic-feature__media img { border-radius:3px; }
  background: #f6faff;
.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; }
.ic-card--news .ic-card__head {
  background: #dbe9f6;
  border-bottom-color: #a2c8ee;
}
 
/* Informational / neutral gray */
.ic-card--gray {
  border-color: #d9d9d9;
  background: #fafafa;
}
.ic-card--gray .ic-card__head {
  background: #eeeeee;
  border-bottom-color: #d9d9d9;
}
 
/* Featured / positive */
.ic-card--green {
  border-color: #b7d7c2;
  background: #f4fbf6;
}
.ic-card--green .ic-card__head {
  background: #d8f0e0;
  border-bottom-color: #b7d7c2;
}
 
/* Warning / safety / legal */
.ic-card--red {
  border-color: #e0a1a1;
  background: #fff6f6;
}
.ic-card--red .ic-card__head {
  background: #f3cccc;
  border-bottom-color: #e0a1a1;
}

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; }
Retrieved from "https://theicelist.org/index.php?title=Template:ICCard/styles.css&oldid=46439"