/* ========================================================================== RuangCoding v2 theme — blue + yellow, compact density Loaded last so it overrides style.css / lokomedia.css / theme/default.css. ========================================================================== */ @font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/sora/sora-latin-600-normal.woff2') format('woff2');} @font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/sora/sora-latin-700-normal.woff2') format('woff2');} @font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/sora/sora-latin-800-normal.woff2') format('woff2');} @font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/work-sans/work-sans-latin-400-normal.woff2') format('woff2');} @font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/work-sans/work-sans-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/work-sans/work-sans-latin-600-normal.woff2') format('woff2');} @font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/work-sans/work-sans-latin-700-normal.woff2') format('woff2');} :root{ --rc-blue: #4d7ee8; --rc-blue-dark: #2f4f9e; --rc-blue-tint: #eef2fc; --rc-yellow: #ffe066; --rc-yellow-tint: #fff8e0; --rc-yellow-ink: #6b5300; --rc-ink: #22293b; --rc-ink-soft: #5a6478; --rc-ink-faint: #8a93a6; --rc-border: #e6e9f2; --rc-bg: #f8f9fc; --rc-font-scale: 1; } /* The legacy theme and theme-v2.css both use fixed px font-sizes, so a root font-size cascade (rem-based scaling) has no visual effect. Use an actual browser zoom instead so the +/- control really scales the page. Zooming itself and trying to cancel it back out with zoom:1 on #header/#top-menu doesn't work reliably: those are position:fixed, and a zoom:1 descendant inside a zoomed ancestor doesn't cleanly cancel the effect for fixed-position layout across browsers — it measured wrong at anything other than exactly 100%, causing the header and top nav bars to overlap by a few pixels. Instead, zoom only .rc-zoom-content, the wrapper around everything below the fixed bars (hero, page content, footer) — the fixed bars themselves are simply never inside a zoomed subtree at all. */ .rc-zoom-content{ zoom: var(--rc-font-scale); } body{ font-family:'Work Sans', "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: var(--rc-ink); background: var(--rc-bg); } h1,h2,h3,h4,h5,h6, .page--title, .panel-title, .widget-title, .post--title, .h1, .h2, .h3, .h4 { font-family:'Sora', "Helvetica Neue", Helvetica, Arial, sans-serif !important; letter-spacing: -0.01em; color: var(--rc-ink); } a { color: var(--rc-blue); } a:hover, a:focus { color: var(--rc-blue-dark); } /* ---------- buttons ---------- */ .btn-primary, .btn.btn-primary { background: var(--rc-blue) !important; border-color: var(--rc-blue) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--rc-blue-dark) !important; border-color: var(--rc-blue-dark) !important; } .btn-success, .btn.btn-success { background: var(--rc-yellow) !important; border-color: var(--rc-yellow) !important; color: var(--rc-yellow-ink) !important; } .btn-success:hover, .btn-success:focus { background: #ffd633 !important; border-color: #ffd633 !important; color: var(--rc-yellow-ink) !important; } .btn, .btn-sm, .btn-lg { border-radius: 8px !important; font-weight: 600; } /* ---------- badges / labels ---------- */ .label-primary, .badge-primary { background: var(--rc-blue) !important; } .label-success, .badge-success { background: var(--rc-yellow) !important; color: var(--rc-yellow-ink) !important; } .label-warning, .badge-warning { background: var(--rc-yellow) !important; color: var(--rc-yellow-ink) !important; } .label-danger, .badge-danger { background: #e05266 !important; } .label-default, .badge-default { background: var(--rc-ink-faint) !important; } /* ---------- panels / cards ---------- */ .panel { border-radius: 12px !important; border-color: var(--rc-border) !important; box-shadow: 0 2px 10px rgba(20,30,70,0.04) !important; } .panel-heading { background: #fff !important; border-bottom: 1px solid var(--rc-border) !important; border-radius: 12px 12px 0 0 !important; font-weight: 700; } .panel-inverse > .panel-heading { background: var(--rc-ink) !important; color: #fff !important; } .panel-body { padding: 16px 18px !important; } /* ---------- header / top nav ---------- */ #header, .header { background: rgba(255,255,255,0.94) !important; border-bottom: 1px solid var(--rc-border) !important; backdrop-filter: blur(6px); /* #top-menu is fixed at top:50px assuming #header is exactly 50px tall, but its content (logo + font-size control) made it render taller, overlapping the nav bar below it by several pixels at any zoom level. Pin it to exactly 50px and vertically center its content instead. */ height: 50px !important; overflow: hidden; display: flex; align-items: center; } #header .container { display: flex; align-items: center; height: 100%; width: 100% !important; } #header .navbar-header { display: flex; align-items: center; margin: 0 !important; flex: 1; } #header .navbar-right { margin-left: auto !important; margin-right: 0 !important; } #header .navbar-toggle { margin-left: auto !important; margin-right: 0 !important; } #header .navbar-brand, #header a { color: var(--rc-ink); } #top-menu { background: #fff !important; border-bottom: 1px solid var(--rc-border) !important; height: 40px !important; display: flex; justify-content: center; } #top-menu .nav > li { vertical-align: middle; } #top-menu .nav > li > a { color: var(--rc-ink-soft) !important; font-weight: 600; font-size: 13px; padding: 10px 14px !important; line-height: 20px !important; box-sizing: border-box; } #top-menu .nav > li > a:hover, #top-menu .nav > li.active > a { color: var(--rc-blue) !important; background: var(--rc-blue-tint) !important; } #top-menu .nav > li.active > a { box-shadow: inset 0 -2px 0 var(--rc-blue); } #top-menu .nav > li > a.rc-upgrade-link { color: var(--rc-yellow-ink) !important; background: var(--rc-yellow) !important; border-radius: 999px; margin: 4px 8px; padding: 6px 14px !important; } #top-menu .nav > li > a.rc-upgrade-link:hover { color: var(--rc-yellow-ink) !important; background: var(--rc-yellow) !important; filter: brightness(0.96); } /* The legacy prev/next nav-scroller JS measures the full-bleed #top-menu width, which no longer matches the centered .nav width, so its margin-left math pushes items outside the visible box. Disable it and center the nav instead — if it's still wider than the viewport, it scrolls natively rather than being clipped or pushed off to one side. */ #top-menu .nav { margin: 0 !important; max-width: 100%; height: 40px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } #top-menu .nav::-webkit-scrollbar { display: none; height: 0; } #top-menu .nav > li.menu-control { display: none !important; } /* ---------- mobile top nav: toggleable stacked list ---------- */ @media (max-width: 767px) { #top-menu { display: none; position: fixed; top: 50px; left: 0; right: 0; height: auto !important; max-height: calc(100vh - 50px); overflow-y: auto; box-shadow: 0 10px 24px rgba(20,30,50,0.14); z-index: 1014; } #top-menu .nav { display: block; height: auto; max-width: none; overflow-x: visible; white-space: normal; } #top-menu .nav > li { display: block; width: 100%; } #top-menu .nav > li > a { display: block; padding: 12px 20px !important; } } /* ---------- hero banner ---------- */ .sb-page-header { background: linear-gradient(160deg, var(--rc-blue-dark), var(--rc-blue) 60%) !important; padding: 40px 0 !important; overflow: hidden; } .sb-page-header h1, .sb-page-header h3 { font-family:'Sora', sans-serif !important; } .sb-page-header h1 { font-size: 30px !important; margin: 14px 0 8px !important; } .sb-page-header h3 { font-size: 14.5px !important; font-weight:400 !important; max-width: 480px; line-height: 1.6; } .sb-page-header .btn-success { background: #fff !important; color: var(--rc-blue-dark) !important; border-color: #fff !important; } .rc-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; text-align: left; } .rc-hero-copy { max-width: 560px; } .rc-hero-cta { display: flex; gap: 12px; margin-top: 18px; } .rc-hero-btn-ghost { background: rgba(255,255,255,0.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.35) !important; } .rc-hero-stats { display: flex; gap: 30px; margin-top: 20px; } .rc-hero-stats strong { display: block; color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 20px; } .rc-hero-stats span { color: rgba(255,255,255,0.7); font-size: 12px; } .rc-hero-visual { flex-shrink: 0; } @media (max-width: 767px) { .rc-hero-inner { flex-wrap: wrap; gap: 20px; } .rc-hero-copy { max-width: 100%; } .rc-hero-cta { flex-wrap: wrap; } .rc-hero-stats { flex-wrap: wrap; gap: 20px 30px; } } .rc-code-card { background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 24px 50px -18px rgba(0,20,60,0.4); transform: rotate(2deg); width: 300px; } .rc-code-card-dots { display: flex; gap: 6px; margin-bottom: 10px; } .rc-code-card-dots span { width: 9px; height: 9px; border-radius: 999px; display: inline-block; background: #f04747; } .rc-code-card-dots span:nth-child(2) { background: var(--rc-yellow); } .rc-code-card-dots span:nth-child(3) { background: #2fbf6c; } .rc-code-card-body { background: var(--rc-ink); border-radius: 10px; padding: 12px; font-family: monospace; font-size: 11.5px; line-height: 1.7; color: #a9e2ff; } .rc-code-card-body .rc-code-kw { color: #ff9d7a; } .rc-code-card-body .rc-code-fn { color: #7ad0ff; } .rc-code-card-body .rc-code-str { color: #c9f5d9; } .rc-code-card-tags { display: flex; gap: 8px; margin-top: 12px; } .rc-quicklinks { display: flex; justify-content: space-between; background: #fff; border: 1px solid var(--rc-border); border-radius: 12px; margin-top: -22px; margin-bottom: 28px; position: relative; z-index: 2; box-shadow: 0 16px 30px -20px rgba(20,30,70,0.2); padding: 6px 0; } .rc-quicklinks a { flex: 1; text-align: center; padding: 14px 6px; color: var(--rc-ink); font-size: 12.5px; font-weight: 600; border-right: 1px solid var(--rc-border); } .rc-quicklinks a:last-child { border-right: none; } .rc-quicklinks a i { display: block; color: var(--rc-blue); font-size: 18px; margin-bottom: 6px; } .rc-quicklinks a:hover { color: var(--rc-blue); text-decoration: none; } .rc-cta-banner { border-radius: 16px; background: linear-gradient(120deg, var(--rc-blue-dark), var(--rc-blue) 65%); padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 10px 0 25px; } .rc-cta-copy h2 { color: #fff; font-size: 20px; margin-bottom: 8px; } .rc-cta-copy p { color: rgba(255,255,255,0.82); font-size: 13px; margin: 0; max-width: 480px; } .rc-cta-banner .btn-success { flex-shrink: 0; } /* ---------- breadcrumb ---------- */ .main--breadcrumb { background: #fff !important; border-bottom: 1px solid var(--rc-border); padding: 10px 0 !important; } .main--breadcrumb .breadcrumb { background: transparent !important; margin: 0 !important; padding: 0 !important; font-size: 12.5px; } /* ---------- forms ---------- */ .form-control { border-radius: 8px !important; border-color: var(--rc-border) !important; } .form-control:focus { border-color: var(--rc-blue) !important; box-shadow: 0 0 0 3px rgba(77,126,232,0.15) !important; } /* ---------- tables / pagination ---------- */ .table > thead > tr > th { color: var(--rc-ink-faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; border-bottom-color: var(--rc-border) !important; } .table td, .table th { padding: 9px 12px !important; } .pagination > li > a, .pagination > li > span { color: var(--rc-blue); border-color: var(--rc-border) !important; border-radius: 8px !important; margin: 0 2px; } .pagination > .active > a, .pagination > .active > span { background: var(--rc-blue) !important; border-color: var(--rc-blue) !important; } /* ---------- list group / dropdown ---------- */ .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background: var(--rc-blue-tint) !important; border-color: var(--rc-border) !important; color: var(--rc-blue-dark) !important; } /* ---------- footer ---------- */ footer, .footer { background: var(--rc-ink) !important; color: rgba(255,255,255,0.72) !important; } footer a, .footer a { color: rgba(255,255,255,0.9) !important; } /* ---------- whatsapp float ---------- */ .float { background-color: #25d366 !important; box-shadow: 0 10px 24px -6px rgba(37,211,102,0.5) !important; } /* ---------- font-size adjuster control ---------- */ .rc-font-adjust { display: flex; align-items: center; gap: 2px; border: 1px solid var(--rc-border); border-radius: 8px; padding: 2px; background:#fff; } .rc-font-adjust button { width: 24px; height: 24px; border: none; background: transparent; border-radius: 6px; color: var(--rc-ink-soft); font-weight: 700; cursor: pointer; font-size: 11px; line-height: 1; } .rc-font-adjust button:hover { background: var(--rc-blue-tint); color: var(--rc-blue-dark); } .rc-font-adjust button:last-child { font-size: 13px; } .rc-font-adjust span { font-size: 10px; color: var(--rc-ink-faint); padding: 0 3px; min-width: 30px; text-align: center; } /* ---------- promo pill / countdown (shared) ---------- */ .rc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; } .rc-pill-yellow { background: var(--rc-yellow); color: var(--rc-yellow-ink); } .rc-pill-blue { background: var(--rc-blue-tint); color: var(--rc-blue-dark); } .rc-countdown { display: flex; gap: 8px; } .rc-countdown .rc-cd-box { background: rgba(0,0,0,0.28); border-radius: 8px; padding: 6px 4px; text-align: center; width: 46px; margin: 0; } .rc-countdown .rc-cd-box .rc-cd-num { color: var(--rc-yellow); font-family:'Sora',sans-serif; font-weight: 800; font-size: 17px; line-height: 1; } .rc-countdown .rc-cd-box .rc-cd-lbl { color: rgba(255,255,255,0.65); font-size: 9px; margin-top: 2px; } .rc-countdown .rc-cd-sep { color: var(--rc-yellow); font-weight: 800; font-size: 15px; align-self: center; } .rc-footer { background: linear-gradient(160deg, var(--rc-blue-dark), var(--rc-blue) 60%); padding: 18px 0; margin-top: 40px; } .rc-footer p { margin: 0; text-align: center; color: rgba(255,255,255,0.9); font-size: 13px; } .rc-footer .fa-heart { color: #ff5d6c; margin: 0 3px; } .rc-footer b { color: #fff; }