/** * Polaris Consulting theme layer. * Loaded AFTER style.css; restyles the MyResume template without touching its layout mechanics. * Pick a look by putting one of these classes on : * theme-celestial — midnight sky, Ursa Minor + glowing Polaris, gold accents (dark) * theme-aurora — northern-lights sky, teal/violet accents (dark) * theme-chart — navigator's chart on parchment, ink & copper accents (light) */ /*-------------------------------------------------------------- # Palettes --------------------------------------------------------------*/ body.theme-celestial { --bg: #0b1126; --bg-soft: #101838; --text: #cfd6ea; --muted: #97a2c4; --heading: #f1f4ff; --accent: #e8b64c; --accent-strong: #f5c964; --accent-contrast: #201503; --card-bg: #131c40; --card-border: rgba(232, 182, 76, 0.18); --line: rgba(207, 214, 234, 0.14); --blob: #0e1531; --input-bg: #0d1430; --hero-img: url("../img/bg-celestial.svg"); --hero-overlay: linear-gradient(180deg, rgba(5, 9, 22, 0.15) 0%, rgba(5, 9, 22, 0.35) 70%, rgba(11, 17, 38, 0.95) 100%); --hero-heading: #f6f8ff; --hero-text: #d6ddf2; --footer-bg: #070c1d; --dark: 1; } body.theme-aurora { --bg: #071219; --bg-soft: #0b1c26; --text: #cde0e2; --muted: #8fabb0; --heading: #f0fbf7; --accent: #34d6a2; --accent-strong: #52e6b6; --accent-contrast: #03211a; --card-bg: #0e222d; --card-border: rgba(52, 214, 162, 0.18); --line: rgba(205, 224, 226, 0.14); --blob: #0a1a23; --input-bg: #0a1a23; --hero-img: url("../img/bg-aurora.svg"); --hero-overlay: linear-gradient(180deg, rgba(4, 12, 20, 0.1) 0%, rgba(4, 12, 20, 0.3) 70%, rgba(7, 18, 25, 0.95) 100%); --hero-heading: #f4fffb; --hero-text: #d3ece6; --footer-bg: #040d12; --dark: 1; } body.theme-chart { --bg: #f6f0e1; --bg-soft: #eee5cf; --text: #3a4257; --muted: #6b7288; --heading: #1f2c4d; --accent: #b3562e; --accent-strong: #9c4826; --accent-contrast: #fff6ec; --card-bg: #fdfaf2; --card-border: rgba(44, 62, 99, 0.16); --line: rgba(44, 62, 99, 0.16); --blob: #f0e8d4; --input-bg: #fdfaf2; --hero-img: url("../img/bg-chart.svg"); --hero-overlay: linear-gradient(180deg, rgba(246, 240, 225, 0.0) 0%, rgba(246, 240, 225, 0.15) 70%, rgba(246, 240, 225, 0.95) 100%); --hero-heading: #1f2c4d; --hero-text: #3a4257; --footer-bg: #1f2c4d; --dark: 0; } /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ body { font-family: "Inter", "Open Sans", sans-serif; background: var(--bg); color: var(--text); } h1, h2, h3, h4, h5, h6 { font-family: "Fraunces", "Raleway", serif; color: var(--heading); } a { color: var(--accent); } a:hover { color: var(--accent-strong); } section { background: var(--bg); color: var(--text); } .section-bg { background: var(--bg-soft); } #preloader { background: var(--bg); } #preloader:before { border-color: var(--accent) transparent var(--accent) transparent; } .back-to-top { background: var(--accent); } .back-to-top i { color: var(--accent-contrast); } .back-to-top:hover { background: var(--accent-strong); } ::selection { background: var(--accent); color: var(--accent-contrast); } /*-------------------------------------------------------------- # Language-specific content Elements with data-lang-only="no" (or "en") render only when i18n.js has put the matching lang-no / lang-en class on . --------------------------------------------------------------*/ body:not(.lang-no) [data-lang-only="no"] { display: none !important; } body:not(.lang-en) [data-lang-only="en"] { display: none !important; } /*-------------------------------------------------------------- # Language switcher --------------------------------------------------------------*/ .lang-switch { position: fixed; top: 18px; right: 18px; z-index: 998; display: flex; gap: 2px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 50px; padding: 4px; } .lang-switch button { border: 0; background: transparent; color: var(--muted); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; line-height: 1; padding: 7px 12px; border-radius: 50px; cursor: pointer; transition: 0.3s; } .lang-switch button.active { background: var(--accent); color: var(--accent-contrast); } .lang-switch button:not(.active):hover { color: var(--heading); } /*-------------------------------------------------------------- # Side navigation --------------------------------------------------------------*/ .nav-menu a, .nav-menu a:focus { background: var(--card-bg); color: var(--muted); border: 1px solid var(--card-border); } .nav-menu a i { color: inherit; } .nav-menu a:hover, .nav-menu .active, .nav-menu .active:focus, .nav-menu li:hover > a { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .nav-menu a:hover span, .nav-menu .active span, .nav-menu .active:focus span, .nav-menu li:hover > a span { color: var(--accent-contrast); } .mobile-nav-toggle { color: var(--heading); } /*-------------------------------------------------------------- # Hero --------------------------------------------------------------*/ #hero { background: var(--hero-img) center center no-repeat; background-size: cover; } #hero:before { background: var(--hero-overlay); } #hero h1 { font-family: "Fraunces", serif; font-weight: 600; color: var(--hero-heading); letter-spacing: 0.5px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); } body.theme-chart #hero h1 { text-shadow: none; } #hero p { font-family: "Inter", sans-serif; font-weight: 300; color: var(--hero-text); } #hero p span { color: var(--accent-strong); font-weight: 500; } /* the "We are" prefix span should read as plain hero text, not accent */ #hero p span[data-i18n] { color: var(--hero-text); font-weight: 300; letter-spacing: normal; } #hero .social-links a { color: var(--hero-text); } #hero .social-links a:hover { color: var(--accent-strong); } /*-------------------------------------------------------------- # Section titles --------------------------------------------------------------*/ .section-title h2 { color: var(--heading); text-transform: none; font-size: 38px; font-weight: 600; } .section-title h2::before { background: var(--line); } .section-title h2::after { background: var(--accent); height: 3px; border-radius: 2px; } .section-title p { color: var(--muted); } /*-------------------------------------------------------------- # About / Why us / Skills lists --------------------------------------------------------------*/ .about .content ul i { color: var(--accent); } .about .content h3 { color: var(--heading); } .skills .content ul li i, .skills ul li i { color: var(--accent); } .skills ul li strong { color: var(--heading); } .about img.img-fluid { border-radius: 14px; border: 1px solid var(--card-border); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); } body.theme-chart .about img.img-fluid { box-shadow: 0 14px 34px rgba(44, 62, 99, 0.18); } /* certification badges: keep them on white chips so they read on any palette */ .certification-logo { background: #ffffff; border-radius: 12px; padding: 10px; margin: 8px; border: 1px solid var(--card-border); } /*-------------------------------------------------------------- # Services cards --------------------------------------------------------------*/ .services .row { row-gap: 24px; } .services .icon-box { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } body.theme-chart .services .icon-box { box-shadow: 0 10px 26px rgba(44, 62, 99, 0.12); } .services .icon-box:hover { transform: translateY(-8px); border-color: var(--accent); } .services .icon-box .icon svg path { fill: var(--blob); } .services .icon-box .icon i { color: var(--accent); } .services .iconbox-blue i { color: var(--accent); } .services .iconbox-blue:hover .icon i { color: var(--accent-contrast); } .services .iconbox-blue:hover .icon path { fill: var(--accent); } .services .icon-box h4, .services .icon-box h4 a { color: var(--heading); font-family: "Fraunces", serif; font-weight: 600; } .services .icon-box h4 a:hover { color: var(--accent); } .services .icon-box p { color: var(--muted); } /*-------------------------------------------------------------- # Portfolio --------------------------------------------------------------*/ .portfolio #portfolio-flters { background: var(--card-bg); border: 1px solid var(--card-border); } .portfolio #portfolio-flters li { color: var(--muted); } .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { color: var(--accent); } .portfolio .portfolio-item iframe, .portfolio .post-image { border-radius: 12px; border: 1px solid var(--card-border); } /* video tiles: responsive 16:9 thumbnails with a play badge */ .portfolio .post-image { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; } .portfolio .post-image::after { content: ""; position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(10, 12, 24, 0.62); border: 2px solid rgba(255, 255, 255, 0.85); transition: 0.3s; } .portfolio .post-image::before { content: ""; position: absolute; inset: 0; margin: auto; z-index: 1; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #ffffff; transform: translateX(4px); } .portfolio .post-image:hover::after { background: var(--accent); border-color: var(--accent); } .portfolio .post-image h4 { color: var(--heading); padding: 20px; } /*-------------------------------------------------------------- # Testimonials --------------------------------------------------------------*/ .testimonials .testimonial-item { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 30px; margin: 30px 15px; } /* the avatar files (assets/img/testimonials/) don't exist; hide the broken images */ .testimonials .testimonial-item .testimonial-img { display: none; } .testimonials .testimonial-item h3 { color: var(--heading); } .testimonials .testimonial-item h4 { color: var(--muted); } .testimonials .testimonial-item p { color: var(--text); } .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right { color: var(--accent); opacity: 0.5; } .testimonials .swiper-pagination .swiper-pagination-bullet { background: var(--muted); opacity: 0.5; } .testimonials .swiper-pagination .swiper-pagination-bullet-active { background: var(--accent); opacity: 1; } /*-------------------------------------------------------------- # Contact --------------------------------------------------------------*/ .contact .info { background: transparent; } .contact .info i, .contact .info .bi { color: var(--accent); background: var(--card-bg); border: 1px solid var(--card-border); } .contact .info h4 { color: var(--heading); } .contact .info p { color: var(--muted); } .contact .email-form, .contact .php-email-form { background: transparent; } .contact .form-control { background: var(--input-bg); border: 1px solid var(--card-border); border-radius: 10px; color: var(--text); padding: 12px 15px; } .contact .form-control::placeholder { color: var(--muted); } .contact .form-control:focus { background: var(--input-bg); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent); } .contact button[type="submit"] { background: var(--accent); color: var(--accent-contrast); border: 0; padding: 12px 34px; border-radius: 50px; font-weight: 600; letter-spacing: 0.3px; transition: background 0.3s ease; } .contact button[type="submit"]:hover { background: var(--accent-strong); } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ #footer { background: var(--footer-bg); color: var(--text); } #footer h3 { color: var(--heading); font-family: "Fraunces", serif; } /* the footer is dark in every theme; keep the icons clearly visible */ #footer .social-links a { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.35); color: #ffffff; } #footer .social-links a:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } #footer .copyright, #footer .credits { color: var(--muted); } #footer .credits a { color: var(--accent); } body.theme-chart #footer { --heading: #f6f0e1; --text: #d9d2bf; --muted: #a7a08c; } /*-------------------------------------------------------------- # Modals (service popups) --------------------------------------------------------------*/ .modal-content { background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border); border-radius: 16px; } .modal-header { border-bottom: 1px solid var(--line); } .modal-title { color: var(--heading); } body.theme-celestial .btn-close, body.theme-aurora .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } /*-------------------------------------------------------------- # Simple sub-pages (hr-consulting, coaching pages) --------------------------------------------------------------*/ .subpage h1 { font-weight: 600; margin-bottom: 10px; } .subpage h1::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--accent); margin-top: 14px; } .subpage ul li { margin: 6px 0; } .subpage ul li::marker { color: var(--accent); }