/* ============================================================
arc-modern.css
Visual revamp overrides for the Arc Synergy licensing site.
HOW IT WORKS
------------------------------------------------------------
This file only RESTYLES existing TemplateMo / Bootstrap classes.
It does not change any markup, script, ID, or link. Add it as the
LAST stylesheet in so its rules win the cascade:
Place it AFTER:
assets/css/templatemo-chain-app-dev.css
assets/css/animated.css
assets/css/owl.css
To revert the revamp: remove that one . Nothing else changes.
============================================================ */
/* ── Design tokens ─────────────────────────────────────── */
:root {
--arc-teal: #0F5B78;
--arc-teal-deep: #0A3A4D;
--arc-teal-tint: #D0E8F2;
--arc-cyan: #22D3EE;
--arc-sage: #2D7D6F;
--arc-violet: #6D4DAE;
--arc-ink: #0F172A;
--arc-slate: #1E293B;
--arc-muted: #64748B;
--arc-line: #E2E8F0;
--arc-bg: #F8FAFB;
--arc-surface: #FFFFFF;
--arc-radius: 18px;
--arc-shadow: 0 10px 30px -12px rgba(15, 91, 120, 0.25);
--arc-shadow-sm: 0 4px 16px -8px rgba(15, 23, 42, 0.15);
--arc-grad: linear-gradient(120deg, var(--arc-teal), var(--arc-violet));
}
/* ── Base typography ───────────────────────────────────── */
body {
font-family: 'Inter', 'Roboto', -apple-system, system-ui, sans-serif !important;
color: var(--arc-slate) !important;
background: var(--arc-bg) !important;
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
h1, h2, h3, h4, h5 { color: var(--arc-ink); letter-spacing: -0.01em; }
/* Pull in Inter to match the screener site (Roboto stays as fallback) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ── Header / nav ──────────────────────────────────────── */
.header-area {
background: rgba(248, 250, 251, 0.85) !important;
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--arc-line);
box-shadow: none !important;
}
.header-area.header-sticky {
background: rgba(248, 250, 251, 0.92) !important;
box-shadow: 0 2px 14px -8px rgba(15, 23, 42, 0.18) !important;
}
.header-area .main-nav .nav li a {
color: var(--arc-muted) !important;
font-weight: 500 !important;
transition: color .15s ease;
}
.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active {
color: var(--arc-teal) !important;
}
/* ── Hero / main banner ────────────────────────────────── */
.main-banner {
background:
radial-gradient(1100px 520px at 85% -10%, rgba(34, 211, 238, 0.14), transparent 60%),
radial-gradient(900px 520px at 0% 8%, rgba(109, 77, 174, 0.12), transparent 55%),
var(--arc-bg) !important;
}
/* Neutralize the template's dark hero overlay so the new light bg shows */
.main-banner::after {
background: transparent !important;
}
.main-banner .header-text h2,
.main-banner .header-text h1 {
color: var(--arc-ink) !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
line-height: 1.1 !important;
}
.main-banner .header-text p {
color: var(--arc-muted) !important;
font-size: 18px !important;
}
.main-banner .header-text em,
.section-heading h4 em,
.section-heading h2 em {
font-style: normal;
background: var(--arc-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ── Buttons (gradient + border variants) ──────────────── */
.gradient-button a,
.main-button-red a,
.border-button a,
.download-buttons .gradient-button a {
border-radius: 12px !important;
font-weight: 600 !important;
transition: transform .12s ease, box-shadow .12s ease, background .15s ease !important;
}
.gradient-button a,
.main-button-red a {
background: var(--arc-teal) !important;
color: #fff !important;
box-shadow: var(--arc-shadow-sm) !important;
}
.gradient-button a:hover,
.main-button-red a:hover {
background: var(--arc-teal-deep) !important;
transform: translateY(-1px);
color: #fff !important;
}
.border-button a {
border: 1.5px solid var(--arc-teal) !important;
color: var(--arc-teal) !important;
background: transparent !important;
}
.border-button a:hover {
background: var(--arc-teal) !important;
color: #fff !important;
}
/* ── Section headings ──────────────────────────────────── */
.section-heading h4,
.section-heading h2 {
color: var(--arc-ink) !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
}
.section-heading p { color: var(--arc-muted) !important; }
/* The little decorative line image → swap for a clean gradient bar */
.section-heading img[src*="heading-line-dec"] {
content: "";
display: inline-block;
width: 64px; height: 4px;
border-radius: 999px;
background: var(--arc-grad);
margin: 14px 0;
}
/* ── Services / resource cards ─────────────────────────── */
.services .service-item,
.service-item {
background: var(--arc-surface) !important;
border: 1px solid var(--arc-line) !important;
border-radius: var(--arc-radius) !important;
padding: 28px 24px !important;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.services .service-item:hover,
.service-item:hover {
transform: translateY(-4px);
box-shadow: var(--arc-shadow);
border-color: var(--arc-teal-tint) !important;
}
.service-item .icon,
.service-item .social-icon {
background: var(--arc-teal-tint) !important;
color: var(--arc-teal-deep) !important;
border-radius: 12px !important;
width: 56px !important; height: 56px !important;
display: grid !important; place-items: center !important;
margin-bottom: 16px !important;
}
.service-item .icon i,
.service-item .social-icon i { color: var(--arc-teal-deep) !important; }
.service-item h4 { color: var(--arc-ink) !important; font-weight: 700 !important; }
.service-item p { color: var(--arc-muted) !important; }
.service-item .text-button a { color: var(--arc-teal) !important; font-weight: 600 !important; }
/* ── Video walkthrough frame ───────────────────────────── */
.video-container,
.services .video-container {
border-radius: var(--arc-radius) !important;
overflow: hidden !important;
box-shadow: var(--arc-shadow) !important;
border: 1px solid var(--arc-line) !important;
}
/* ── About / features box items ────────────────────────── */
.about-us { background: var(--arc-surface) !important; }
.about-us .box-item {
padding: 18px 16px !important;
border-left: 4px solid var(--arc-teal) !important;
margin-bottom: 16px !important;
background: var(--arc-bg) !important;
border-radius: 12px !important;
transition: transform .15s ease, box-shadow .15s ease !important;
}
.about-us .box-item:hover {
transform: translateX(4px);
box-shadow: var(--arc-shadow-sm);
}
.about-us .box-item h4,
.about-us .box-item h5 { color: var(--arc-ink) !important; font-weight: 700 !important; }
/* ── Founder card ──────────────────────────────────────── */
.founder-card {
background: var(--arc-surface) !important;
border: 1px solid var(--arc-line) !important;
border-radius: 20px !important;
box-shadow: var(--arc-shadow) !important;
padding: 28px !important;
}
.founder-photo {
border: 3px solid var(--arc-teal) !important;
}
/* ── Pricing cards (populated by your Supabase JS) ─────── */
/* Targets the markup buildPlanCard() outputs: .pricing-item-pro */
.pricing-item-pro,
.pricing-item,
.pricing-tables .pricing-item-pro {
background: var(--arc-surface) !important;
border: 1px solid var(--arc-line) !important;
border-radius: 22px !important;
padding: 34px 28px !important;
box-shadow: var(--arc-shadow-sm) !important;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
position: relative;
overflow: hidden;
}
.pricing-item-pro::before {
content: "";
position: absolute; inset: 0 0 auto 0; height: 5px;
background: linear-gradient(90deg, var(--arc-cyan), var(--arc-teal), var(--arc-violet));
}
.pricing-item-pro:hover {
transform: translateY(-5px);
box-shadow: var(--arc-shadow);
border-color: var(--arc-teal-tint) !important;
}
.pricing-item-pro h4 { color: var(--arc-ink) !important; font-weight: 800 !important; letter-spacing: -0.01em; }
.pricing-item-pro .price,
.pricing-item-pro .value { color: var(--arc-teal) !important; font-weight: 800 !important; margin-top: 15px !important; }
.pricing-item-pro .icon img { max-height: 56px; width: auto; }
.pricing-item-pro ul li {
color: var(--arc-slate) !important;
border-bottom: 1px solid var(--arc-line) !important;
}
.pricing-item-pro .border-button a {
border-radius: 12px !important;
}
/* Highlight a recommended plan if the JS adds a class/flag */
.pricing-item-pro.recommended,
.pricing-item-pro.is-recommended {
border-color: var(--arc-teal) !important;
box-shadow: var(--arc-shadow) !important;
}
/* ── Footer ────────────────────────────────────────────── */
footer#newsletter,
.arc-footer-container {
background: var(--arc-ink) !important;
}
footer#newsletter,
footer#newsletter p,
footer#newsletter .footer-widget p { color: #94A3B8 !important; }
footer#newsletter h4 {
color: #fff !important;
text-transform: uppercase;
font-size: 14px !important;
letter-spacing: 0.05em;
}
footer#newsletter .footer-widget a,
footer#newsletter .footer-list a,
footer#newsletter .nav a { color: #94A3B8 !important; transition: color .15s ease; }
footer#newsletter .footer-widget a:hover,
footer#newsletter .footer-list a:hover,
footer#newsletter .nav a:hover { color: #fff !important; }
footer#newsletter .footer-logo-widget p { color: #CBD5E1 !important; }
footer#newsletter .footer-email { color: var(--arc-cyan) !important; }
.footer-divider { border-top: 1px solid rgba(255,255,255,0.1) !important; }
.copyright-text p { color: #94A3B8 !important; }
/* ── Modal (sign-in / employer / recovery popups) ──────── */
.modal-box,
#modal .modal-content {
border-radius: var(--arc-radius) !important;
border: 1px solid var(--arc-line) !important;
}
/* ── Store buttons in hero ─────────────────────────────── */
.download-buttons .store-btn,
.store-buttons .store-btn { transition: transform .12s ease; }
.download-buttons .store-btn:hover,
.store-buttons .store-btn:hover { transform: translateY(-2px); }
/* ── Section rhythm polish ─────────────────────────────── */
.services.section,
.about-us.section,
.pricing-tables { padding-top: 88px; padding-bottom: 88px; }
/* ── Contrast hardening ────────────────────────────────
Force washed-out template text to readable shades on the
light background. Muted grays were too light to read. */
/* Body copy, paragraphs, descriptions → readable slate */
p,
.header-text p,
.section-heading p,
.service-item p,
.about-us p,
li,
.pricing-item-pro ul li {
color: #334155 !important; /* slate-700 — clearly readable */
opacity: 1 !important;
}
/* Bullet / feature list items on cards → slightly darker */
.service-item ul li,
.product-features li,
.feature-list li {
color: #1E293B !important; /* slate-800 */
opacity: 1 !important;
}
/* Subheads / card titles → near-black */
h1, h2, h3, h4, h5,
.service-item h3,
.service-item h4,
.section-heading h2,
.section-heading h4 {
color: #0F172A !important; /* ink */
opacity: 1 !important;
}
/* Small labels ("OUR PRODUCTS", stat captions) → mid slate, not ghosted */
.section-subtitle,
.stat-label,
.about-us .stat p,
small {
color: #475569 !important; /* slate-600 */
opacity: 1 !important;
}
/* Stat numbers (50+, 3, ∞, SLP) keep the teal, just ensure full opacity */
.stat-number,
.about-us .stat h2,
.about-us .stat h3 {
color: var(--arc-teal) !important;
opacity: 1 !important;
}
/* "COMING SOON" / "LIVE" pills → keep colored text readable */
.badge-live, .badge-coming, .pill {
opacity: 1 !important;
}
/* Catch-all: kill any leftover low-opacity text globally on light bg */
.services *, .about-us *, .header-text * {
opacity: 1 !important;
}
/* ── Legal pages (privacy / terms) ───────────────────── */
.policy-wrapper { background: var(--arc-bg) !important; }
.policy-content { max-width: 820px; margin: 0 auto; }
.policy-content h1,
.policy-content .thq-heading-1,
.policy-content h2,
.policy-content .thq-heading-2,
.policy-content h3 {
color: #0F172A !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
}
.policy-content p,
.policy-content li,
.policy-content .thq-body-large {
color: #334155 !important; /* overrides the inline dimgray */
opacity: 1 !important;
line-height: 1.7;
}
.policy-content a { color: var(--arc-teal) !important; }
/* ── Employer Dashboard ────────────────────────────────── */
main.container { background: var(--arc-bg); }
/* Cards */
.card {
background: var(--arc-surface) !important;
border: 1px solid var(--arc-line) !important;
border-radius: 20px !important;
box-shadow: var(--arc-shadow-sm) !important;
padding: 26px !important;
}
/* Section headings inside dashboard */
main.container h2 { color: var(--arc-ink); font-weight: 800; letter-spacing: -0.02em; }
main.container h3 { color: var(--arc-ink); font-weight: 700; }
main.container p { color: var(--arc-muted); }
/* Overview stat labels/values */
#org_name, #manager_name, #manager_email, #manager_plan { color: var(--arc-ink) !important; }
/* Team-group tiles — the big visual upgrade */
.type-tile {
background: var(--arc-surface);
border: 1px solid var(--arc-line);
border-radius: 16px;
padding: 20px 16px;
text-align: left;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.type-tile:hover {
transform: translateY(-3px);
box-shadow: var(--arc-shadow);
border-color: var(--arc-teal-tint);
}
.type-tile .title {
font-size: 20px; font-weight: 800; color: var(--arc-ink);
letter-spacing: -0.01em; margin-bottom: 4px;
}
.type-tile .sub { font-size: 13px; color: var(--arc-muted); }
.type-tile .sub span { color: var(--arc-teal); font-weight: 700; }
/* Active/selected tile */
.type-tile.active, .type-tile[aria-selected="true"] {
border-color: var(--arc-teal);
box-shadow: 0 0 0 2px var(--arc-teal-tint);
}
/* Buttons */
.btn {
border-radius: 12px !important;
font-weight: 600 !important;
padding: 10px 18px !important;
border: 1px solid var(--arc-line) !important;
background: var(--arc-surface) !important;
color: var(--arc-slate) !important;
transition: transform .12s ease, box-shadow .12s ease, background .15s ease !important;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--arc-shadow-sm); }
.btn.btn_red {
background: var(--arc-teal) !important;
color: #fff !important;
border-color: var(--arc-teal) !important;
}
.btn.btn_red:hover { background: var(--arc-teal-deep) !important; }
/* Modals — inputs and shells */
#settings_overlay input,
#delete_overlay input {
border: 1px solid var(--arc-line) !important;
border-radius: 12px !important;
}
#settings_overlay input:focus,
#delete_overlay input:focus {
outline: none; border-color: var(--arc-teal) !important;
box-shadow: 0 0 0 3px var(--arc-teal-tint) !important;
}