/*
a {text-decoration: none;}
a.container-header {text-decoration: none;}
a.navbar-brand {text-decoration: none;}
.mod-list li.active>a {text-decoration: none;}
a:not([class]) {text-decoration: none;}
*/
/*Custom generated CSS code for experiment*/
/* ==========================================================================
Cassiopeia user.css for sholjanitsolutions.com (Joomla 5)
Purpose: Blogging - Best reading experience, accessibility, responsive.
Author: Tutonn & Tala (generated)
Notes:
- Uses CSS variables for easy color/font tweaks.
- Designed to work with Bootstrap defaults; only visual overrides provided.
- Save as /templates/cassiopeia-child/css/user.css or /templates/cassiopeia/css/user.css
- Preload your Google Fonts in (example shown in docs). See top comments below.
========================================================================== */
/* ---------- CONFIG: Colors & Fonts ---------- */
/* Your calming palette — tweak as needed */
:root{
--brand-purple: #C8B8F2; /* light purple */
--brand-purple-dark: #9C84E0;
--brand-brown: #8B6B5A; /* warm brown */
--brand-brown-light: #B89A8A;
--brand-cyan: #7FD6D6; /* soft cyan */
--brand-cyan-dark:#4FB3B3;
--brand-olive: #A9B07A; /* olive green */
--brand-olive-dark:#818B50;
--text-color: #222222;
--muted: #6b6b6b;
--bg: #FAFBFC; /* soft near-white background for reading */
--card-bg: #ffffff;
--focus-color: var(--brand-cyan-dark);
/* Typography: feel free to change - suggest preloading Inter + Lora */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
--font-serif: "Lora", Georgia, "Times New Roman", serif;
--base-font-size: 18px; /* comfortable reading size */
--line-height: 1.75; /* improves readability */
--max-content-width: 900px; /* main content column width for reading */
}
/* ---------- Global reset / base ---------- */
html,body {
background: var(--bg);
color: var(--text-color);
font-family: var(--font-sans);
font-size: var(--base-font-size);
line-height: var(--line-height);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
scroll-behavior: smooth; /* smooth scroll for anchors */
}
/* Make content column readable and centered */
.wrapper, .container, .page {
/* don't squash on small devices; layout controlled by template container */
}
/* Limit article width for best reading experience */
.article, .content, main, .blog-article, .article-body, .article-intro {
max-width: var(--max-content-width);
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
/* ---------- Typography ---------- */
/* Headings: serif for editorial feel, larger weights */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
color: var(--brand-olive-dark); /*brand-purple-dark*/
margin-top: 1.25em;
margin-bottom: 0.5em;
word-break: break-word;
}
h1 { font-size: 2.25rem; line-height: 1.15; }
h2 { font-size: 1.7rem; line-height: 1.25; }
h3 { font-size: 1.35rem; line-height: 1.3; }
h4 { font-size: 1.1rem; line-height: 1.35; }
/* Paragraphs and small text */
p, li {
color: var(--text-color);
margin-bottom: 1.05rem;
font-size: 1rem;
}
/* Lead/intro paragraph */
.article-intro p, .lead, .intro {
font-size: 1.125rem;
color: #2c2c2c;
margin-bottom: 1.25rem;
}
/* ---------- Links (no underline) ---------- */
a {
color: var(--brand-purple-dark);
text-decoration: none; /* no underline as requested */
transition: background-color .18s ease, color .12s ease;
border-bottom: 0; /* ensure no underline */
padding-bottom: .05rem;
border-radius: 3px;
}
/* Hover: subtle background highlight instead of underline */
a:hover, a:focus {
color: var(--brand-purple-dark);
background: rgba(156,132,224,0.08);
outline: none;
text-decoration: none;
}
/* Focus visible: accessible */
a:focus-visible {
box-shadow: 0 0 0 3px rgba(127,214,214,0.25);
border-radius: 4px;
}
/* External link indicator (optional) */
a[target="_blank"]::after{
content: "↗";
font-size: .8em;
margin-left: .2rem;
opacity: .6;
}
/* ---------- Skip-to-content (screen-reader + keyboard) ---------- */
.skip-to-content {
position: absolute;
top: -40px;
left: 0;
background: var(--brand-cyan);
color: #fff;
padding: .5rem 1rem;
z-index: 9999;
border-radius: 0 0 6px 6px;
transition: top .18s ease;
}
.skip-to-content:focus {
top: 0;
}
/* ---------- Featured image and images ---------- */
.article-featured, .article-image, .article .img-responsive, .content img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(34,34,34,0.06);
object-fit: cover;
margin: 1rem 0;
}
/* Figure captions */
figure figcaption, .wp-caption-text {
font-size: .9rem;
color: var(--muted);
margin-top: .45rem;
}
/* ---------- Buttons (rounded + shadow + push animation) ---------- */
.btn {
border-radius: 14px;
padding: .6rem 1rem;
box-shadow: 0 6px 14px rgba(34,34,34,0.06);
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
border: none;
}
/* Primary brand button */
.btn-primary, .btn-brand {
background: linear-gradient(180deg, var(--brand-purple) 0%, var(--brand-purple-dark) 100%);
color: white;
}
/* On hover lift */
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(34,34,34,0.09);
}
/* On active (push down) */
.btn:active {
transform: translateY(2px) scale(.995);
box-shadow: 0 4px 8px rgba(34,34,34,0.06);
transition: transform .06s ease;
}
/* Focus visible for buttons */
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(169,176,122,0.22);
}
/* Tiny accessible animation — prefer-reduced-motion respects user setting */
@media (prefers-reduced-motion: reduce) {
.btn, a, * { transition: none !important; animation: none !important; }
}
/* ---------- Push down/up animation for clickable elements ---------- */
/* General utility class you can add where needed */
.push-anim {
transition: transform .08s ease, box-shadow .08s ease;
}
.push-anim:active { transform: translateY(3px) scale(.997); }
/* ---------- Badges, categories, labels ---------- */
.badge, .label {
border-radius: 999px;
padding: .28rem .55rem;
font-size: .85rem;
background: var(--brand-olive);
color: #fff;
}
/* Variants */
.badge-purple { background: var(--brand-purple-dark); }
.badge-cyan { background: var(--brand-cyan-dark); color: #073233; }
/* ---------- Author metadata ---------- */
.article-meta, .post-meta, .article-info {
color: var(--muted);
font-size: .95rem;
display: flex;
gap: .6rem;
align-items: center;
margin-bottom: 1rem;
}
.article-meta .author { font-weight: 600; color: var(--brand-brown); }
/* ---------- Blockquotes & callouts ---------- */
blockquote {
border-left: 5px solid var(--brand-cyan-dark);
background: rgba(127,214,214,0.05);
padding: .9rem 1rem;
margin: 1.1rem 0;
border-radius: 6px;
font-style: italic;
}
/* Highlight box for tips/notes */
.callout {
border-radius: 8px;
padding: .9rem 1rem;
background: linear-gradient(180deg, rgba(168,150,130,0.04), rgba(168,150,130,0.02));
border: 1px solid rgba(139,107,90,0.06);
}
/* ---------- Code / preformatted ---------- */
pre, code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
background: #f6f7f8;
padding: .6rem .8rem;
border-radius: 6px;
overflow: auto;
}
/* ---------- Tables (Bootstrap default with custom accents) ---------- */
.table {
border-collapse: collapse;
width: 100%;
background: var(--card-bg);
border-radius: 8px;
overflow: hidden;
}
.table thead {
background: linear-gradient(180deg, rgba(156,132,224,0.06), rgba(156,132,224,0.02));
}
.table th, .table td {
padding: .8rem .9rem;
border-bottom: 1px solid rgba(34,34,34,0.05);
vertical-align: middle;
font-size: .96rem;
}
.table tbody tr:hover { background: rgba(127,214,214,0.03); }
/* Responsive table: horizontal scroll on small devices */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ---------- Bootstrap components: accordion, tabs, tooltips ---------- */
/* Accordion button */
.accordion-button {
border-radius: 8px;
background: linear-gradient(180deg, rgba(127,214,214,0.02), transparent);
color: var(--text-color);
transition: background .12s ease;
}
.accordion-button:not(.collapsed) {
background: linear-gradient(180deg, rgba(156,132,224,0.06), rgba(156,132,224,0.02));
color: var(--brand-purple-dark);
}
/* Tabs */
.nav-tabs .nav-link {
border: 0;
padding: .6rem 1rem;
border-radius: 10px;
margin-right: .35rem;
color: var(--muted);
}
.nav-tabs .nav-link.active {
background: linear-gradient(180deg, var(--brand-cyan), var(--brand-cyan-dark));
color: #072b2b;
box-shadow: 0 8px 18px rgba(37,142,142,0.08);
}
/* Tooltips (Bootstrap uses .tooltip-inner) */
.tooltip .tooltip-inner, .tooltip-inner {
background: var(--brand-brown);
color: #fff;
font-size: .9rem;
border-radius: 6px;
padding: .45rem .6rem;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before {
border-top-color: var(--brand-brown) !important;
}
/* ---------- Pagination ---------- */
.pagination .page-item .page-link {
border-radius: 10px;
background: var(--card-bg);
color: var(--text-color);
}
.pagination .page-item .page-link:hover {
background: var(--brand-purple);
color: #fff;
}
/* ---------- Related posts / card styles ---------- */
.related-posts .card, .post-card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: 0 8px 22px rgba(34,34,34,0.05);
overflow: hidden;
transition: transform .12s ease, box-shadow .12s ease;
}
.related-posts .card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(34,34,34,0.08);
}
/* ---------- Forms / inputs ---------- */
input[type="text"], input[type="email"], textarea, select {
border-radius: 10px;
border: 1px solid rgba(34,34,34,0.08);
padding: .6rem .8rem;
font-size: 1rem;
}
input:focus, textarea:focus, select:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(127,214,214,0.12);
border-color: var(--brand-cyan-dark);
}
/* ---------- Header / Menu color-only customization ----------
(Stickiness is set in admin; here only colors/visuals are applied)
--------------------------------------------------------------- */
.header, .navbar, .site-header, .navbar-expand-lg {
background: rgba(255,255,255,0.98);
backdrop-filter: blur(4px);
border-bottom: 1px solid rgba(34,34,34,0.04);
}
.navbar a, .nav-link {
color: var(--brand-brown);
padding: .55rem .6rem;
border-radius: 6px;
}
.navbar a:hover, .nav-link:hover, .nav-link:focus {
background: rgba(156,132,224,0.06);
color: var(--brand-purple-dark);
}
/* For sticky header state (often .is-sticky or .sticky) */
.header.is-sticky, .site-header.is-sticky {
box-shadow: 0 8px 20px rgba(34,34,34,0.06);
}
/* ---------- Accessibility: Focus & Contrast ---------- */
/* Strong focus styles for interactive elements */
:focus {
outline: none;
}
:focus-visible {
box-shadow: 0 0 0 4px rgba(127,214,214,0.18);
border-radius: 6px;
}
/* Respect user prefers-contrast */
@media (prefers-contrast: more) {
:root {
--text-color: #0b0b0b;
}
a { text-decoration: underline; } /* if user requests high contrast, show underline for clarity */
}
/* ---------- High contrast toggle class ----------
You can toggle .high-contrast on for a quick accessible view
--------------------------------------------------------------- */
body.high-contrast {
background: #fff;
color: #000;
}
body.high-contrast a { color: #0000EE; text-decoration: underline; }
body.high-contrast .article { background: #fff; }
/* ---------- Print friendly ---------- */
@media print {
body { color: #000; background: #fff; }
.nav, .header, .footer, .btn, .sidebar { display: none !important; }
.article, .content { max-width: 100%; padding: 0; }
}
/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
:root { --base-font-size: 17px; --max-content-width: 100%; }
.nav-tabs .nav-link { margin-bottom: .35rem; }
h1 { font-size: 1.6rem; }
}
/* ---------- Helpful utilities ---------- */
.text-muted { color: var(--muted) !important; }
.center { text-align: center; }
/* ---------- Small helper to ensure Bootstrap table elements get our theme ----- */
.table.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(127,214,214,0.02); }
/* ---------- End of user.css ---------- */
/* ========================================================================
Implementation notes & quick checklist (put in your template documentation):
1) Preload fonts in head for better performance:
2) Font fallback: If you change font names, update :root variables.
3) Open Graph meta tags:
As you said, add OG tags into index.php (template) or via an SEO plugin.
Example (short):
4) Cassiopeia auto-loads user.css in the template folder by default. If using child template, ensure your child template's index.php calls JLayout or loads template css as needed.
5) Accessibility checks:
- Ensure focusable elements exist; don't remove focus styles in JS.
- Use aria-* attributes for accordions/tabs if you use custom markup.
=========================================================================== */
/*End of custom CSS*/