Something went wrong. Try again.
add or update alt text on your media forked from psingletary.com/verifier
Something went wrong. Try again.
4.7 kB · 222 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222/* src/components/Definitions/Definitions.css */
.definitions-page { margin: 20px auto 20px; max-width: 450px; padding: 20px;}
.definitions-page .alt-card { text-align: left; }
.definitions-page ul { list-style: none; text-align: center; margin: 0px auto; padding: 0px; width: 100%; opacity: 0.5; }
.definitions-page { margin: 20px auto 40px; max-width: 450px; padding: 20px; } .definitions-page .alt-card { text-align: left; } .definitions-page h1 { margin-bottom: 20px; } .definitions-page h2 { margin-top: 30px; margin-bottom: 20px; } .definitions-page p { line-height: 1.5; } .intro-text { margin-bottom: 30px; font-size: 1.1em; } .back-to-methodology { margin: 20px 0; } .back-to-methodology a { color: var(--button-bg); text-decoration: none; display: inline-block; transition: all 0.2s ease; padding: 6px 12px; border-radius: 4px; background-color: rgba(59, 154, 248, 0.1); } .back-to-methodology a:hover { background-color: rgba(59, 154, 248, 0.2); text-decoration: underline; } .definitions-section { margin-bottom: 20px; } /* Definition accordion styles */ .definitions-container { margin-top: 20px; overflow: hidden; } .definition-item { margin-bottom: 10px; border-radius: 6px; background-color: var(--navbar-bg); overflow: hidden; transition: all 0.3s ease; border: 1px solid var(--card-border); } .definition-term { padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; cursor: pointer; background-color: var(--navbar-bg); color: var(--text); transition: background-color 0.3s ease, color 0.3s ease; font-family: articulat-cf; } .toggle-icon { font-size: 16px; font-weight: bold; color: var(--button-bg); transition: color 0.3s ease; } .definition-description { max-height: 0; margin-left: 0; overflow: hidden; padding: 0 15px; transition: all 0.3s ease; color: var(--text); } .definition-description.expanded { max-height: 500px; padding: 15px; border-top: 1px solid var(--card-border); margin-left: 0px; font-family: articulat-cf; } .definition-item:hover { border-color: var(--button-bg); } .definition-term:hover { background-color: var(--background); } /* Social status styles */ .social-statuses-container { margin-top: 15px; margin-bottom: 30px; } .social-statuses-container .definition-term { font-weight: 700; } /* Social status color indicators */ .social-statuses-container .definition-item:nth-child(1) .definition-term { border-left: 4px solid #e2e8f0; /* Lightest - Newcomer */ } .social-statuses-container .definition-item:nth-child(2) .definition-term { border-left: 4px solid #004F84; /* Explorer */ } .social-statuses-container .definition-item:nth-child(3) .definition-term { border-left: 4px solid #3B9AF8; /* Pathfinder */ } .social-statuses-container .definition-item:nth-child(4) .definition-term { border-left: 4px solid #FFA500; /* Guide */ } .social-statuses-container .definition-item:nth-child(5) .definition-term { border-left: 4px solid #FFD700; /* Darkest - Leader */ } /* Learn more link styles */ .learn-more-link { margin-top: 12px; font-size: 0.9em; text-align: right; } .learn-more-link a { color: var(--button-bg); text-decoration: none; display: inline-block; transition: all 0.2s ease; padding: 4px 8px; border-radius: 4px; } .learn-more-link a:hover { background-color: rgba(59, 154, 248, 0.1); text-decoration: underline; } /* Dark mode specific overrides */ .dark-mode .definition-item { background-color: var(--navbar-bg); border-color: var(--card-border); } .dark-mode .definition-term { background-color: var(--navbar-bg); } .dark-mode .definition-term:hover { background-color: #2d2d2d; } .dark-mode .toggle-icon { color: var(--button-bg); } .dark-mode .definition-description.expanded { border-top-color: var(--card-border); } .dark-mode .learn-more-link a { color: var(--button-bg); } .dark-mode .learn-more-link a:hover { background-color: rgba(59, 154, 248, 0.15); } .dark-mode .back-to-methodology a { color: var(--button-bg); background-color: rgba(59, 154, 248, 0.15); } .dark-mode .back-to-methodology a:hover { background-color: rgba(59, 154, 248, 0.25); }