Turn Intention Into Action
Confidence doesn’t always arrive with a bold entrance. Sometimes, it builds quietly, step by step, as we show up for ourselves day after day. It grows when we choose to try, even when we’re unsure of the outcome. Every time you take action despite self-doubt, you reinforce the belief that you’re capable. Confidence isn’t about having all the answers — it’s about trusting that you can figure it out along the way.
The key to making things happen isn’t waiting for the perfect moment; it’s starting with what you have, where you are. Big goals can feel overwhelming when viewed all at once, but momentum builds through small, consistent action. Whether you’re working toward a personal milestone or a professional dream, progress comes from showing up — not perfectly, but persistently. Action creates clarity, and over time, those steps forward add up to something real.
You don’t need to be fearless to reach your goals, you just need to be willing. Willing to try, willing to learn, and willing to believe that you’re capable of more than you know. The road may not always be smooth, but growth rarely is. What matters most is that you keep going, keep learning, and keep believing in the version of yourself you’re becoming.
/* ==================================================
THE SQUARE GENIUS
SQUARESPACE DIRECTORY PLUGIN
================================================== */
:root {
--tsg-dir-bg: #E4E1CF;
--tsg-dir-card-bg: #ffffff;
--tsg-dir-text: #1f1f1f;
--tsg-dir-muted: #666666;
--tsg-dir-border: #e6e6e6;
--tsg-dir-accent: #5c6f62;
--tsg-dir-accent-text: #ffffff;
--tsg-dir-radius: 20px;
--tsg-dir-gap: 20px;
}
/* ==================================================
OUTER WRAPPER
================================================== */
.tsg-directory-wrap {
position: relative;
z-index: 1;
width: 100%;
max-width: 1400px;
margin: 40px auto 30px;
padding: 0 30px;
box-sizing: border-box;
}
/* ==================================================
CONTROLS
================================================== */
.tsg-directory-controls {
position: relative;
padding: 28px;
margin-bottom: 22px;
overflow: visible;
background: var(--tsg-dir-bg);
border: 1px solid var(--tsg-dir-border);
border-radius: var(--tsg-dir-radius);
box-sizing: border-box;
}
.tsg-directory-topbar {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
gap: 36px;
width: 100%;
box-sizing: border-box;
}
/* ==================================================
SEARCH
================================================== */
.tsg-directory-search-wrap {
position: relative;
flex: 1 1 0 !important;
width: auto !important;
max-width: 880px !important;
min-width: 0 !important;
overflow: visible;
}
.tsg-directory-search {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 52px !important;
margin: 0 !important;
padding: 0 52px 0 18px !important;
background: #fff !important;
border: 1px solid var(--tsg-dir-border) !important;
border-radius: 999px !important;
color: var(--tsg-dir-text) !important;
font-size: 16px !important;
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.tsg-directory-search:hover {
background: #f2f1ed !important;
}
.tsg-directory-clear {
position: absolute;
top: 50%;
right: 10px;
display: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
transform: translateY(-50%);
background: var(--tsg-dir-accent);
border: 0;
border-radius: 999px;
color: #fff;
font-size: 22px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
.tsg-directory-clear:hover {
background: #6d7c72;
}
.tsg-directory-clear.is-visible {
display: flex;
}
/* ==================================================
SORT
================================================== */
.tsg-directory-sort-wrap {
position: relative;
flex: 0 0 200px !important;
width: 200px !important;
min-width: 0;
box-sizing: border-box;
}
.tsg-directory-sort-toggle {
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100% !important;
min-height: 52px !important;
padding: 0 18px !important;
background: #fff !important;
border: 1px solid var(--tsg-dir-border) !important;
border-radius: 999px !important;
color: var(--tsg-dir-text) !important;
font-size: 15px !important;
cursor: pointer;
box-sizing: border-box !important;
}
.tsg-directory-sort-toggle.is-active {
border-color: var(--tsg-dir-accent) !important;
}
.tsg-directory-sort-label {
overflow: hidden;
padding-right: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.tsg-directory-sort-icon {
flex: 0 0 auto;
font-size: 18px;
line-height: 1;
transition: transform 0.2s ease;
}
.tsg-directory-sort-toggle.is-active .tsg-directory-sort-icon {
transform: rotate(180deg);
}
.tsg-directory-sort-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
left: 0;
z-index: 30;
display: none;
padding: 12px;
background: #fff;
border: 1px solid var(--tsg-dir-border);
border-radius: 18px;
}
.tsg-directory-sort-panel.is-open {
display: block;
}
.tsg-directory-sort-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.tsg-directory-sort-item {
width: 100%;
padding: 12px 14px;
appearance: none;
background: #fff;
border: 1px solid var(--tsg-dir-border);
border-radius: 14px;
color: var(--tsg-dir-text);
font-size: 15px;
line-height: 1.2;
text-align: left;
cursor: pointer;
box-sizing: border-box;
}
.tsg-directory-sort-item.is-active {
background: var(--tsg-dir-accent);
border-color: var(--tsg-dir-accent);
color: var(--tsg-dir-accent-text);
}
/* ==================================================
DESKTOP FILTERS
================================================== */
.tsg-directory-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.tsg-directory-chip {
padding: 10px 14px;
appearance: none;
background: #fff;
border: 1px solid var(--tsg-dir-border);
border-radius: 999px;
color: var(--tsg-dir-text);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: transform 0.2s ease;
box-sizing: border-box;
}
.tsg-directory-chip:hover {
transform: translateY(-1px);
}
.tsg-directory-chip.is-active {
background: var(--tsg-dir-accent);
border-color: var(--tsg-dir-accent);
color: var(--tsg-dir-accent-text);
}
/* ==================================================
MOBILE FILTER DEFAULTS
================================================== */
.tsg-directory-mobile-filter-toggle,
.tsg-directory-mobile-filter-panel {
display: none;
}
/* ==================================================
COUNT
================================================== */
.tsg-directory-count {
margin: 16px 2px 0;
color: var(--tsg-dir-muted);
font-size: 14px;
}
/* ==================================================
GRID
================================================== */
.tsg-directory-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--tsg-dir-gap);
align-items: start;
justify-content: start;
margin-top: 24px;
}
/* ==================================================
CARD
================================================== */
.tsg-directory-card {
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
overflow: hidden;
background: var(--tsg-dir-card-bg);
border: 1px solid var(--tsg-dir-border);
border-radius: 24px;
color: inherit;
text-decoration: none;
transition: transform 0.2s ease;
}
.tsg-directory-card:hover {
transform: translateY(-4px);
}
/* ==================================================
CARD IMAGE
Images fill a 3:2 landscape area.
Change 3 / 2 to:
4 / 3 for a taller image
1 / 1 for a square image
================================================== */
.tsg-directory-card-image {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #ececec;
}
.tsg-directory-card-image img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
/* ==================================================
CARD CONTENT
================================================== */
.tsg-directory-card-body {
padding: 22px;
}
.tsg-directory-card-title {
margin: 0;
color: var(--tsg-dir-text);
font-size: 1.15rem;
line-height: 1.25;
}
/* Excerpts are not generated by the JavaScript.
This rule also hides any legacy excerpt elements. */
.tsg-directory-card-excerpt {
display: none !important;
}
.tsg-directory-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.tsg-directory-pill {
display: inline-flex;
align-items: center;
padding: 8px 10px;
background: #f1f3f2;
border-radius: 999px;
color: var(--tsg-dir-text);
font-size: 12px;
line-height: 1;
}
/* ==================================================
EMPTY STATE
================================================== */
.tsg-directory-empty {
margin-top: 22px;
padding: 22px;
background: #fff;
border: 1px dashed var(--tsg-dir-border);
border-radius: var(--tsg-dir-radius);
color: var(--tsg-dir-muted);
}
/* ==================================================
SHOW MORE BUTTON
================================================== */
.tsg-directory-load-more-wrap {
display: flex;
justify-content: center;
margin-top: 30px;
}
.tsg-directory-load-more {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 13px 24px;
background: var(--tsg-dir-accent);
border: 1px solid var(--tsg-dir-accent);
border-radius: 999px;
color: var(--tsg-dir-accent-text);
font: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.tsg-directory-load-more:hover:not(:disabled) {
transform: translateY(-2px);
}
.tsg-directory-load-more:disabled {
cursor: wait;
opacity: 0.65;
}
.tsg-directory-load-more.is-loading::after {
content: '';
width: 14px;
height: 14px;
margin-left: 10px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: tsg-directory-spin 0.75s linear infinite;
}
@keyframes tsg-directory-spin {
to {
transform: rotate(360deg);
}
}
/* ==================================================
HIDE ORIGINAL BLOG CONTENT
================================================== */
.tsg-directory-source,
.tsg-directory-original-grid {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
}
.tsg-directory-active .blog-list-pagination {
display: none !important;
}
/* ==================================================
RESPONSIVE
================================================== */
@media screen and (max-width: 1200px) {
.tsg-directory-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 900px) {
.tsg-directory-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tsg-directory-sort-wrap {
flex-basis: 180px !important;
width: 180px !important;
}
}
@media screen and (max-width: 767px) {
.tsg-directory-wrap {
padding-right: 16px;
padding-left: 16px;
}
.tsg-directory-controls {
padding: 18px;
border-radius: 28px;
}
.tsg-directory-topbar {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
gap: 14px !important;
}
.tsg-directory-search-wrap,
.tsg-directory-sort-wrap {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
}
.tsg-directory-search,
.tsg-directory-sort-toggle {
min-height: 56px !important;
}
.tsg-directory-clear {
width: 30px;
height: 30px;
font-size: 20px;
}
.tsg-directory-filters {
display: none !important;
}
.tsg-directory-mobile-filter-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 56px;
margin-top: 14px !important;
padding: 0 18px;
background: #fff;
border: 1px solid var(--tsg-dir-border);
border-radius: 999px;
color: var(--tsg-dir-text);
font-size: 16px;
cursor: pointer;
box-sizing: border-box;
}
.tsg-directory-mobile-filter-toggle.is-active {
border-color: var(--tsg-dir-accent);
}
.tsg-directory-mobile-filter-label {
overflow: hidden;
padding-right: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.tsg-directory-mobile-filter-icon {
flex: 0 0 auto;
font-size: 18px;
line-height: 1;
transition: transform 0.2s ease;
}
.tsg-directory-mobile-filter-toggle.is-active
.tsg-directory-mobile-filter-icon {
transform: rotate(180deg);
}
.tsg-directory-mobile-filter-panel {
position: absolute;
right: 18px;
left: 18px;
z-index: 30;
display: none;
margin-top: 8px;
padding: 12px;
background: #fff;
border: 1px solid var(--tsg-dir-border);
border-radius: 18px;
}
.tsg-directory-mobile-filter-panel.is-open {
display: block;
}
.tsg-directory-mobile-filter-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 280px;
overflow-y: auto;
}
.tsg-directory-mobile-filter-item {
width: 100%;
padding: 12px 14px;
appearance: none;
background: #fff;
border: 1px solid var(--tsg-dir-border);
border-radius: 14px;
color: var(--tsg-dir-text);
font-size: 15px;
line-height: 1.2;
text-align: left;
cursor: pointer;
box-sizing: border-box;
}
.tsg-directory-mobile-filter-item.is-active {
background: var(--tsg-dir-accent);
border-color: var(--tsg-dir-accent);
color: var(--tsg-dir-accent-text);
}
/* Mobile card image */
.tsg-directory-card-image {
position: relative !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 2 !important;
overflow: hidden !important;
}
.tsg-directory-card-image img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center !important;
}
.tsg-directory-load-more {
width: 100%;
}
}
@media screen and (max-width: 640px) {
.tsg-directory-grid {
grid-template-columns: 1fr;
}
.tsg-directory-card-body {
padding: 18px;
}
.tsg-directory-card-title {
font-size: 1.05rem;
}
}
/* ==================================================
REDUCED MOTION
================================================== */
@media (prefers-reduced-motion: reduce) {
.tsg-directory-card,
.tsg-directory-chip,
.tsg-directory-load-more,
.tsg-directory-sort-icon,
.tsg-directory-mobile-filter-icon {
animation: none !important;
transition: none !important;
}
}