/* ========================================================================== Vinalib — modern.css Additive UI refresh layered on top of style.min.css (the 2019 Eagle theme). Loaded last in , so it overrides the base theme without touching it. Admin pages load /_admin/css/admin.css afterwards, so the admin keeps its own look. Pure styling: no markup changes, fully reversible (drop the link). ========================================================================== */ :root { --vl-accent: #da251d; /* Vietnam flag red */ --vl-accent-dark: #b51a13; --vl-accent-glow: rgba(218, 37, 29, .16); --vl-accent-soft: rgba(218, 37, 29, .09); --vl-ink: #20242b; --vl-body: #4b515b; --vl-muted: #79808b; --vl-line: #e9ebf0; --vl-bg-card: #ffffff; --vl-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --vl-shadow: 0 6px 24px rgba(16, 24, 40, .07); --vl-shadow-lg: 0 16px 40px rgba(16, 24, 40, .12); --vl-radius: 14px; } /* ---------- Page canvas ------------------------------------------------- */ html { background-color: #eef0f3; background: linear-gradient(180deg, #eef1f5 0%, #e7eaef 100%) fixed; } body { color: var(--vl-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #ffffff; box-shadow: 0 0 60px rgba(16, 24, 40, .06); } @media (min-width: 1330px) { body { border-radius: 18px; } } p { line-height: 1.65; } a { color: var(--vl-accent); transition: color .15s ease; } a:hover { color: var(--vl-accent-dark); } h1, h2, h3, h4, h5 { color: var(--vl-ink); } ::selection { background: rgba(218, 37, 29, .14); } ::-moz-selection { background: rgba(218, 37, 29, .14); } /* ---------- Navbar ------------------------------------------------------ */ .navbar-custom { box-shadow: 0 1px 0 var(--vl-line), 0 2px 14px rgba(16, 24, 40, .04); border-bottom: none; } .logo { font-weight: 800 !important; letter-spacing: .5px; color: var(--vl-ink) !important; } .navbar-custom .navbar-nav > li > a { font-size: 13px; letter-spacing: .6px; color: var(--vl-muted); position: relative; transition: color .15s ease; } .navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav li.active-item > a { color: var(--vl-accent); } /* underline accent on the active / hovered nav item */ .navbar-custom .navbar-nav > li > a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 14px; height: 2px; background: var(--vl-accent); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .2s ease; } .navbar-custom .navbar-nav > li > a:hover::after, .navbar-custom .navbar-nav li.active-item > a::after { transform: scaleX(1); } /* ---------- Top search bar --------------------------------------------- */ /* breathing room around the full-width navbar search bar */ .navbar-custom .widget_search { margin: 14px 0 28px; } .navbar .widget_search .form-control, .widget_search .form-control { border-radius: 999px; border-color: var(--vl-line); background: #f6f7f9; padding-left: 20px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .navbar .widget_search .form-control:focus, .widget_search .form-control:focus { background: #fff; border-color: var(--vl-accent); box-shadow: 0 0 0 3px var(--vl-accent-glow); } /* ---------- Page title -------------------------------------------------- */ .page-title h1 { font-weight: 500; letter-spacing: -.3px; } .page-title hr { border: 0; height: 1px; background: var(--vl-line); margin-top: 18px; } /* small accent rule under the section sub-headings (HIGHLIGHTS, etc.) */ .service-title { font-weight: 600 !important; letter-spacing: 1.2px !important; color: var(--vl-ink); position: relative; } /* ---------- Service / info cards on the home + listing pages ----------- */ .service-box { background: var(--vl-bg-card); border: 1px solid var(--vl-line); border-radius: var(--vl-radius); padding: 26px 24px; height: 100%; box-shadow: var(--vl-shadow-sm); transition: box-shadow .2s ease, transform .2s ease; } .service-box:hover { box-shadow: var(--vl-shadow); transform: translateY(-2px); } .service-box .service-title { margin-top: 0; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--vl-line); } .service-box p { color: var(--vl-muted); } /* keep the home columns vertically even */ .row.equalize { display: flex; flex-wrap: wrap; } /* ---------- Buttons ----------------------------------------------------- */ .btn { border-radius: 10px; letter-spacing: 1px; font-size: 11px; padding: 13px 26px; transition: all .18s ease; } .btn-dark { background-color: var(--vl-ink); border-color: var(--vl-ink); } .btn-dark:hover, .btn-dark:focus { background-color: var(--vl-accent); border-color: var(--vl-accent); color: #fff !important; box-shadow: 0 8px 20px rgba(218, 37, 29, .28); transform: translateY(-1px); } .btn-light { background: transparent; color: var(--vl-muted) !important; border-color: transparent; } .btn-light:hover { color: var(--vl-accent) !important; } /* ---------- Form controls ---------------------------------------------- */ .form-control { border-radius: 10px; border-color: var(--vl-line); transition: border-color .15s ease, box-shadow .15s ease; } .form-control:focus { border-color: var(--vl-accent); box-shadow: 0 0 0 3px var(--vl-accent-glow); } /* ---------- Thumbnails / portfolio grid -------------------------------- */ .img-rounded, .portfolio-box img, .port img.img-responsive { border-radius: 12px !important; } /* gentle lift + zoom on gallery thumbnails (public pages only; admin re-scopes its own grid in admin.css which loads afterwards) */ .port a, nav a > img.img-rounded { display: block; border-radius: 12px; overflow: hidden; } .row > div > a > img.img-rounded { box-shadow: var(--vl-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; } .row > div > a:hover > img.img-rounded { transform: translateY(-3px); box-shadow: var(--vl-shadow); } /* the homepage cover image */ .portfolioContainer .col-md-12 > img.img-responsive { border-radius: var(--vl-radius); box-shadow: var(--vl-shadow); } /* clear gap under the homepage hero before the info cards. isotope absolutely-positions the hero so the wrapper's m-b-30 collapses; spacing the following row is robust. */ .port.portfolio-masonry + .row { margin-top: 38px; } /* ---------- Location / keyword tag pills (stock + search pages) -------- */ .tagcloud > a, .post-tags a { border-radius: 999px; background: #f3f5f8; color: var(--vl-muted); font-size: 11px; letter-spacing: .6px; padding: 7px 13px 6px; border: 1px solid transparent; transition: all .15s ease; } .tagcloud > a:hover, .post-tags a:hover { background: var(--vl-accent-soft); color: var(--vl-accent-dark); border-color: rgba(218, 37, 29, .3); } /* ---------- Pagination -------------------------------------------------- */ .pagination > li > a, .pagination > li > span { border-radius: 10px !important; border-color: var(--vl-line); color: var(--vl-body); } .pagination > li > a:hover { background: var(--vl-accent-soft); border-color: rgba(218, 37, 29, .3); color: var(--vl-accent-dark); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--vl-accent); border-color: var(--vl-accent); } /* ---------- Footer ------------------------------------------------------ */ .footer { background: #fafbfc; border-top: 1px solid var(--vl-line); margin-top: 60px; } .footer .copyright-txt, .footer .text-muted { color: var(--vl-muted) !important; font-size: 13px; line-height: 2; } .footer a { color: var(--vl-muted); } .footer a:hover { color: var(--vl-accent); }