File Manager

Editing:components.css

/**
 * Ophiro Components CSS
 * Additional component styles and micro-interactions
 *
 * @package Ophiro_Ventures
 */

/* ==========================================================================
   ENTRY CONTENT TYPOGRAPHY
   ========================================================================== */

.o-entry-content h2 {
	font-size: var(--text-3xl);
	margin-top: var(--space-3xl);
	margin-bottom: var(--space-lg);
}

.o-entry-content h3 {
	font-size: var(--text-2xl);
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
}

.o-entry-content h4 {
	font-size: var(--text-xl);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-md);
}

.o-entry-content p {
	margin-bottom: var(--space-lg);
	line-height: var(--leading-body);
}

.o-entry-content ul,
.o-entry-content ol {
	margin: var(--space-lg) 0;
	padding-left: var(--space-xl);
}

.o-entry-content li {
	margin-bottom: var(--space-sm);
	line-height: var(--leading-body);
	color: var(--ophiro-text-secondary);
}

.o-entry-content img {
	max-width: 100%;
	height: auto;
	margin: var(--space-xl) 0;
}

.o-entry-content a {
	color: var(--ophiro-gold-star);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--ophiro-gold-deep);
	transition: text-decoration-color var(--transition-fast);
}

.o-entry-content a:hover {
	text-decoration-color: var(--ophiro-gold-star);
}

.o-entry-content blockquote {
	margin: var(--space-2xl) 0;
	padding: var(--space-2xl) var(--space-3xl);
	border-left: 2px solid var(--ophiro-gold-deep);
	background: linear-gradient(135deg, rgba(245, 200, 66, 0.03), transparent);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-style: italic;
	color: var(--ophiro-text-secondary);
}

.o-entry-content figure {
	margin: var(--space-2xl) 0;
}

.o-entry-content figcaption {
	font-size: var(--text-xs);
	color: var(--ophiro-text-muted);
	margin-top: var(--space-sm);
	text-align: center;
}

.o-entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-xl) 0;
}

.o-entry-content th,
.o-entry-content td {
	padding: var(--space-md) var(--space-lg);
	text-align: left;
	border-bottom: var(--border-subtle);
}

.o-entry-content th {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--ophiro-gold-warm);
	background: var(--ophiro-bg-elevated);
}

.o-entry-content td {
	font-size: var(--text-sm);
	color: var(--ophiro-text-secondary);
}

.o-entry-content hr {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ophiro-gold-deep), transparent);
	margin: var(--space-3xl) 0;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.o-breadcrumbs {
	padding: var(--space-lg) 0;
	font-size: var(--text-xs);
	color: var(--ophiro-text-muted);
	letter-spacing: var(--tracking-wide);
}

.o-breadcrumbs__link {
	color: var(--ophiro-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.o-breadcrumbs__link:hover {
	color: var(--ophiro-gold-star);
}

.o-breadcrumbs__sep {
	margin: 0 var(--space-sm);
	color: var(--ophiro-text-muted);
	opacity: 0.5;
}

.o-breadcrumbs__current {
	color: var(--ophiro-text-secondary);
}

/* ==========================================================================
   POST META
   ========================================================================== */

.o-post-meta {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-xs);
	color: var(--ophiro-text-muted);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	margin-bottom: var(--space-md);
}

.o-post-meta__sep {
	opacity: 0.4;
}

/* ==========================================================================
   WIDGET STYLES
   ========================================================================== */

.o-widget {
	margin-bottom: var(--space-2xl);
}

.o-widget__title {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--ophiro-gold-warm);
	margin-bottom: var(--space-lg);
}

.o-widget p {
	font-size: var(--text-sm);
	color: var(--ophiro-text-tertiary);
	line-height: var(--leading-body);
}

.o-widget a {
	color: var(--ophiro-text-secondary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.o-widget a:hover {
	color: var(--ophiro-gold-star);
}

.o-widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.o-widget ul li {
	padding: var(--space-xs) 0;
	font-size: var(--text-sm);
}

.o-widget ul li a {
	color: var(--ophiro-text-tertiary);
	text-decoration: none;
}

.o-widget ul li a:hover {
	color: var(--ophiro-text-primary);
}

/* ==========================================================================
   CUSTOM LOGO
   ========================================================================== */

.custom-logo-link {
	display: flex;
	align-items: center;
}

.custom-logo {
	max-height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
}

/* ==========================================================================
   FORM SUCCESS / ERROR STATES
   ========================================================================== */

.o-form-success {
	padding: var(--space-xl);
	background: rgba(159, 225, 203, 0.06);
	border: 1px solid rgba(159, 225, 203, 0.3);
	margin-bottom: var(--space-xl);
	text-align: center;
}

.o-form-success__title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	color: var(--ophiro-wild);
	margin-bottom: var(--space-sm);
}

.o-form-success__text {
	font-size: var(--text-sm);
	color: var(--ophiro-text-secondary);
}

.o-form-error {
	padding: var(--space-xl);
	background: rgba(224, 96, 96, 0.06);
	border: 1px solid rgba(224, 96, 96, 0.3);
	margin-bottom: var(--space-xl);
}

.o-form-error__text {
	font-size: var(--text-sm);
	color: #e06060;
}

/* ==========================================================================
   LOADING STATES
   ========================================================================== */

.o-loading {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--ophiro-gold-deep);
	border-top-color: var(--ophiro-gold-star);
	border-radius: 50%;
	animation: o-spin 0.8s linear infinite;
}

@keyframes o-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   GOLD ACCENT LINE COMPONENT
   ========================================================================== */

.o-accent-line {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin: var(--space-2xl) 0;
}

.o-accent-line::before,
.o-accent-line::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ophiro-gold-deep));
}

.o-accent-line::after {
	background: linear-gradient(90deg, var(--ophiro-gold-deep), transparent);
}

.o-accent-line__icon {
	color: var(--ophiro-gold-star);
	font-size: var(--text-sm);
}

/* ==========================================================================
   TESTIMONIAL CARDS
   ========================================================================== */

.o-testimonial-card {
	padding: var(--space-2xl);
	background: var(--ophiro-bg-card);
	border: var(--border-subtle);
	position: relative;
}

.o-testimonial-card::before {
	content: '\201C';
	position: absolute;
	top: var(--space-lg);
	right: var(--space-xl);
	font-family: var(--font-display);
	font-size: 4rem;
	line-height: 1;
	color: var(--ophiro-gold-star);
	opacity: 0.1;
}

.o-testimonial-card__text {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-style: italic;
	color: var(--ophiro-text-secondary);
	line-height: var(--leading-normal);
	margin-bottom: var(--space-lg);
}

.o-testimonial-card__author {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--ophiro-gold-warm);
	letter-spacing: var(--tracking-wide);
}

.o-testimonial-card__journey {
	font-size: var(--text-xs);
	color: var(--ophiro-text-muted);
	margin-top: var(--space-xs);
}

/* ==========================================================================
   NO RESULTS
   ========================================================================== */

.o-no-results {
	text-align: center;
	padding: var(--space-5xl) var(--space-xl);
}

.o-no-results__icon {
	font-size: 4rem;
	color: var(--ophiro-gold-deep);
	margin-bottom: var(--space-xl);
	opacity: 0.5;
}

.o-no-results__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	color: var(--ophiro-text-primary);
	margin-bottom: var(--space-md);
}

.o-no-results__text {
	font-size: var(--text-base);
	color: var(--ophiro-text-tertiary);
	max-width: 500px;
	margin: 0 auto;
}

Cancel

🤩 File Manager - Mr.X

Editing:components.css