Jump to content

Template:ICCard/styles.css: Difference between revisions

From ICE List Wiki
[unchecked revision][unchecked revision]
Created page with ".ic-card{ border:1px solid #a7d7f9; background:#f8fcff; margin:0 0 12px 0; } .ic-card__head{ padding:8px 10px; border-bottom:1px solid #a7d7f9; display:flex; justify-content:space-between; align-items:baseline; gap:10px; } .ic-card__title{ font-weight:700; } .ic-card__more{ font-size:0.9em; white-space:nowrap; } .ic-card__body{ padding:10px 12px; } →Tones to mimic that Wikipedia “portal box” vibe: .ic-card--green{ border-color:#b7d7c2; backg..."
 
Rebuild cards: flat editorial, mono eyebrow, tone accents
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
.ic-card{
/* ICE List cards — flat editorial, matched to the hero + stat tiles. */
  border:1px solid #a7d7f9;
.ic-card { background:var(--cn-surface,#fff); border:1px solid var(--cn-rule,#DDD7CB);
   background:#f8fcff;
   border-top:3px solid #7B838F; border-radius:3px; margin:0 0 1rem; padding:1.05rem 1.2rem 1.15rem;
  margin:0 0 12px 0;
  transition:border-color .16s ease, transform .16s ease; }
}
.ic-card:hover { transform:translateY(-2px); }


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


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


.ic-card__body{ padding:10px 12px; }
.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); }


/* Tones to mimic that Wikipedia “portal box” vibe */
.ic-card--red { border-top-color:#E2231A; } .ic-card--red:hover { border-color:#E2231A; } .ic-card--red .ic-card__kicker { color:#E2231A; }
.ic-card--green{ border-color:#b7d7c2; background:#f4fbf6; }
.ic-card--news { border-top-color:#E2231A; } .ic-card--news:hover { border-color:#E2231A; } .ic-card--news .ic-card__kicker { color:#E2231A; }
.ic-card--green .ic-card__head{ background:#d8f0e0; border-bottom-color:#b7d7c2; }
.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--blue{ border-color:#a7d7f9; background:#f8fcff; }
.ic-card-list ul { list-style:none; margin:0; padding:0; }
.ic-card--blue .ic-card__head{ background:#cedff2; border-bottom-color:#a7d7f9; }
.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--gray{ border-color:#d9d9d9; background:#fafafa; }
.ic-card-note { margin-top:.85rem; padding:.65rem .8rem; border-radius:3px; background:var(--cn-paper,#FAF9F6);
.ic-card--gray .ic-card__head{ background:#eeeeee; border-bottom-color:#d9d9d9; }
  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; }

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"