/* public/css/meme.css Full stylesheet for meme.xlm.fish Mobile-first; color palette integrated across UI; dark-mode support via .dark on . Latest: - Hero now has a green border. - Dark mode page-level text is very light; surfaces use --surface-text (near-black) for readability. - hero-sub and card-title on surfaces use dark surface text in dark mode. - Removed underline on hover for site-title/brand and top-nav links. - Disabled links (privacy) have no underline and are visually muted. - Improved contrast for .btn-ghost in dark mode; ghost buttons inside light surfaces remain readable. - Avoid empty rulesets to silence warnings. - Anchor text made bold globally, but links inside the hero section explicitly inherit surrounding typography so they remain consistent size and weight across light/dark modes. */ /* Palette variables (light mode defaults) */ :root{ --color-primary: #05668D; --color-secondary: #427AA1; --lightbg: #EBF2FA; --lightext: #EBF2FA; --green-1: #679436; --green-2: #A5BE00; /* Semantic - light mode */ --bg: var(--lightbg); /* page background */ --text: #04293A; /* page / body text on light-mode background */ --surface: #ffffff; /* surface backgrounds (cards, hero-inner) */ --card: #fefefe; /* card backgrounds */ --surface-text: #04293A; /* text color used when on light surfaces (dark) */ --muted: #475569; /* subdued text on light */ --border: rgba(4, 38, 61, 0.06); --focus: rgba(5,102,141,0.18); /* subtle tints */ --primary-03: rgba(5,102,141,0.03); --primary-06: rgba(5,102,141,0.06); --secondary-06: rgba(66,122,161,0.06); --green-06: rgba(103,148,54,0.06); } /* Dark mode - page background equals the previous light-mode --text (greenish) - default page text (var(--text)) becomes a very light color to be readable on the green page bg - surfaces remain light so content remains readable; surface-text becomes near-black */ html.dark { --bg: #04293A; /* same as light-mode --text */ --text: #f7fbfc; /* very light page text on green background */ --surface: #f7fbfb; /* light surface for cards/hero */ --card: #fefefe; /* Text used for content that sits on a light surface (hero-inner, cards) */ --surface-text: #061010; /* near-black to read on light surfaces */ /* muted text on green page background -> light but slightly subdued */ --muted: rgba(247,251,252,0.72); /* borders and focus tuned for this palette */ --border: rgba(0,0,0,0.06); --focus: rgba(165,190,0,0.18); --primary-03: rgba(5,102,141,0.06); --secondary-06: rgba(66,122,161,0.10); --green-06: rgba(165,190,0,0.08); } /* Reset & base */ * { box-sizing: border-box; } html,body { height:100%; } body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color: var(--text); /* page-level text color (changes by mode) */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45; -webkit-tap-highlight-color: transparent; } a { font-weight: bold; /* make anchors bold globally */ } /* Semantic utility classes */ .bg-primary{ background:var(--color-primary); color:white; } .bg-secondary{ background:var(--color-secondary); color:white; } .text-primary{ color:var(--color-primary); } .text-secondary{ color:var(--color-secondary); } .border-primary{ border-color:var(--color-primary) !important; } .border-accent{ border-color:var(--secondary-06) !important; } .bg-surface{ background:var(--surface); color:var(--surface-text); } .bg-card{ background:var(--card); color:var(--surface-text); } /* Container */ .container{ width:100%; padding-left:1rem; padding-right:1rem; margin-left:auto; margin-right:auto; max-width:1000px; } /* Skip link */ .skip-link{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ left:1rem; top:1rem; background:var(--surface); color:var(--surface-text); padding:.5rem .75rem; border-radius:.375rem; z-index:100; box-shadow:0 1px 2px rgba(0,0,0,0.12); } /* Badge */ .badge-green{ display:inline-block; background: linear-gradient(180deg, rgba(103,148,54,0.10), rgba(165,190,0,0.03)); color: var(--green-1); padding:.2rem .45rem; border-radius:.375rem; font-weight:700; border:1px solid rgba(103,148,54,0.10); box-shadow: 0 1px 0 rgba(0,0,0,0.02); vertical-align:middle; font-size:.85rem; line-height:1; } html.dark .badge-green{ background: linear-gradient(180deg, var(--green-2), var(--green-1)); color: #03120a; border:1px solid rgba(0,0,0,0.12); box-shadow: 0 8px 18px rgba(165,190,0,0.12); } /* Header tweaks */ .site-header{ border-bottom:1px solid var(--border); background: linear-gradient(90deg, var(--primary-03), var(--secondary-06)); } .header-inner{ display:flex; gap:1rem; align-items:center; /* vertical centering */ justify-content:space-between; padding:.6rem 0; min-height:56px; } /* Brand area: remove underline on hover for site-title/brand link */ .brand{ display:flex; align-items:center; } .brand-link{ display:flex; gap:.5rem; align-items:center; text-decoration:none; color:var(--text); padding:0 .5rem; border-radius:.375rem; } .brand-link:hover, .brand-link:focus { text-decoration: none; /* remove underline on hover/focus */ color: inherit; } .logo-img{ width:36px; height:36px; object-fit:contain; box-shadow: 0 1px 0 rgba(4,38,61,0.04); border-radius:6px; transition:filter .12s ease, transform .12s ease; } html.dark .logo-img{ filter:none; } .brand-text{ font-weight:800; font-size:1rem; color:var(--color-primary); } /* Navigation: vertical-centering and accessible hit areas */ /* Remove underline on hover — visual feedback is color/background transform only */ .site-nav{ display:flex; align-items:center; } .site-nav .nav-list{ display:flex; gap:.5rem; align-items:center; list-style:none; margin:0; padding:0; } .site-nav .nav-list li a{ display:inline-flex; align-items:center; height:40px; /* consistent hit area */ color:var(--muted); text-decoration:none; font-size:.95rem; padding:.25rem .5rem; border-radius:.375rem; transition: background .12s ease, color .12s ease, transform .12s ease; } html.dark .site-nav .nav-list li a{ color: var(--text); opacity: 0.98; } .site-nav .nav-list li a:hover, .site-nav .nav-list li a:focus{ color:var(--color-primary); background: linear-gradient(90deg, var(--primary-03), transparent); transform: translateY(-1px); text-decoration: none; /* explicitly no underline */ } /* Header actions (theme toggle) */ .header-actions{ display:flex; gap:.5rem; align-items:center; } .header-actions .btn{ padding:.45rem .5rem; height:40px; display:inline-flex; align-items:center; justify-content:center; margin-right:0; } /* Buttons: bold for visibility */ .btn{ border-radius:.375rem; font-size:.95rem; cursor:pointer; transition: transform .12s ease, box-shadow .12px ease, background .12s ease; font-weight:700; /* bold buttons */ } .btn:focus{ outline:3px solid var(--focus); outline-offset:2px; } .btn-primary{ background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%); color:white; border:1px solid rgba(0,0,0,0.06); box-shadow: 0 8px 22px rgba(5,102,141,0.12); padding:.5rem .85rem; } .btn-primary:hover, .btn-primary:focus{ transform:translateY(-2px); box-shadow: 0 14px 32px rgba(5,102,141,0.18); } /* Ghost button: base style */ .btn-ghost{ background:transparent; color:var(--color-secondary); border:1px solid rgba(66,122,161,0.14); padding:.45rem .65rem; } /* Dark-mode: make ghost button text very light and bold on the green page background for contrast. Keep a subtle translucent background so it reads against the green page. */ html.dark .btn-ghost{ color: var(--text) !important; /* very light page text */ border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); font-weight:800; text-shadow: 0 1px 0 rgba(0,0,0,0.12); } /* Ensure ghost buttons inside light surfaces remain readable (dark text on light surface) */ .hero-inner .btn-ghost, .card .btn-ghost { color: var(--surface-text) !important; background: transparent !important; border: 1px solid var(--border) !important; text-shadow: none !important; } /* Link-style button */ .btn-link{ background:transparent; border:none; color:var(--color-primary); padding:0; } html.dark .btn-link{ color: var(--text); } /* Hero + inner surface - hero keeps the soft gradient accent - added green border to the outer .hero container - hero-inner remains a light surface (content sits on it) */ .hero{ padding:2.25rem 0; text-align:center; border-radius: 8px; margin-top: .5rem; border: 3px solid var(--color-primary); /* green border on the hero section */ } /* Slightly adjust color for dark mode so green border remains visible */ html.dark .hero { border: 3px solid var(--lightbg); } .hero-inner{ max-width:720px; margin:0 auto; padding: 1.25rem; border-radius: 8px; box-shadow: 0 6px 18px rgba(4,38,61,0.04); border: 1px solid var(--border); color: var(--surface-text); /* ensure text on surface reads using surface-text */ } html.dark .hero-inner{ background: var(--bg); box-shadow: 0 6px 18px rgba(0,0,0,0.18); border: 1px solid rgba(0,0,0,0.06); } /* hero-sub: in light mode use muted; in dark mode surfaces use surface-text (near-black) */ .hero-heading { font-size: 3rem; color: var(--color-primary); margin-bottom: .5rem; font-weight: 900; } .hero-title{ font-size:1.75rem; margin:0; font-weight:700; color:var(--surface-text); } .hero-sub{ margin:.5rem 0 2rem 0; color:var(--muted); } .hero-link{ color:var(--color-secondary); /* inherit surrounding typography */ font-weight:bold; } html.dark .hero-link{ color: var(--color-secondary); /* inherit surrounding typography */ } /* About section */ .about-section-header{ font-size:2rem; margin-bottom:1rem; font-weight:900; color: var(--color-primary); } .about-title{ text-align: left; font-size:1.25rem; margin:0 0 .5rem; font-weight:700; color:var(--color-primary); } .about-p { text-align: left; margin-bottom:1rem; color:var(--surface-text); } .about-ul{ padding-left:1.25rem; margin:0; text-align:left; color:var(--surface-text); /* text on surface should use surface-text */ } .about-li{ color:var(--surface-text); margin-bottom:.5rem; } .site-disclaimer { display: block; color: var(--surface-text); font-size: .85rem; margin-top: .5rem; line-height: 1.3; } /* Grids & cards */ .content-grid{ display:grid; grid-template-columns:1fr; gap:1rem; margin:1.25rem 0; } .card{ background:var(--card); border:1px solid var(--border); padding:1rem; border-radius:.5rem; color:var(--surface-text); /* text on card surfaces should use surface-text */ box-shadow: 0 1px 0 rgba(4,38,61,0.02); } .card.small{ padding:.75rem; } .card-title-small{ font-size:1.25rem; color:var(--color-secondary); margin:0 0 .5rem; font-weight:700; } /* CARD: border-primary adjustments (light-mode defaults explicitly set to avoid empty rulesets) */ .card.border-primary { background: var(--card); color: var(--surface-text); border: 1px solid var(--border); border-left: 4px solid transparent; /* accent only in dark mode via override */ box-shadow: 0 1px 0 rgba(4,38,61,0.02); } html.dark .card.border-primary { background: rgba(6,16,16,0.10); /* subtle dark surface */ color: var(--text); /* very light text on dark surface */ border: 1px solid rgba(103,148,54,0.12); /* subtle green-ish border */ box-shadow: 0 8px 20px rgba(0,0,0,0.18); border-left: 4px solid var(--green-2); /* prominent green accent */ } /* Muted card (aside) - light mode explicit defaults */ .card.muted { background: var(--card); color: var(--surface-text); border: 1px solid var(--border); box-shadow: none; } html.dark .card.muted { background: rgba(4,38,61,0.10); /* darker bluish surface */ color: var(--text); /* very light text to contrast */ border: 1px solid rgba(255,255,255,0.03); box-shadow: none; } /* Card titles (h3): default primary in light mode, dark (surface-text) on surfaces in dark mode */ .card .card-title{ margin:0 0 .5rem; font-size: 1.85rem; font-weight:700; color:var(--color-primary); } html.dark .card .card-title { color: var(--lightext); } /* UL/OL list color: inherit by default; ensure light lists on page background in dark mode */ ul, ol { color: inherit; } html.dark ul, html.dark ol { color: var(--text); } /* Remove underline from disabled links and make them visually muted across themes */ a[aria-disabled="true"]{ text-decoration:none !important; color:var(--muted) !important; cursor:default; pointer-events:none; } a[aria-disabled="true"]:hover, a[aria-disabled="true"]:focus{ text-decoration:none !important; color:var(--muted) !important; } /* Form controls */ .input, input[type="text"], textarea{ width:100%; padding:.5rem .75rem; border:1px solid var(--border); background:var(--surface); color:var(--surface-text); border-radius:.375rem; } .input:focus, textarea:focus{ outline:3px solid var(--focus); border-color:var(--color-primary); } /* Utilities / components display */ .utilities{ margin:1.5rem 0; } .components-grid{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; } /* Ensure components text on surfaces is readable in dark mode */ html.dark .components-grid, html.dark .components-grid .card, html.dark .components-grid button { color: var(--surface-text); } /* Footer */ .site-footer{ border-top:1px solid var(--border); padding:1rem 0; margin-top:2rem; background: linear-gradient(180deg, transparent, var(--primary-03)); } .footer-inner{ display:flex; gap:1rem; align-items:center; justify-content:space-between; font-size:.875rem; color:var(--muted); } html.dark .footer-inner{ color: var(--text); } /* Links - made bold globally, tuned per-mode */ a{ color:var(--color-primary); font-weight:700; /* anchors bold as requested */ } a:hover{ text-decoration:underline; } html.dark a { color: var(--text); font-weight:700; /* anchors bold in dark mode too */ } /* External image used in Hello card */ .external-image-container { min-width:100px; max-width:260px; margin: 0 auto; } .external-image { display:block; width:100%; margin: 0 auto; max-width:220px; height:auto; object-fit:fill; border-radius:8px; box-shadow: 0 8px 20px rgba(4,38,61,0.08); border: 1px solid rgba(4,38,61,0.04); background: var(--surface); } @media (min-width: 640px) { .external-image-container { max-width:320px; } .external-image { max-width:280px; } } @media (max-width: 420px) { .external-image-container { justify-content:center; max-width:100%; } .external-image { max-width:180px; } } html.dark .external-image { background: var(--surface); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 6px 16px rgba(0,0,0,0.25); } /* Responsive adjustments */ @media (max-width: 480px){ .brand-link{ padding-left:.75rem; padding-right:.75rem; } .header-actions .btn{ padding-left:.75rem; padding-right:.75rem; margin-right:.5rem; } .site-nav .nav-list li a{ padding-left:.5rem; padding-right:.5rem; } .header-inner{ padding:.6rem .5rem; } } @media (min-width: 640px){ .brand-link{ padding:0 .5rem; } .header-actions .btn{ padding:.45rem .65rem; margin-right:0; } .site-nav .nav-list li a{ height:44px; padding:.35rem .6rem; } } /* Accessibility helpers */ [aria-disabled="true"]{ opacity:.6; pointer-events:none; } /* Muted helper */ .muted{ color:var(--muted); } /* Additions for asset card component Place these at the end of public/css/meme.css (or merge into the file). */ .assets { border: 3px solid var(--border); border-radius: 8px; } html.dark .assets { border: 3px solid rgba(255,255,255,0.06); border-radius: 8px; } .assets-heading { font-size:2.8rem; margin:1.5rem 1.5rem 0.75rem 1.25rem; font-weight:900; color: var(--color-primary); } /* Code / name */ .asset-code { font-size:1rem; background: linear-gradient(90deg, rgba(5,102,141,0.03), transparent); padding:.15rem .5rem; border-radius:.375rem; color: var(--color-primary); border:1px solid rgba(5,102,141,0.06); } /* Issuer short display */ .issuer-row { display:inline-flex; align-items:center; gap:.5rem; } .issuer-short { display:inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; padding:.15rem .4rem; border-radius:.375rem; background: rgba(0,0,0,0.02); border: 1px solid rgba(4,38,61,0.04); font-weight:600; font-size:.9rem; } /* Copy button */ .issuer-copy { color:#04293A; display:inline-flex; align-items:center; justify-content:center; padding:.25rem .4rem; height:32px; border-radius:.375rem; background: transparent; border: 1px solid rgba(4,38,61,0.06); cursor:pointer; } .issuer-copy:hover, .issuer-copy:focus { background: var(--primary-03); outline: none; } /* Small visible status near copy for sighted users (transient) */ .copy-visual { display:inline-block; margin-left:.5rem; font-size:.85rem; color:var(--muted); } /* Asset image */ .asset-image { max-width:220px; width:100%; height:auto; border-radius:8px; object-fit:contain; background: var(--surface); border:1px solid rgba(4,38,61,0.04); box-shadow: 0 6px 18px rgba(4,38,61,0.06); } /* Badges */ .asset-badges .badge-small { color:#f7fbfb; background-color: var(--color-primary); padding:.2rem .45rem; font-size:.8rem; border-radius:.375rem; font-weight:700; } /* Scoped-ish rules for this component (safe to duplicate when rendering many cards) */ .asset-card--row .asset-row { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; /* allows stacking on narrow viewports */ } /* Left column (name above image) and right column (details) */ .asset-card--row .asset-left { flex: 0 0 40%; max-width: 40%; min-width:180px; display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; } .asset-card--row .asset-right { flex: 1 1 58%; max-width:58%; min-width:180px; display:flex; flex-direction:column; gap:.5rem; justify-content:flex-start; } /* small screens: stack columns */ @media (max-width: 560px) { .asset-card--row .asset-left, .asset-card--row .asset-right { flex: 1 1 100%; max-width:100%; } .asset-card--row .asset-left { order:0; } .asset-card--row .asset-right { order:1; } } /* visual tuning */ .asset-card--row .asset-code { display:inline-block; padding:.15rem .5rem; border-radius:.35rem; background: linear-gradient(90deg, rgba(5,102,141,0.03), transparent); border:1px solid rgba(5,102,141,0.06); color:var(--color-primary, #05668D); font-weight:700; } .asset-card--row .asset-name { font-weight:800; font-size:1.85rem; margin:0; } .asset-card--row .asset-desc { margin:0; color: #04293A; font-size:1.125rem; } .asset-card--row .issuer-row { display:inline-flex; align-items:center; gap:.5rem; padding:1rem; background:#E7E7E7; border-radius:.375rem; } .asset-card--row .issuer-short { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; padding:.15rem .4rem; border-radius:.35rem; background: rgba(0,0,0,0.02); border:1px solid rgba(4,38,61,0.04); font-weight:600; font-size:.9rem; } .asset-card--row .asset-image { width:100%; max-width:220px; height:auto; border-radius:8px; object-fit:contain; border:1px solid rgba(4,38,61,0.04); box-shadow: 0 6px 18px rgba(4,38,61,0.06); background: var(--surface, #fff); display:block; } .asset-website { color:#05668D; font-weight: bold; } .copy-btn { color: #04293A; font-weight:600; font-size:.8rem; margin-left:.4rem; }