/* =============================================================================
Calculator platform — frontend stylesheet
-----------------------------------------------------------------------------
Conventions
- Namespace every custom class with `oc-` so nothing collides with
Bootstrap utilities.
- Drive colors, spacing and radii through CSS custom properties so the
whole theme can be swapped by editing :root.
- Layer on top of Bootstrap 5; don't redefine Bootstrap's own helpers.
Table of contents
1. Design tokens (:root)
2. Base + typography
3. Buttons
4. Forms
5. Header + navigation
6. Search autocomplete
7. Mobile menu (offcanvas)
8. Hero sections
9. Cards — category, calculator, article
10. Breadcrumbs
11. Pagination
12. Calculator detail page
13. Result panel + amortization tables
14. Prose / editorial typography
15. Callouts, sources, FAQs
16. Author pages + author box
17. Footer
18. Back-to-top, toasts, loading states
19. Admin neutral shell
20. Accessibility + motion
21. Responsive refinements
============================================================================= */
/* -----------------------------------------------------------------------------
1. Design tokens
----------------------------------------------------------------------------- */
:root {
/* Brand palette — blue accent on a cool neutral background. */
--oc-brand: #2563eb;
--oc-brand-dark: #1d4ed8;
--oc-brand-darker: #1e40af;
--oc-brand-light: #eff6ff;
--oc-brand-subtle: #dbeafe;
/* Secondary accents */
--oc-accent: #f59e0b; /* featured / warning badges */
--oc-success: #059669;
--oc-danger: #dc2626;
--oc-warning: #d97706;
/* Neutrals */
--oc-text: #0f172a; /* slate-900, primary copy */
--oc-text-body: #334155; /* slate-700, body text */
--oc-text-muted: #64748b; /* slate-500 */
--oc-text-subtle: #94a3b8; /* slate-400 */
--oc-bg: #f8fafc; /* page background */
--oc-surface: #ffffff; /* card surface */
--oc-surface-soft: #f1f5f9; /* alt surface / hovers */
--oc-border: #e2e8f0; /* slate-200 */
--oc-border-strong: #cbd5e1;
/* Shape */
--oc-radius-xs: .375rem;
--oc-radius-sm: .5rem;
--oc-radius: .75rem;
--oc-radius-lg: 1rem;
--oc-radius-xl: 1.5rem;
/* Shadows — soft and layered for a premium feel */
--oc-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
--oc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
--oc-shadow: 0 4px 16px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
--oc-shadow-md: 0 8px 24px rgba(15, 23, 42, .08), 0 3px 8px rgba(15, 23, 42, .05);
--oc-shadow-lg: 0 16px 40px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .06);
/* Typography */
--oc-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--oc-font-serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
--oc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
/* Layout */
--oc-header-h: 72px;
--oc-sticky-offset: 88px;
/* Bootstrap override — re-map Bootstrap's primary so default components
(alerts, badges) pick up our brand without us restyling each one. */
--bs-primary: #2563eb;
--bs-primary-rgb: 37, 99, 235;
--bs-link-color: var(--oc-brand);
--bs-link-hover-color: var(--oc-brand-dark);
}
/* -----------------------------------------------------------------------------
2. Base + typography
----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: var(--oc-sticky-offset);
}
body.oc-body {
font-family: var(--oc-font-sans);
font-size: 16px;
line-height: 1.55;
color: var(--oc-text);
background: var(--oc-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--oc-font-sans);
color: var(--oc-text);
letter-spacing: -0.015em;
line-height: 1.25;
}
h1, .h1 { font-weight: 800; letter-spacing: -0.025em; }
h2, .h2 { font-weight: 700; }
h3, .h3 { font-weight: 700; }
p { margin-bottom: 1rem; }
a { color: var(--oc-brand); text-decoration: none; transition: color .12s ease; }
a:hover { color: var(--oc-brand-dark); text-decoration: underline; text-underline-offset: 2px; }
hr { border-color: var(--oc-border); opacity: 1; }
::selection { background: var(--oc-brand-subtle); color: var(--oc-brand-darker); }
.oc-skip-link {
position: absolute; top: 0; left: 0;
padding: .5rem 1rem;
background: var(--oc-text);
color: #fff;
z-index: 1080;
border-bottom-right-radius: var(--oc-radius-sm);
}
.oc-text-muted { color: var(--oc-text-muted) !important; }
.oc-text-subtle { color: var(--oc-text-subtle) !important; }
.oc-text-brand { color: var(--oc-brand) !important; }
.oc-bg-brand-soft { background: var(--oc-brand-light) !important; }
.oc-bg-surface { background: var(--oc-surface) !important; }
.oc-bg-soft { background: var(--oc-surface-soft) !important; }
.oc-border { border: 1px solid var(--oc-border) !important; }
.oc-border-top { border-top: 1px solid var(--oc-border) !important; }
.oc-border-bottom { border-bottom: 1px solid var(--oc-border) !important; }
.oc-rounded { border-radius: var(--oc-radius) !important; }
.oc-rounded-lg { border-radius: var(--oc-radius-lg) !important; }
.oc-rounded-xl { border-radius: var(--oc-radius-xl) !important; }
.oc-shadow { box-shadow: var(--oc-shadow) !important; }
.oc-shadow-lg { box-shadow: var(--oc-shadow-lg) !important; }
.oc-mono { font-family: var(--oc-font-mono); }
.oc-tabular { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }
.object-fit-cover { object-fit: cover; }
/* -----------------------------------------------------------------------------
3. Buttons
----------------------------------------------------------------------------- */
.btn {
font-weight: 500;
border-radius: var(--oc-radius-sm);
transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:focus, .btn:focus-visible {
box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .2);
outline: 0;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
--bs-btn-bg: var(--oc-brand);
--bs-btn-border-color: var(--oc-brand);
--bs-btn-hover-bg: var(--oc-brand-dark);
--bs-btn-hover-border-color: var(--oc-brand-dark);
--bs-btn-active-bg: var(--oc-brand-darker);
--bs-btn-active-border-color: var(--oc-brand-darker);
box-shadow: 0 1px 2px rgba(37, 99, 235, .18);
}
.btn-primary:hover { box-shadow: 0 4px 12px rgba(37, 99, 235, .28); }
.btn-outline-primary {
--bs-btn-color: var(--oc-brand);
--bs-btn-border-color: var(--oc-brand);
--bs-btn-hover-bg: var(--oc-brand);
--bs-btn-hover-border-color: var(--oc-brand);
}
.btn-outline-secondary {
--bs-btn-color: var(--oc-text-body);
--bs-btn-border-color: var(--oc-border-strong);
--bs-btn-hover-bg: var(--oc-surface-soft);
--bs-btn-hover-border-color: var(--oc-text-muted);
--bs-btn-hover-color: var(--oc-text);
}
.btn-link { text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.oc-btn-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 2.25rem; height: 2.25rem;
padding: 0;
border-radius: 999px;
}
.oc-btn-pill { border-radius: 999px !important; padding-left: 1.15rem; padding-right: 1.15rem; }
/* -----------------------------------------------------------------------------
4. Forms
----------------------------------------------------------------------------- */
.form-label {
font-weight: 500;
color: var(--oc-text);
margin-bottom: .35rem;
}
.form-control,
.form-select {
border-color: var(--oc-border);
border-radius: var(--oc-radius-sm);
color: var(--oc-text);
background-color: var(--oc-surface);
transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control::placeholder { color: var(--oc-text-subtle); }
.form-control:focus,
.form-select:focus {
border-color: var(--oc-brand);
box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}
.form-control.is-invalid,
.form-select.is-invalid {
border-color: var(--oc-danger);
}
.invalid-feedback { color: var(--oc-danger); }
.input-group-text {
background: var(--oc-surface-soft);
border-color: var(--oc-border);
color: var(--oc-text-muted);
}
.form-check-input:checked {
background-color: var(--oc-brand);
border-color: var(--oc-brand);
}
.form-check-input:focus {
box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
border-color: var(--oc-brand);
}
.form-range::-webkit-slider-thumb { background: var(--oc-brand); }
.form-range::-moz-range-thumb { background: var(--oc-brand); }
/* -----------------------------------------------------------------------------
5. Header + navigation
----------------------------------------------------------------------------- */
.oc-header {
position: sticky;
top: 0;
z-index: 1030;
background: rgba(255, 255, 255, .92);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--oc-border);
}
.oc-header__inner {
display: flex;
align-items: center;
gap: 1.25rem;
min-height: var(--oc-header-h);
}
.oc-brand {
display: inline-flex; align-items: center; gap: .55rem;
font-weight: 800;
letter-spacing: -0.02em;
font-size: 1.15rem;
color: var(--oc-text) !important;
text-decoration: none;
}
.oc-brand:hover { color: var(--oc-text) !important; }
.oc-brand__mark {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: .55rem;
background: linear-gradient(135deg, var(--oc-brand) 0%, var(--oc-brand-dark) 100%);
color: #fff;
box-shadow: 0 4px 10px rgba(37, 99, 235, .35);
font-weight: 800;
}
.oc-nav { display: flex; align-items: center; gap: .25rem; }
.oc-nav a.nav-link {
color: var(--oc-text-body);
font-weight: 500;
padding: .5rem .9rem;
border-radius: var(--oc-radius-sm);
transition: background .12s ease, color .12s ease;
}
.oc-nav a.nav-link:hover,
.oc-nav a.nav-link.active {
color: var(--oc-brand);
background: var(--oc-brand-light);
text-decoration: none;
}
/* Mega-menu for category dropdown */
.oc-mega-menu {
min-width: 680px;
padding: 1.25rem;
border-radius: var(--oc-radius);
border: 1px solid var(--oc-border);
box-shadow: var(--oc-shadow-lg);
background: #fff;
}
.oc-mega-menu .oc-mega-col a {
display: flex; gap: .6rem; align-items: flex-start;
padding: .55rem .75rem;
border-radius: var(--oc-radius-sm);
color: var(--oc-text-body);
text-decoration: none;
transition: background .12s ease, color .12s ease;
}
.oc-mega-menu .oc-mega-col a:hover {
background: var(--oc-brand-light);
color: var(--oc-brand-dark);
}
.oc-mega-menu .oc-mega-heading {
font-size: .75rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--oc-text-subtle);
font-weight: 600;
padding: 0 .75rem .5rem;
}
/* -----------------------------------------------------------------------------
6. Search autocomplete
----------------------------------------------------------------------------- */
.oc-search {
position: relative;
min-width: 320px;
flex: 1 1 auto;
max-width: 520px;
}
.oc-search .input-group {
background: var(--oc-surface-soft);
border-radius: 999px;
padding: .2rem .2rem .2rem .85rem;
transition: background .15s ease, box-shadow .15s ease;
}
.oc-search .input-group:focus-within {
background: #fff;
box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12), var(--oc-shadow-sm);
}
.oc-search .form-control {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding-left: 0;
}
.oc-search .form-control:focus { box-shadow: none !important; }
.oc-search .input-group-text {
background: transparent;
border: 0;
color: var(--oc-text-muted);
}
.oc-search .btn {
border-radius: 999px;
}
.oc-search-suggest {
max-height: 440px;
overflow-y: auto;
border-radius: var(--oc-radius);
box-shadow: var(--oc-shadow-lg);
border: 1px solid var(--oc-border);
z-index: 1050;
padding: .35rem 0;
}
.oc-suggest-group + .oc-suggest-group { border-top: 1px solid var(--oc-border); margin-top: .35rem; padding-top: .35rem; }
.oc-suggest-heading {
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--oc-text-subtle);
padding: .5rem .9rem .35rem;
}
.oc-suggest-item {
cursor: pointer;
padding: .6rem .9rem;
display: flex;
align-items: center;
gap: .6rem;
color: var(--oc-text-body);
transition: background .1s ease, color .1s ease;
}
.oc-suggest-item:hover,
.oc-suggest-item.is-active {
background: var(--oc-brand-light);
color: var(--oc-brand-darker);
}
.oc-suggest-item i { color: var(--oc-text-subtle); }
.oc-suggest-item.is-active i,
.oc-suggest-item:hover i { color: var(--oc-brand); }
.oc-suggest-mark {
background: #fef3c7;
padding: 0 2px;
border-radius: 2px;
font-weight: 600;
}
.oc-suggest-footer {
padding: .55rem .9rem .35rem;
border-top: 1px solid var(--oc-border);
background: var(--oc-surface-soft);
}
.oc-suggest-footer a { color: var(--oc-brand); font-weight: 500; }
.oc-suggest-empty strong { color: var(--oc-text); }
/* -----------------------------------------------------------------------------
7. Mobile menu (offcanvas)
----------------------------------------------------------------------------- */
.oc-offcanvas .offcanvas-header {
border-bottom: 1px solid var(--oc-border);
padding: 1.1rem 1.25rem;
}
.oc-offcanvas .nav-link {
padding: .85rem 1rem;
border-radius: var(--oc-radius-sm);
color: var(--oc-text-body);
font-weight: 500;
}
.oc-offcanvas .nav-link:hover,
.oc-offcanvas .nav-link.active {
background: var(--oc-brand-light);
color: var(--oc-brand);
}
/* -----------------------------------------------------------------------------
8. Hero sections
----------------------------------------------------------------------------- */
.oc-hero {
position: relative;
padding: 4rem 0 3.5rem;
background:
radial-gradient(1200px 400px at 85% -10%, rgba(37, 99, 235, .10), transparent 60%),
radial-gradient(900px 300px at 5% 0%, rgba(245, 158, 11, .08), transparent 60%),
linear-gradient(180deg, #ffffff 0%, var(--oc-bg) 100%);
border-bottom: 1px solid var(--oc-border);
overflow: hidden;
}
.oc-hero__eyebrow {
display: inline-block;
font-size: .8rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--oc-brand);
background: var(--oc-brand-light);
padding: .35rem .75rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.oc-hero__title {
font-size: clamp(2.1rem, 3vw + 1rem, 3.4rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
margin-bottom: 1rem;
}
.oc-hero__lead {
font-size: 1.15rem;
color: var(--oc-text-body);
max-width: 46ch;
}
.oc-hero-search {
margin-top: 2rem;
max-width: 640px;
}
.oc-hero-search .input-group {
padding: .4rem .4rem .4rem 1rem;
border-radius: 999px;
background: #fff;
box-shadow: var(--oc-shadow);
border: 1px solid var(--oc-border);
}
.oc-hero-search .form-control {
border: 0 !important;
box-shadow: none !important;
background: transparent;
font-size: 1.05rem;
padding: .6rem 0;
}
.oc-hero-search .btn-primary {
border-radius: 999px;
padding: .6rem 1.4rem;
}
/* Hero stats strip */
.oc-hero-stats {
display: flex; flex-wrap: wrap; gap: 2rem;
margin-top: 2.5rem;
color: var(--oc-text-body);
}
.oc-hero-stats dt {
font-size: 1.75rem;
font-weight: 800;
color: var(--oc-text);
letter-spacing: -.02em;
}
.oc-hero-stats dd {
margin: 0;
font-size: .9rem;
color: var(--oc-text-muted);
}
/* -----------------------------------------------------------------------------
9. Cards — category, calculator, article
----------------------------------------------------------------------------- */
.oc-card,
.oc-calc-card,
.oc-article-card,
.oc-category-card {
background: var(--oc-surface);
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius);
transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease;
height: 100%;
overflow: hidden;
}
.oc-card:hover,
.oc-calc-card:hover,
.oc-article-card:hover,
.oc-category-card:hover {
transform: translateY(-3px);
box-shadow: var(--oc-shadow-md);
border-color: transparent;
}
.oc-card-sm .card-body { padding: .9rem; }
.oc-card-md .card-body { padding: 1.15rem; }
.oc-card-lg .card-body { padding: 1.5rem; }
/* Category card — colorful accent top and icon tile. */
.oc-category-card {
position: relative;
display: flex;
flex-direction: column;
padding: 1.5rem 1.25rem 1.25rem;
text-decoration: none;
color: var(--oc-text);
}
.oc-category-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 4px;
background: var(--oc-brand);
opacity: .9;
}
.oc-category-card .oc-category-icon {
width: 52px; height: 52px;
border-radius: var(--oc-radius-sm);
display: inline-flex; align-items: center; justify-content: center;
background: var(--oc-brand-light);
color: var(--oc-brand);
font-size: 1.5rem;
margin-bottom: .9rem;
transition: background .15s ease, transform .2s ease;
}
.oc-category-card:hover .oc-category-icon {
background: var(--oc-brand);
color: #fff;
transform: scale(1.04);
}
.oc-category-card__title { font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; }
.oc-category-card__meta { color: var(--oc-text-muted); font-size: .85rem; }
.oc-category-card__count { font-weight: 600; color: var(--oc-brand); }
/* Calculator card — spacious and tool-friendly. */
.oc-calc-card__media,
.oc-article-card__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--oc-surface-soft);
}
.oc-calc-card__media img,
.oc-article-card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.oc-calc-card:hover .oc-calc-card__media img,
.oc-article-card:hover .oc-article-card__media img { transform: scale(1.03); }
.oc-calc-card__badges {
position: absolute; top: .6rem; left: .6rem;
display: flex; gap: .35rem; flex-wrap: wrap;
}
.oc-calc-card__title,
.oc-article-card__title {
font-size: 1.05rem;
font-weight: 600;
color: var(--oc-text);
line-height: 1.35;
margin-bottom: .35rem;
}
.oc-calc-card:hover .oc-calc-card__title,
.oc-article-card:hover .oc-article-card__title {
color: var(--oc-brand-dark);
}
.oc-calc-card__desc,
.oc-article-card__desc { color: var(--oc-text-muted); font-size: .9rem; }
.oc-calc-card__footer,
.oc-article-card__footer {
display: flex; justify-content: space-between; align-items: center;
gap: .5rem;
margin-top: .75rem;
padding-top: .75rem;
border-top: 1px solid var(--oc-border);
color: var(--oc-text-muted);
font-size: .8rem;
}
/* Horizontal article card variant */
.oc-article-card--horizontal .oc-article-card__media { aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
.oc-article-card--horizontal { display: flex; }
.oc-article-card--horizontal .oc-article-card__media { flex: 0 0 200px; }
.oc-article-card--horizontal .card-body { flex: 1 1 auto; }
}
/* Badges */
.badge.bg-primary-subtle { color: var(--oc-brand-darker); }
.badge.bg-warning-subtle { color: #92400e; }
.badge.bg-success-subtle { color: #065f46; }
.badge.bg-danger-subtle { color: #991b1b; }
/* -----------------------------------------------------------------------------
10. Breadcrumbs
----------------------------------------------------------------------------- */
.oc-breadcrumbs-bar {
background: var(--oc-surface);
border-bottom: 1px solid var(--oc-border);
}
.breadcrumb { margin: 0; font-size: .875rem; }
.breadcrumb-item + .breadcrumb-item::before {
content: '/';
color: var(--oc-text-subtle);
}
.breadcrumb-item a { color: var(--oc-text-muted); }
.breadcrumb-item a:hover { color: var(--oc-brand); text-decoration: none; }
.breadcrumb-item.active { color: var(--oc-text); font-weight: 500; }
/* -----------------------------------------------------------------------------
11. Pagination
----------------------------------------------------------------------------- */
.pagination {
--bs-pagination-color: var(--oc-text-body);
--bs-pagination-bg: transparent;
--bs-pagination-border-color: var(--oc-border);
--bs-pagination-hover-color: var(--oc-brand);
--bs-pagination-hover-bg: var(--oc-brand-light);
--bs-pagination-hover-border-color: var(--oc-border);
--bs-pagination-active-bg: var(--oc-brand);
--bs-pagination-active-border-color: var(--oc-brand);
--bs-pagination-border-radius: var(--oc-radius-sm);
gap: .25rem;
justify-content: center;
}
.page-item .page-link {
border-radius: var(--oc-radius-sm);
min-width: 38px;
text-align: center;
font-weight: 500;
}
/* -----------------------------------------------------------------------------
12. Calculator detail page
----------------------------------------------------------------------------- */
.oc-calc-hero {
background: linear-gradient(180deg, #ffffff 0%, rgba(239, 246, 255, .45) 100%);
}
.oc-calc-hero__title {
font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
letter-spacing: -0.02em;
font-weight: 800;
}
.oc-calc-meta { gap: 1.1rem !important; }
.oc-share-card {
border-radius: var(--oc-radius);
background: #fff;
}
.oc-share-card .btn { border-radius: 999px; }
.oc-calc-tool {
background: var(--oc-surface);
border-radius: var(--oc-radius-lg) !important;
overflow: hidden;
}
.oc-calc-tool .card-body { background: var(--oc-surface); }
.oc-calc-form .form-label { font-size: .92rem; }
.oc-calc-form .oc-field { margin-bottom: 1rem; }
.oc-calc-form .oc-field:last-child { margin-bottom: 0; }
.oc-unit-select { max-width: 92px; flex: 0 0 auto; }
/* -----------------------------------------------------------------------------
13. Result panel + amortization tables
----------------------------------------------------------------------------- */
.oc-calc-result {
background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius);
position: relative;
transition: opacity .15s ease;
}
.oc-calc-result.is-loading { opacity: .55; }
.oc-calc-result.is-loading::after {
content: '';
position: absolute; inset: 0;
background: rgba(255, 255, 255, .35);
border-radius: inherit;
pointer-events: none;
}
.oc-result-row {
padding: .5rem 0;
border-bottom: 1px dashed var(--oc-border);
}
.oc-result-row:last-child { border-bottom: 0; }
.oc-result-value {
color: var(--oc-brand-darker);
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.oc-result-row.is-empty .oc-result-value { color: var(--oc-text-subtle); }
.oc-calc-status { font-size: .82rem; }
.oc-result-table {
background: #fff;
border-radius: var(--oc-radius);
overflow: hidden;
box-shadow: var(--oc-shadow-xs);
}
.oc-result-table .table thead th {
position: sticky; top: 0;
background: var(--oc-surface-soft);
color: var(--oc-text-muted);
font-weight: 600;
font-size: .78rem;
letter-spacing: .03em;
text-transform: uppercase;
border-bottom: 1px solid var(--oc-border);
}
.oc-result-table .table td { font-variant-numeric: tabular-nums; }
.oc-table-scroll { max-height: 440px; overflow-y: auto; }
.oc-result-warnings .alert { border-radius: var(--oc-radius); }
/* -----------------------------------------------------------------------------
14. Prose / editorial typography
----------------------------------------------------------------------------- */
.oc-prose {
color: var(--oc-text-body);
font-size: 1.025rem;
line-height: 1.75;
}
.oc-prose h2 {
font-size: 1.5rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: .9rem;
}
.oc-prose h3 {
font-size: 1.2rem;
font-weight: 700;
margin-top: 1.5rem;
margin-bottom: .65rem;
}
.oc-prose p { margin-bottom: 1.1rem; }
.oc-prose ul,
.oc-prose ol { padding-left: 1.25rem; margin-bottom: 1.1rem; }
.oc-prose li { margin-bottom: .35rem; }
.oc-prose img {
max-width: 100%; height: auto;
border-radius: var(--oc-radius);
box-shadow: var(--oc-shadow-sm);
margin: 1rem 0;
}
.oc-prose a { color: var(--oc-brand); text-decoration: underline; text-underline-offset: 2px; }
.oc-prose blockquote,
.oc-quote {
border-left: 4px solid var(--oc-brand);
background: var(--oc-brand-light);
padding: .75rem 1.1rem;
margin: 1.25rem 0;
font-style: italic;
color: var(--oc-text-body);
border-radius: 0 var(--oc-radius-sm) var(--oc-radius-sm) 0;
}
.oc-prose code {
font-family: var(--oc-font-mono);
font-size: .9em;
background: var(--oc-surface-soft);
padding: .1rem .35rem;
border-radius: .25rem;
color: #db2777;
}
.oc-prose pre {
background: #0f172a;
color: #e2e8f0;
padding: 1rem 1.25rem;
border-radius: var(--oc-radius);
overflow-x: auto;
}
.oc-prose table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 1.25rem 0;
font-size: .95rem;
}
.oc-prose th, .oc-prose td {
padding: .6rem .75rem;
border-bottom: 1px solid var(--oc-border);
text-align: left;
}
.oc-prose thead th { background: var(--oc-surface-soft); font-weight: 600; }
.oc-formula {
font-family: var(--oc-font-serif);
font-size: 1.1rem;
color: var(--oc-text);
background: var(--oc-surface-soft);
border: 1px dashed var(--oc-border-strong);
border-radius: var(--oc-radius);
padding: 1rem 1.25rem;
}
/* -----------------------------------------------------------------------------
15. Callouts, sources, FAQs
----------------------------------------------------------------------------- */
.oc-callout {
border-radius: var(--oc-radius);
padding: 1rem 1.15rem;
color: var(--oc-text-body);
}
.oc-callout--info {
background: var(--oc-brand-light);
border-left: 4px solid var(--oc-brand);
}
.oc-callout--warn {
background: #fff7ed;
border-left: 4px solid var(--oc-warning);
}
.oc-callout--success {
background: #ecfdf5;
border-left: 4px solid var(--oc-success);
}
.oc-callout--danger {
background: #fef2f2;
border-left: 4px solid var(--oc-danger);
}
.oc-sources li { transition: background .12s ease; }
.oc-sources li:hover { background: var(--oc-surface-soft); }
.oc-sources a { color: var(--oc-text); font-weight: 600; }
.oc-sources a:hover { color: var(--oc-brand); }
.oc-key-highlights {
border-radius: var(--oc-radius);
background: var(--oc-brand-light) !important;
border-left: 4px solid var(--oc-brand) !important;
}
.oc-key-highlights h2 { color: var(--oc-brand-darker) !important; }
.oc-faq .accordion {
--bs-accordion-bg: var(--oc-surface);
--bs-accordion-border-color: var(--oc-border);
--bs-accordion-border-radius: var(--oc-radius);
--bs-accordion-btn-color: var(--oc-text);
--bs-accordion-btn-bg: var(--oc-surface);
--bs-accordion-active-color: var(--oc-brand-darker);
--bs-accordion-active-bg: var(--oc-brand-light);
--bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}
.oc-faq .accordion-item {
border-radius: var(--oc-radius) !important;
overflow: hidden;
margin-bottom: .6rem;
border: 1px solid var(--oc-border);
}
.oc-faq .accordion-button { font-weight: 600; }
.oc-faq .accordion-button::after { filter: hue-rotate(180deg); }
.oc-faq .accordion-button:not(.collapsed) { box-shadow: none; }
.oc-faq .accordion-button:focus { border: 0; }
.oc-faq .accordion-body { color: var(--oc-text-body); line-height: 1.7; }
.oc-feedback-block {
background: linear-gradient(180deg, #ffffff 0%, var(--oc-brand-light) 100%);
border-radius: var(--oc-radius) !important;
border: 1px solid var(--oc-border);
}
/* -----------------------------------------------------------------------------
16. Author pages + author box
----------------------------------------------------------------------------- */
.oc-avatar { border-radius: 50%; object-fit: cover; background: var(--oc-surface-soft); }
.oc-avatar-xs { width: 24px; height: 24px; }
.oc-avatar-sm { width: 40px; height: 40px; }
.oc-avatar-md { width: 64px; height: 64px; }
.oc-avatar-lg { width: 96px; height: 96px; }
.oc-author-box {
border-radius: var(--oc-radius);
background: var(--oc-surface);
border: 1px solid var(--oc-border);
padding: 1.25rem;
}
.oc-author-box.is-compact { padding: 1rem; }
.oc-author-links a {
display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem;
border-radius: 999px;
background: var(--oc-surface-soft);
color: var(--oc-text-muted);
font-size: 1rem;
transition: background .12s ease, color .12s ease;
}
.oc-author-links a:hover {
background: var(--oc-brand);
color: #fff !important;
}
.oc-author-hero { position: relative; }
.oc-author-cover {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: .12; pointer-events: none;
}
.oc-author-hero > .container { position: relative; z-index: 1; }
.oc-author-photo {
object-fit: cover;
border: 4px solid #fff;
margin-top: -36px;
box-shadow: var(--oc-shadow);
background: #fff;
}
.oc-author-tabs .nav-link {
color: var(--oc-text-muted);
border-radius: 999px;
padding: .5rem 1.1rem;
font-weight: 500;
}
.oc-author-tabs .nav-link.active {
background: var(--oc-brand);
color: #fff;
}
.oc-author-tabs .nav-link.active .badge {
background: rgba(255, 255, 255, .2) !important;
color: #fff !important;
}
/* -----------------------------------------------------------------------------
17. Footer
----------------------------------------------------------------------------- */
.oc-footer {
background: #0b1220;
color: #cbd5e1;
padding: 3rem 0 1.5rem;
}
.oc-footer h2,
.oc-footer h3,
.oc-footer .oc-footer__heading {
color: #fff;
font-weight: 600;
font-size: .9rem;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: .9rem;
}
.oc-footer a {
color: #94a3b8;
text-decoration: none;
transition: color .12s ease;
}
.oc-footer a:hover {
color: #fff !important;
text-decoration: underline;
}
.oc-footer__brand {
display: inline-flex; align-items: center; gap: .55rem;
font-weight: 800;
color: #fff;
letter-spacing: -.02em;
font-size: 1.15rem;
}
.oc-footer__brand .oc-brand__mark {
box-shadow: none;
}
.oc-footer__socials a {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 999px;
background: rgba(255, 255, 255, .05);
color: #cbd5e1;
}
.oc-footer__socials a:hover {
background: var(--oc-brand);
color: #fff !important;
text-decoration: none;
}
.oc-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, .08);
margin-top: 2.5rem;
padding-top: 1.25rem;
font-size: .85rem;
color: #64748b;
}
/* -----------------------------------------------------------------------------
18. Back-to-top, toasts, loading states
----------------------------------------------------------------------------- */
.oc-back-to-top {
position: fixed;
right: 1.25rem; bottom: 1.25rem;
width: 44px; height: 44px;
padding: 0;
border-radius: 999px;
background: var(--oc-brand);
color: #fff;
border: 0;
box-shadow: var(--oc-shadow-md);
z-index: 1040;
transition: transform .15s ease, background .15s ease;
}
.oc-back-to-top:hover {
background: var(--oc-brand-dark);
transform: translateY(-2px);
color: #fff;
}
#ocToastWrap .toast { border-radius: var(--oc-radius); box-shadow: var(--oc-shadow-md); }
#ocToastWrap .toast.text-bg-dark { background: #0f172a !important; }
.oc-is-loading { opacity: .6; pointer-events: none; transition: opacity .12s ease; }
/* -----------------------------------------------------------------------------
19. Admin neutral shell
----------------------------------------------------------------------------- */
.oc-admin-body {
background: var(--oc-surface-soft);
color: var(--oc-text);
font-family: var(--oc-font-sans);
}
.oc-admin-shell { display: flex; min-height: 100vh; }
.oc-admin-sidebar {
width: 248px;
flex: 0 0 248px;
background: #0f172a;
color: #cbd5e1;
padding: 1rem .75rem;
position: sticky; top: 0;
height: 100vh;
overflow-y: auto;
}
.oc-admin-sidebar .oc-admin-brand {
color: #fff;
font-weight: 700;
padding: .5rem .75rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, .08);
margin-bottom: 1rem;
display: flex; align-items: center; gap: .55rem;
}
.oc-admin-sidebar .nav-link {
color: #94a3b8;
padding: .55rem .75rem;
border-radius: var(--oc-radius-sm);
font-size: .92rem;
font-weight: 500;
display: flex; align-items: center; gap: .65rem;
}
.oc-admin-sidebar .nav-link:hover {
background: rgba(255, 255, 255, .04);
color: #fff;
}
.oc-admin-sidebar .nav-link.active {
background: rgba(37, 99, 235, .15);
color: #fff;
}
.oc-admin-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.oc-admin-topbar {
background: #fff;
border-bottom: 1px solid var(--oc-border);
padding: .75rem 1.25rem;
display: flex; align-items: center; gap: 1rem;
position: sticky; top: 0; z-index: 1020;
}
.oc-admin-content {
padding: 1.5rem 1.25rem;
flex: 1 1 auto;
}
.oc-admin-card {
background: #fff;
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius);
box-shadow: var(--oc-shadow-xs);
}
.oc-admin-card > .card-header {
background: transparent;
border-bottom: 1px solid var(--oc-border);
font-weight: 600;
padding: .9rem 1.15rem;
}
.oc-admin-stat {
display: flex; flex-direction: column;
padding: 1.15rem;
background: #fff;
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius);
transition: box-shadow .15s ease, transform .15s ease;
}
.oc-admin-stat:hover { box-shadow: var(--oc-shadow-sm); transform: translateY(-1px); }
.oc-admin-stat__label { font-size: .8rem; color: var(--oc-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.oc-admin-stat__value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: var(--oc-text); }
.oc-admin-stat__delta { font-size: .8rem; }
.oc-admin-stat__delta.is-up { color: var(--oc-success); }
.oc-admin-stat__delta.is-down { color: var(--oc-danger); }
.oc-admin-table {
background: #fff;
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius);
overflow: hidden;
}
.oc-admin-table .table {
margin: 0;
}
.oc-admin-table thead th {
background: var(--oc-surface-soft);
color: var(--oc-text-muted);
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .05em;
font-weight: 600;
border-bottom: 1px solid var(--oc-border);
}
.oc-admin-table td { vertical-align: middle; }
.oc-status-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 999px;
background: var(--oc-text-subtle);
margin-right: .4rem;
}
.oc-status-dot.is-published { background: var(--oc-success); }
.oc-status-dot.is-draft { background: var(--oc-text-subtle); }
.oc-status-dot.is-review { background: var(--oc-warning); }
.oc-status-dot.is-archived { background: var(--oc-text-muted); }
/* --- Admin CRUD UI additions ------------------------------------------------ */
/* Skip link for a11y */
.oc-skip-link {
position: absolute; top: -40px; left: 8px;
background: var(--oc-brand); color: #fff;
padding: .5rem .75rem; border-radius: var(--oc-radius-sm);
z-index: 2000; font-weight: 600;
}
.oc-skip-link:focus { top: 8px; }
/* Admin brand */
.oc-admin-brand-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: var(--oc-radius);
background: linear-gradient(135deg, var(--oc-brand), var(--oc-brand-darker));
color: #fff; font-weight: 800; font-size: .95rem;
letter-spacing: .02em;
}
.oc-admin-brand-text { color: #fff; line-height: 1.15; }
.oc-admin-brand-text .text-muted { color: #94a3b8 !important; }
/* Grouped nav */
.oc-admin-nav-group { margin-bottom: 1rem; }
.oc-admin-nav-heading {
text-transform: uppercase; font-size: .68rem; letter-spacing: .1em;
color: #64748b; padding: .5rem .75rem .35rem;
}
.oc-admin-nav-link {
display: flex; align-items: center; gap: .65rem;
padding: .5rem .75rem;
color: #cbd5e1; text-decoration: none;
border-radius: var(--oc-radius-sm);
font-size: .92rem; font-weight: 500;
transition: background .15s ease, color .15s ease;
}
.oc-admin-nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.oc-admin-nav-link.is-active {
background: rgba(37, 99, 235, .18); color: #fff;
box-shadow: inset 3px 0 0 var(--oc-brand);
}
.oc-admin-nav-link i { width: 1rem; text-align: center; opacity: .85; }
.oc-admin-sidebar-footer {
margin-top: auto; padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,.08);
}
/* Topbar */
.oc-admin-topbar {
display: flex; align-items: center; gap: .75rem;
padding: .6rem 1rem;
position: sticky; top: 0; z-index: 100;
}
.oc-admin-search { max-width: 420px; width: 100%; }
.oc-admin-topbar-actions .oc-admin-iconbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: var(--oc-radius);
color: var(--oc-text-body); background: var(--oc-surface-soft);
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.oc-admin-topbar-actions .oc-admin-iconbtn:hover {
background: var(--oc-brand-light); color: var(--oc-brand-dark);
}
.oc-admin-usermenu {
display: inline-flex; align-items: center;
background: transparent; border: 0; padding: .15rem .5rem;
border-radius: var(--oc-radius);
color: var(--oc-text-body);
}
.oc-admin-usermenu:hover { background: var(--oc-surface-soft); }
.oc-admin-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 999px;
background: var(--oc-brand-light); color: var(--oc-brand-dark);
font-weight: 700; font-size: .82rem;
overflow: hidden;
}
.oc-admin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.oc-admin-avatar-sm { width: 28px; height: 28px; font-size: .75rem; }
/* Page head */
.oc-admin-page-head { border-bottom: 1px solid var(--oc-border); padding-bottom: 1rem; }
.oc-admin-crumbs .breadcrumb { margin: 0; background: transparent; padding: 0; }
/* Cards & tables */
.oc-admin-card .card-footer {
background: var(--oc-surface);
border-top: 1px solid var(--oc-border);
}
.oc-admin-card-inner { border-radius: var(--oc-radius); }
.oc-admin-table thead th {
background: var(--oc-surface-soft);
font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
color: var(--oc-text-muted);
border-bottom: 1px solid var(--oc-border);
}
/* Dashboard stat tile */
.oc-admin-stat {
display: flex; align-items: center; gap: 1rem;
background: var(--oc-surface);
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius);
padding: 1rem 1.1rem;
box-shadow: var(--oc-shadow-xs);
transition: box-shadow .18s ease, transform .18s ease;
height: 100%;
}
.oc-admin-stat:hover { box-shadow: var(--oc-shadow-sm); transform: translateY(-1px); }
.oc-admin-stat-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: var(--oc-radius);
font-size: 1.25rem;
}
/* Empty state */
.oc-admin-empty { color: var(--oc-text-muted); }
.oc-admin-empty-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px; border-radius: 999px;
background: var(--oc-surface-soft); color: var(--oc-text-subtle);
font-size: 1.5rem;
margin: 0 auto;
}
/* Image upload field */
.oc-admin-image-field {
display: flex; gap: 1rem; align-items: flex-start;
}
.oc-admin-image-preview {
width: 120px; height: 120px; flex: 0 0 120px;
border: 1px dashed var(--oc-border-strong);
border-radius: var(--oc-radius);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: var(--oc-surface-soft);
}
.oc-admin-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.oc-admin-image-placeholder {
text-align: center; color: var(--oc-text-subtle);
font-size: 1.5rem;
}
/* Sticky form actions */
.oc-admin-form-actions {
padding: 1rem 1.25rem;
background: var(--oc-surface);
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius);
box-shadow: var(--oc-shadow-xs);
position: sticky; bottom: 1rem; z-index: 10;
}
/* Menu items tree */
.oc-admin-menu-tree .list-group-item { border-radius: 0; }
.oc-admin-menu-item details summary {
cursor: pointer; list-style: none; padding: .25rem 0;
}
.oc-admin-menu-item details summary::-webkit-details-marker { display: none; }
.oc-admin-menu-item details[open] summary { border-bottom: 1px dashed var(--oc-border); padding-bottom: .5rem; }
/* SERP preview */
.oc-admin-serp-preview {
background: #fff; border: 1px solid var(--oc-border);
border-radius: var(--oc-radius); padding: 1rem;
}
.oc-admin-serp-preview #serpUrl { font-size: .8rem; }
.oc-admin-serp-preview #serpTitle { font-size: 1.1rem; line-height: 1.3; }
/* Offcanvas */
.oc-admin-offcanvas { width: 260px !important; }
.oc-admin-offcanvas .oc-admin-sidebar {
position: static; height: auto; width: 100%; flex: 0 0 auto;
}
/* WYSIWYG textarea target */
.oc-wysiwyg { min-height: 180px; font-family: var(--oc-font-sans); }
/* -----------------------------------------------------------------------------
20. Accessibility + motion
----------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--oc-brand);
outline-offset: 2px;
border-radius: 2px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible { outline: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
html { scroll-behavior: auto; }
}
/* -----------------------------------------------------------------------------
21. Responsive refinements
----------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
.oc-mega-menu { min-width: 560px; }
}
@media (max-width: 991.98px) {
:root { --oc-header-h: 64px; --oc-sticky-offset: 80px; }
.oc-search { min-width: 0; width: 100%; max-width: none; margin: .5rem 0; }
.oc-mega-menu { min-width: 100%; }
.oc-hero { padding: 3rem 0 2.5rem; }
.oc-hero-stats { gap: 1.25rem; }
.oc-author-photo { margin-top: 0; }
.oc-admin-shell > .oc-admin-sidebar { display: none; }
.oc-admin-search { max-width: none; }
}
@media (max-width: 767.98px) {
body.oc-body { font-size: 15.5px; }
.oc-nav { display: none; }
.oc-hero__title { font-size: 2rem; }
.oc-hero__lead { font-size: 1rem; }
.oc-hero-search .form-control { font-size: 1rem; padding: .5rem 0; }
.oc-hero-search .btn-primary { padding: .5rem 1rem; }
.oc-calc-hero__title { font-size: 1.6rem; }
.oc-calc-tool .card-body { padding: 1.15rem !important; }
.oc-result-table .table { font-size: .82rem; }
body.oc-admin { font-size: 15px; }
}
@media (max-width: 575.98px) {
.oc-back-to-top { right: .75rem; bottom: .75rem; width: 40px; height: 40px; }
.oc-footer { padding: 2.25rem 0 1rem; }
}
/* -----------------------------------------------------------------------------
Admin polish (Aug 2026)
-----------------------------------------------------------------------------
Targeted spacing + button-shape fixes that apply across every admin index
page (feedback, calculators, articles, authors, categories, subcategories,
menus, calculator fields). All scoped under the admin-only `.oc-admin`
body class — see admin/layouts/app.blade.php — so the public site is
untouched.
----------------------------------------------------------------------------- */
/* ---- Action-column button group ---- */
/* Bootstrap's .btn-group rules assume every direct child is a .btn. Each
admin index page wraps its destructive submit (delete / resolve /
publish) in a