/* =============================================================
Netsville Domains — Custom Theme
Extends Bootstrap without overriding its structure.
Link AFTER bootstrap.min.css on every page.
Add to in base template:
============================================================= */
/* ===========================
BASE
=========================== */
body {
font-family: 'Inter', sans-serif;
}
/* ===========================
NAVBAR
=========================== */
.navbar.bg-dark {
border-bottom: 3px solid #28a745;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.navbar .nav-link:hover {
color: #6ed98a !important;
transition: color 0.2s ease;
}
/* ===========================
BREADCRUMBS
=========================== */
.breadcrumb-item a {
color: #28a745;
text-decoration: none;
}
.breadcrumb-item a:hover {
color: #218838;
}
/* ===========================
PAGE TITLES (left accent bar)
Applied to h1 on dashboard, activity log, profile, etc.
=========================== */
h1.mb-0,
h1.mb-4 {
font-weight: 700;
border-left: 5px solid #28a745;
padding-left: 0.75rem;
}
/* ===========================
HERO SECTION (homepage only)
Overrides the left-bar rule above for the hero h1
=========================== */
.hero {
background: linear-gradient(135deg, #1a2e20 0%, #0d1f14 100%);
border-radius: 0.75rem;
padding: 4rem 2rem !important;
margin-bottom: 2rem;
}
.hero h1 {
color: #ffffff;
border-left: none;
padding-left: 0;
}
.hero .lead.text-muted {
color: #a8d5b5 !important;
}
/* ===========================
SEARCH BAR (homepage)
=========================== */
.domain-search .form-control {
border-radius: 2rem 0 0 2rem;
border: 2px solid #dee2e6;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.domain-search .form-control:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
.domain-search .btn-success {
border-radius: 0 2rem 2rem 0;
padding-left: 1.75rem;
padding-right: 1.75rem;
font-weight: 600;
letter-spacing: 0.03em;
}
/* ===========================
PRICING SECTION HEADINGS
Underline accent — overrides left-bar rule for these h2s only
=========================== */
#pricing h2,
section h2 {
position: relative;
display: inline-block;
padding-bottom: 0.5rem;
border-left: none;
padding-left: 0;
}
#pricing h2::after,
section h2::after {
content: '';
display: block;
width: 50px;
height: 4px;
background: #28a745;
border-radius: 2px;
margin: 0.4rem auto 0;
}
#pricing {
text-align: center;
}
/* ===========================
GLOBAL INPUT FOCUS
=========================== */
.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.2);
}
/* ===========================
GLOBAL BUTTONS
Replace Bootstrap blue btn-primary with brand green site-wide.
Scoped to avoid affecting btn-danger (logout, remove, etc.)
=========================== */
.btn-primary {
background-color: #28a745 !important;
border-color: #28a745 !important;
border-radius: 2rem;
font-weight: 600;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
background-color: #218838 !important;
border-color: #1e7e34 !important;
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
}
.btn-sm.btn-outline-secondary {
border-radius: 2rem;
font-size: 0.82rem;
}
.btn-sm.btn-success {
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
}
/* Secondary buttons — pill shape to pair with primary/success CTAs */
.btn-outline-secondary {
border-radius: 2rem;
padding: 0.5rem 1.5rem;
font-weight: 500;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-outline-secondary:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
/* ===========================
TABLES — global wrapper
=========================== */
.table-responsive {
border-radius: 0.6rem;
overflow: hidden;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.09);
}
/* ===========================
PRICING TABLES
Add class="pricing-table" to the two tables on the pricing/homepage
=========================== */
.pricing-table tbody td:first-child {
border-left: 3px solid #28a745;
font-family: 'Courier New', monospace;
font-size: 0.92rem;
}
/* 4+ Years column highlight — pricing tables only */
.pricing-table tbody td:last-child {
background-color: rgba(40, 167, 69, 0.06);
font-weight: 500;
}
/* ===========================
BADGES
=========================== */
.badge.bg-nv-green {
background-color: #28a745 !important;
font-weight: 500;
border-radius: 0.4rem;
}
.badge.bg-nv-yellow {
background-color: #ffc107 !important;
font-weight: 500;
border-radius: 0.4rem;
}
.badge.bg-success:not(.cart-badge) {
background-color: #28a745 !important;
font-weight: 500;
letter-spacing: 0.03em;
border-radius: 0.4rem;
}
.badge.bg-secondary {
font-weight: 500;
letter-spacing: 0.02em;
border-radius: 0.4rem;
}
/* ===========================
DASHBOARD — domain list
=========================== */
.dashboard-table tbody td:first-child a {
font-family: 'Courier New', monospace;
font-weight: 600;
font-size: 0.9rem;
color: #28a745;
text-decoration: none;
}
.dashboard-table tbody td:first-child a:hover {
color: #1a6b30;
text-decoration: underline;
}
/* ===========================
DETAIL CARDS
Used on domain detail page and profile page
=========================== */
.detail-card {
border: 1px solid #e9ecef;
border-left: 4px solid #28a745;
border-radius: 0.5rem;
transition: box-shadow 0.2s ease;
}
.detail-card:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.detail-card .card-title {
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #555;
margin-bottom: 1rem;
}
/* Nameserver / monospace values in detail cards (not activity tables) */
.detail-card .text-muted:not(td) {
font-family: 'Courier New', monospace;
font-size: 0.9rem;
}
/* Activity log inside detail cards — smaller text, normal font */
.detail-card .activity-table td {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
}
/* ===========================
DOMAIN DETAIL — page title
=========================== */
.detail-container h2 {
font-family: 'Courier New', monospace;
font-weight: 700;
font-size: 1.9rem;
border-left: none;
padding-left: 0;
}
/* ===========================
ACTIVITY LOG
=========================== */
.activity-table .text-muted.small {
font-family: 'Courier New', monospace;
font-size: 0.82rem;
}
.activity-table td:last-child {
font-family: 'Courier New', monospace;
font-size: 0.85rem;
color: #6c757d;
}
/* ===========================
CART PAGE
=========================== */
tfoot tr td {
font-weight: 700;
font-size: 1.05rem;
background-color: #f8f9fa;
}
tfoot tr td:last-child {
color: #28a745;
font-size: 1.15rem;
}
.btn-success.btn-lg {
border-radius: 2rem;
padding: 0.7rem 2.5rem;
font-weight: 600;
letter-spacing: 0.02em;
box-shadow: 0 3px 12px rgba(40, 167, 69, 0.35);
transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-success.btn-lg:hover {
box-shadow: 0 5px 18px rgba(40, 167, 69, 0.5);
transform: translateY(-2px);
}
.alert-success {
border-left: 5px solid #28a745;
border-top: none;
border-right: none;
border-bottom: none;
border-radius: 0.4rem;
background-color: #d4edda;
}
/* ===========================
LOGIN PAGE
Scoped to .login-container to avoid affecting other cards
=========================== */
.login-container .card {
max-width: 420px;
margin: 4rem auto;
border-top: 4px solid #28a745 !important;
border-radius: 0.6rem !important;
}
/* ===========================
LOGOUT MODAL
=========================== */
.modal-content {
border-radius: 0.6rem;
border-top: 4px solid #dc3545;
}
.modal-title {
font-weight: 700;
font-size: 1rem;
}
.modal-footer .btn-sm.btn-outline-secondary {
border-radius: 2rem;
}
.modal-footer .btn-danger {
border-radius: 2rem;
font-weight: 600;
}
/* ===========================
FOOTER
=========================== */
footer {
background-color: #1a1a1a;
border-top: 3px solid #28a745;
padding: 1.25rem 1.5rem !important;
margin-top: 3rem !important;
max-width: 100% !important;
width: 100%;
box-sizing: border-box;
}
footer .text-muted { color: #888 !important; }
footer a.text-muted { transition: color 0.2s ease; }
footer a.text-muted:hover { color: #6ed98a !important; }
/* ===========================
MOBILE — hero + search bar
=========================== */
@media (max-width: 576px) {
.hero {
padding: 2.5rem 1rem !important;
}
.hero h1 {
font-size: 1.6rem;
}
.hero .lead {
font-size: 0.9rem;
}
.domain-search .form-control {
font-size: 0.85rem;
padding: 0.4rem 0.75rem;
}
.domain-search .btn-success {
font-size: 0.85rem;
padding-left: 1rem;
padding-right: 1rem;
}
}