/* * CyOku shared UI layer. cyoku-ui.css * Keep this file framework-friendly: it normalizes Bootstrap-era pages without * requiring every legacy template to be rewritten at once. */ :root { --cy-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cy-bg: #f6f8fb; --cy-bg-soft: #eef3f8; --cy-surface: #ffffff; --cy-surface-dark: #111a2b; --cy-surface-dark-2: #0b1220; --cy-text: #172033; --cy-text-muted: #5f6f86; --cy-text-on-dark: #d7e3ff; --cy-border: #d9e2ee; --cy-border-dark: #21314a; --cy-primary: #1463ff; --cy-primary-dark: #0d47bf; --cy-accent: #ffc107; --cy-success: #16875a; --cy-danger: #d83a52; --cy-radius: 8px; --cy-radius-sm: 6px; --cy-shadow: 0 10px 28px rgba(20, 42, 72, .1); --cy-shadow-dark: 0 12px 30px rgba(0, 0, 0, .28); } /* --------------------------------------------------------------------------- App-shell dark theme. Dashboard pages opt in with Bootstrap's marker (the public marketing pages use data-theme="dark" + body.cyoku-public-page, handled further down). cyoku-ui is light-first, so the base :root tokens above are light — without this block a dashboard's body falls through to the light --cy-bg and renders white behind the dark cards. Re-point the core tokens to dark here. This selector is more specific than :root, so it also supersedes any inline :root a template declares, keeping every dark page on one consistent palette. --------------------------------------------------------------------------- */ html[data-bs-theme="dark"] { --cy-bg: #0b1220; --cy-bg-soft: #0e1626; --cy-surface: #121a2b; --cy-border: #21314a; --cy-text: #e6edf8; --cy-text-muted: #94a7c4; } html[data-bs-theme="dark"] body { color: var(--cy-text); background: radial-gradient(1200px 800px at 10% -10%, #172235 0%, var(--cy-bg) 55%) fixed; } /* Keep alert / error messages legible on the dark shell instead of inheriting light-page colors. */ html[data-bs-theme="dark"] .alert-danger { color: #ffd7d7; background-color: rgba(216, 58, 82, .16); border-color: rgba(216, 58, 82, .45); } html[data-bs-theme="dark"] .alert-success { color: #c9f5e3; background-color: rgba(22, 135, 90, .16); border-color: rgba(22, 135, 90, .45); } html[data-bs-theme="dark"] .alert-warning { color: #ffe6a6; background-color: rgba(244, 200, 74, .14); border-color: rgba(244, 200, 74, .42); } html[data-bs-theme="dark"] .alert-info { color: #bfe6ff; background-color: rgba(91, 192, 235, .14); border-color: rgba(91, 192, 235, .42); } *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } body { font-family: var(--cy-font); font-size: 1rem; line-height: 1.5; letter-spacing: 0; color: var(--cy-text); background: var(--cy-bg); text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--cy-font); font-weight: 700; line-height: 1.2; letter-spacing: 0; color: inherit; } h1, .h1 { font-size: 2rem; } h2, .h2 { font-size: 1.65rem; } h3, .h3 { font-size: 1.35rem; } h4, .h4 { font-size: 1.15rem; } h5, .h5 { font-size: 1rem; } h6, .h6 { font-size: .92rem; } p, li, label, input, select, textarea, button, .btn, .form-control, .form-select, .dropdown-item { letter-spacing: 0; } a { color: var(--cy-primary); } a:hover, a:focus { color: var(--cy-primary-dark); } img, video, iframe, canvas, svg { max-width: 100%; } img, video { height: auto; } main, .content-wrap, .cart-page, .settings-wrap, .profile-wrap { padding-top: 5.25rem; } body > .container, body > .container-fluid { max-width: 1180px; } .navbar, .cyoku-nav, .cyx-navbar { min-height: 4rem; font-family: var(--cy-font); letter-spacing: 0; } .navbar .container-fluid { gap: .75rem; } .navbar .navbar-toggler { min-width: 2.35rem; min-height: 2.35rem; border-radius: var(--cy-radius-sm); } .cyoku-nav, .navbar.navbar-dark.bg-dark { background: linear-gradient(180deg, rgba(10, 15, 26, .96), rgba(11, 18, 32, .94)) !important; border-bottom: 1px solid var(--cy-border-dark) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .32); backdrop-filter: blur(6px); } .cyoku-nav .navbar-brand .brand-img, .navbar.navbar-dark.bg-dark .navbar-brand img { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); } .cyoku-nav .brand-text, .navbar.navbar-dark.bg-dark .navbar-brand { font-weight: 700; color: var(--cy-accent) !important; } .cyoku-nav .nav-link, .navbar.navbar-dark.bg-dark .nav-link { color: var(--cy-text-on-dark) !important; opacity: .92; } .cyoku-nav .nav-link:hover, .cyoku-nav .nav-link:focus, .navbar.navbar-dark.bg-dark .nav-link:hover, .navbar.navbar-dark.bg-dark .nav-link:focus { opacity: 1; color: #fff !important; } .cyoku-nav .dropdown-menu, .navbar.navbar-dark.bg-dark .dropdown-menu { background: var(--cy-surface-dark); border-color: var(--cy-border-dark); } .cyoku-nav .dropdown-item, .navbar.navbar-dark.bg-dark .dropdown-item { color: var(--cy-text-on-dark); } .cyoku-nav .dropdown-item:hover, .cyoku-nav .dropdown-item:focus, .navbar.navbar-dark.bg-dark .dropdown-item:hover, .navbar.navbar-dark.bg-dark .dropdown-item:focus { background: #14233a; color: #fff; } .cyoku-nav .dropdown-divider, .navbar.navbar-dark.bg-dark .dropdown-divider { border-top-color: var(--cy-border-dark); } .navbar .nav-link, .navbar .dropdown-item, .cyoku-nav .nav-link, .cyoku-nav .dropdown-item { font-size: .94rem; line-height: 1.25; } .navbar .nav-link { display: flex; align-items: center; min-height: 2.25rem; } .navbar .dropdown-item { display: flex; min-height: 2.25rem; align-items: center; white-space: normal; } .navbar-brand img, .brand-img { object-fit: contain; } .nav-avatar, .navbar img.rounded-circle { width: 24px; height: 24px; object-fit: cover; border: 1px solid var(--cy-border-dark); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); } .dropdown-menu { border-radius: var(--cy-radius); border-color: var(--cy-border); box-shadow: var(--cy-shadow); } .card, .glass-card, .panel-card, .pricing-card, .course-card, .dashboard-card { border-radius: var(--cy-radius) !important; border: 1px solid var(--cy-border) !important; box-shadow: var(--cy-shadow); overflow-wrap: anywhere; } .card { background-color: var(--cy-surface); } .card-header { border-bottom: 1px solid var(--cy-border); font-weight: 700; } .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-body h1, .card-body h2, .card-body h3, .card-body h4 { margin-top: 0; } .card-body h1, .card-body .h1 { font-size: 1.45rem; } .card-body h2, .card-body .h2 { font-size: 1.3rem; } .card-body h3, .card-body .h3 { font-size: 1.15rem; } .card-body h4, .card-body .h4 { font-size: 1rem; } .card-footer { border-top: 1px solid var(--cy-border); } .bg-dark .card, .card.bg-dark, .glass-card, .panel-card, .c-1, .c-2, .list-group-root.well { background: var(--cy-surface-dark) !important; border-color: var(--cy-border-dark) !important; color: var(--cy-text-on-dark) !important; box-shadow: var(--cy-shadow-dark); } .c-1 .card-header, .c-2 .card-header, .glass-card .card-header, .panel-card .card-header { background: rgba(11, 18, 32, .94) !important; border-color: var(--cy-border-dark) !important; } .c-1 .card-body, .c-2 .card-body, .glass-card .card-body, .panel-card .card-body { background: transparent !important; } .list-group-item { border-color: var(--cy-border); font-size: .95rem; } .list-group-item-action:hover, .list-group-item-action:focus { background: #edf4ff; color: var(--cy-primary-dark); } .list-dark .list-group-item, .c-1 .list-group-item, .c-2 .list-group-item, .list-group-root .list-group-item { background: #0d1728 !important; color: var(--cy-text-on-dark) !important; border-color: var(--cy-border-dark) !important; } .list-dark .list-group-item:hover, .c-1 .list-group-item:hover, .c-2 .list-group-item:hover, .list-group-root .list-group-item:hover { background: #14233a !important; color: #ffffff !important; } .btn { border-radius: var(--cy-radius-sm); font-weight: 650; line-height: 1.25; min-height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .btn-sm { min-height: 2rem; font-size: .84rem; } .btn-lg { min-height: 2.75rem; } .btn-primary, .btn-info { background: var(--cy-primary); border-color: var(--cy-primary); color: #fff; } .btn-primary:hover, .btn-info:hover { background: var(--cy-primary-dark); border-color: var(--cy-primary-dark); } .btn-success { background: var(--cy-success); border-color: var(--cy-success); } .btn-danger { background: var(--cy-danger); border-color: var(--cy-danger); } .btn-warning { color: #1d2736; background: var(--cy-accent); border-color: var(--cy-accent); } .form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], select { border-radius: var(--cy-radius-sm); border-color: #cbd7e6; min-height: 2.45rem; color: var(--cy-text); } .form-control:focus, .form-select:focus, textarea:focus, input:focus, select:focus { border-color: var(--cy-primary); box-shadow: 0 0 0 .2rem rgba(20, 99, 255, .14); } .table { color: inherit; vertical-align: middle; width: 100%; } .table thead th { font-size: .82rem; text-transform: uppercase; color: var(--cy-text-muted); border-bottom-color: var(--cy-border); } .table tbody td { font-size: .94rem; } .table-responsive { border-radius: var(--cy-radius); } .badge { border-radius: 999px; font-weight: 700; } .alert { border-radius: var(--cy-radius); border-width: 1px; } .modal-content { border-radius: var(--cy-radius); border: 1px solid var(--cy-border); box-shadow: 0 18px 60px rgba(0, 0, 0, .28); } .text-warning, .accent, [style*="yellowgreen"] { color: var(--cy-accent) !important; } .text-muted, .dim { color: var(--cy-text-muted) !important; } .text-white .text-muted, .bg-dark .text-muted, .c-1 .text-muted, .c-2 .text-muted, .glass-card .text-muted, .panel-card .text-muted { color: #9fb0cc !important; } .scroll-list { border-radius: var(--cy-radius-sm); } .school-shell, .business-shell, .instructor-shell, .editor-shell, .admin-shell { max-width: 1180px; margin-inline: auto; } /* Legacy template harmonizers. These override old inline styles only where fixed sizing would otherwise make pages feel inconsistent or break mobile. */ [style*="font-size: large"] { font-size: 1rem !important; } [style*="font-size: 150%"] { font-size: 1.08rem !important; } [style*="font-size: 60px"] { font-size: 2rem !important; } [style*="font-size: 20px"] { font-size: 1.05rem !important; } [style*="font-size: xx-small"] { font-size: .78rem !important; } [style*="color: yellowgreen"], [style*="color: greenyellow"], [style*="color:#e6a200"], [style*="color: #e6a200"], [style*="color:#ffb400"], [style*="color: #ffb400"] { color: var(--cy-accent) !important; } [style*="background-color: yellowgreen"], [style*="background-color: #ee7204"], [style*="background-color:#4CAF50"], [style*="background-color: #4CAF50"] { background-color: var(--cy-primary) !important; } @media (min-width: 1200px) { body > .container, body > .container-fluid, .school-shell, .business-shell, .instructor-shell, .editor-shell, .admin-shell { max-width: 1200px; } } @media (max-width: 991.98px) { body > .container, body > .container-fluid, .container, .container-fluid { max-width: 100%; } main, .content-wrap, .cart-page, .settings-wrap, .profile-wrap { padding-top: 4.75rem; } .navbar, .cyoku-nav, .cyx-navbar { min-height: 3.75rem; } .navbar .container-fluid { padding-left: .875rem; padding-right: .875rem; } .navbar .navbar-collapse { width: 100%; flex-basis: 100%; } .navbar.navbar-dark.bg-dark .navbar-collapse, .cyoku-nav .navbar-collapse { margin-top: .65rem; padding: .65rem; background: rgba(11, 18, 32, .96); border: 1px solid var(--cy-border-dark); border-radius: var(--cy-radius); } .cyx-navbar .navbar-nav, .navbar .navbar-nav { width: 100%; align-items: stretch !important; } .navbar .nav-link, .navbar .dropdown-item { min-height: 2.45rem; width: 100%; } .navbar .dropdown-menu { width: 100%; margin-top: .35rem; box-shadow: none; } .row { margin-left: -.5rem; margin-right: -.5rem; } .row > [class*="col-"] { padding-left: .5rem; padding-right: .5rem; } .card-deck, .card-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .card-deck .card, .card-group .card { margin: 0; } } @media (max-width: 767.98px) { body { font-size: .96rem; } h1, .h1 { font-size: 1.65rem; } h2, .h2 { font-size: 1.38rem; } h3, .h3 { font-size: 1.2rem; } body > .container, body > .container-fluid { padding-left: 1rem; padding-right: 1rem; } main, .content-wrap, .cart-page, .settings-wrap, .profile-wrap { padding-top: 4.5rem; } .navbar-brand img, .brand-img { max-height: 2rem; } .navbar .navbar-brand { max-width: 52vw; overflow: hidden; } .navbar .dropdown-menu { position: static !important; float: none; } .card, .glass-card, .panel-card, .pricing-card, .course-card, .dashboard-card { box-shadow: 0 6px 18px rgba(20, 42, 72, .08); } .card-body, .modal-body { padding: 1rem !important; } .modal-dialog { margin: .75rem; } .btn { width: auto; max-width: 100%; white-space: normal; } .btn-group, .btn-toolbar { flex-wrap: wrap; gap: .5rem; } input, select, textarea, .form-control, .form-select, .input-group { max-width: 100%; } .input-group { flex-wrap: nowrap; } .table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .table-responsive .table { display: table; white-space: normal; } .card-deck, .card-group { grid-template-columns: 1fr; } [style*="width:98%"], [style*="width: 98%"], [style*="width:60%"], [style*="width: 60%"], [style*="width:50%"], [style*="width: 50%"], [style*="width:30%"], [style*="width: 30%"], [style*="width:20%"], [style*="width: 20%"], [style*="width:15%"], [style*="width: 15%"] { width: 100% !important; max-width: 100% !important; } [style*="padding-top: 6em"], [style*="padding-top: 5em"], [style*="padding-top: 4em"] { padding-top: 4.25rem !important; } } @media (max-width: 575.98px) { h1, .h1 { font-size: 1.45rem; } h2, .h2 { font-size: 1.25rem; } h3, .h3 { font-size: 1.08rem; } body > .container, body > .container-fluid, .container, .container-fluid { padding-left: .875rem; padding-right: .875rem; } .navbar .container-fluid { padding-left: .75rem; padding-right: .75rem; } .btn, .form-control, .form-select, input, select, textarea { font-size: .95rem; } } /* Public dark polish: home, login, and registration selection. The SVG wordmark has explicit logo dimensions after the global responsive image rule above. */ :root { --cy-public-bg-a: #101820; --cy-public-bg-b: #133a34; --cy-public-bg-c: #2b1d3f; --cy-public-surface: rgba(17, 31, 38, .88); --cy-public-surface-strong: #14242c; --cy-public-border: rgba(132, 220, 198, .22); --cy-public-text: #f3f7fb; --cy-public-muted: #b9c8d2; --cy-public-coral: #f46d5e; --cy-public-gold: #f4c84a; --cy-public-teal: #3dd6b3; --cy-public-blue: #7aa7ff; --cy-public-shadow: 0 18px 50px rgba(3, 10, 18, .42); } html[data-theme="dark"] { height: 100%; min-height: 100%; background-color: var(--cy-public-bg-a) !important; background: radial-gradient(900px 520px at 8% -12%, rgba(61, 214, 179, .22), transparent 60%), radial-gradient(860px 520px at 90% 8%, rgba(244, 109, 94, .17), transparent 58%), radial-gradient(700px 520px at 80% 110%, rgba(122, 167, 255, .16), transparent 55%), radial-gradient(820px 420px at 18% 110%, rgba(61, 214, 179, .18), transparent 62%), linear-gradient(135deg, var(--cy-public-bg-a) 0%, var(--cy-public-bg-b) 50%, var(--cy-public-bg-c) 100%) fixed; } html[data-theme="dark"] body.cyoku-public-page { position: relative; isolation: isolate; min-height: 100vh; min-height: 100lvh; padding-bottom: 6rem; color: var(--cy-public-text); background: radial-gradient(900px 520px at 8% -12%, rgba(61, 214, 179, .22), transparent 60%), radial-gradient(860px 520px at 90% 8%, rgba(244, 109, 94, .17), transparent 58%), radial-gradient(700px 520px at 80% 110%, rgba(122, 167, 255, .16), transparent 55%), radial-gradient(820px 420px at 18% 110%, rgba(61, 214, 179, .18), transparent 62%), linear-gradient(135deg, var(--cy-public-bg-a) 0%, var(--cy-public-bg-b) 50%, var(--cy-public-bg-c) 100%) fixed !important; } html[data-theme="dark"] body.cyoku-public-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 520px at 8% -12%, rgba(61, 214, 179, .22), transparent 60%), radial-gradient(860px 520px at 90% 8%, rgba(244, 109, 94, .17), transparent 58%), radial-gradient(700px 520px at 80% 110%, rgba(122, 167, 255, .16), transparent 55%), radial-gradient(820px 420px at 18% 110%, rgba(61, 214, 179, .18), transparent 62%), linear-gradient(135deg, var(--cy-public-bg-a) 0%, var(--cy-public-bg-b) 50%, var(--cy-public-bg-c) 100%); } html[data-theme="dark"] body.cyoku-public-page > main.container, html[data-theme="dark"] body.cyoku-public-page > div.container { min-height: calc(100vh - 4rem); min-height: calc(100lvh - 4rem); } .cyoku-brand-logo, .brand-img, .navbar-brand .cyoku-brand-logo, .navbar-brand img[alt="CyOku"], .navbar-brand img[alt="Cyoku Logo"], .navbar .navbar-brand > img { display: block; width: auto !important; height: 32px !important; max-width: 122px !important; max-height: 32px !important; object-fit: contain; } .cyoku-brand-logo-lg { height: 38px !important; max-height: 38px !important; max-width: 145px !important; } .navbar-brand { min-width: 0; } .cyoku-nav .brand-text, .cyx-navbar-dark .brand-text { display: none !important; } .navbar.cyx-navbar, .navbar.cyx-navbar.bg-light, .cyx-navbar-dark { min-height: 4rem; height: 4rem; overflow: visible; background: linear-gradient(90deg, rgba(15, 35, 38, .96), rgba(30, 34, 58, .96) 58%, rgba(53, 33, 63, .94)) !important; border-bottom: 1px solid var(--cy-public-border) !important; box-shadow: 0 14px 34px rgba(3, 10, 18, .38); backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); } .navbar.cyx-navbar .container-fluid, .cyx-navbar-dark .container-fluid { min-height: 4rem; } .navbar.cyx-navbar .nav-link, .navbar.cyx-navbar .navbar-brand, .cyx-navbar-dark .navbar-brand { color: var(--cy-public-text) !important; } .navbar.cyx-navbar .nav-link:hover, .navbar.cyx-navbar .nav-link:focus { color: var(--cy-public-gold) !important; } .navbar.cyx-navbar .btn-outline-dark, .cyx-navbar-dark .btn-outline-light { color: var(--cy-public-text) !important; border-color: rgba(243, 247, 251, .5) !important; background: rgba(255, 255, 255, .05) !important; } .navbar.cyx-navbar .btn-outline-dark:hover, .cyx-navbar-dark .btn-outline-light:hover { color: #172033 !important; background: var(--cy-public-teal) !important; border-color: var(--cy-public-teal) !important; } .navbar.cyx-navbar .btn-outline-danger, .cyx-navbar-dark .btn-warning { color: #172033 !important; background: var(--cy-public-gold) !important; border-color: var(--cy-public-gold) !important; } .navbar.cyx-navbar .btn-outline-danger:hover, .cyx-navbar-dark .btn-warning:hover { background: #ffd96b !important; border-color: #ffd96b !important; } .navbar.cyx-navbar .dropdown-menu, .cyx-navbar-dark .dropdown-menu, .cyx-modal .modal-content { background: var(--cy-public-surface-strong); color: var(--cy-public-text); border: 1px solid var(--cy-public-border); } .navbar.cyx-navbar .dropdown-item, .cyx-modal .list-group-item, .cyx-modal .accordion-item, .cyx-modal .accordion-button { color: var(--cy-public-text); background: transparent; } .navbar.cyx-navbar .dropdown-item:hover, .navbar.cyx-navbar .dropdown-item:focus, .cyx-modal .list-group-item:hover, .cyx-modal .accordion-button:not(.collapsed) { color: var(--cy-public-gold); background: rgba(61, 214, 179, .1); } #cyx-search .form-control, .navbar.cyx-navbar #cyx-search .form-control { color: var(--cy-public-text) !important; background: rgba(255, 255, 255, .09) !important; border-color: rgba(255, 255, 255, .2) !important; } #cyx-search .form-control::placeholder { color: rgba(243, 247, 251, .7); } #cyx-search .cyx-btn, .navbar.cyx-navbar #cyx-search .cyx-btn { color: #172033 !important; background: var(--cy-public-coral) !important; border-color: var(--cy-public-coral) !important; } html[data-theme="dark"] body.cyoku-public-page .form-control, html[data-theme="dark"] body.cyoku-public-page .form-select, html[data-theme="dark"] body.cyoku-public-page input, html[data-theme="dark"] body.cyoku-public-page select, html[data-theme="dark"] body.cyoku-public-page textarea { color: var(--cy-public-text) !important; -webkit-text-fill-color: var(--cy-public-text) !important; background-color: rgba(255, 255, 255, .08) !important; border-color: rgba(243, 247, 251, .48) !important; } html[data-theme="dark"] body.cyoku-public-page .form-control::placeholder, html[data-theme="dark"] body.cyoku-public-page input::placeholder, html[data-theme="dark"] body.cyoku-public-page textarea::placeholder { color: rgba(243, 247, 251, .72) !important; -webkit-text-fill-color: rgba(243, 247, 251, .72) !important; } html[data-theme="dark"] body.cyoku-public-page .form-control:focus, html[data-theme="dark"] body.cyoku-public-page .form-select:focus, html[data-theme="dark"] body.cyoku-public-page input:focus, html[data-theme="dark"] body.cyoku-public-page select:focus, html[data-theme="dark"] body.cyoku-public-page textarea:focus { border-color: var(--cy-public-teal) !important; box-shadow: 0 0 0 .2rem rgba(61, 214, 179, .2) !important; } html[data-theme="dark"] body.cyoku-public-page option { color: #14242c; background: #f3f7fb; } html[data-theme="dark"] body.cyoku-public-page .navbar.cyx-navbar span:not(.badge) { color: inherit !important; } html[data-theme="dark"] body.cyoku-public-page .navbar.cyx-navbar .badge.text-dark { color: #14242c !important; } html[data-theme="dark"] body.cyoku-public-page .glass-card { color: var(--cy-public-text) !important; background: linear-gradient(180deg, rgba(20, 36, 52, .94), rgba(15, 26, 40, .92)) !important; border: 1px solid var(--cy-public-border) !important; border-radius: var(--cy-radius) !important; box-shadow: var(--cy-public-shadow) !important; } html[data-theme="dark"] body.cyoku-public-page .glass-card label, html[data-theme="dark"] body.cyoku-public-page .glass-card .form-label, html[data-theme="dark"] body.cyoku-public-page .glass-card .form-text, html[data-theme="dark"] body.cyoku-public-page .glass-card .helper-text, html[data-theme="dark"] body.cyoku-public-page .glass-card .card-text, html[data-theme="dark"] body.cyoku-public-page .glass-card p, html[data-theme="dark"] body.cyoku-public-page .glass-card span { color: var(--cy-public-muted) !important; } html[data-theme="dark"] body.cyoku-public-page .glass-card label, html[data-theme="dark"] body.cyoku-public-page .glass-card .form-label, html[data-theme="dark"] body.cyoku-public-page .glass-card h1, html[data-theme="dark"] body.cyoku-public-page .glass-card h2, html[data-theme="dark"] body.cyoku-public-page .glass-card h3, html[data-theme="dark"] body.cyoku-public-page .glass-card h4, html[data-theme="dark"] body.cyoku-public-page .glass-card h5 { color: var(--cy-public-text) !important; } html[data-theme="dark"] body.cyoku-public-page .glass-card .input-group-text { color: #14242c !important; background: rgba(243, 247, 251, .72) !important; border-color: rgba(243, 247, 251, .48) !important; } html[data-theme="dark"] body.cyoku-public-page .glass-card .btn span { color: inherit !important; } .card.card-glass, .cyx-card { color: var(--cy-public-text) !important; background: linear-gradient(180deg, rgba(24, 43, 52, .94), rgba(16, 28, 38, .9)) !important; border: 1px solid var(--cy-public-border) !important; border-radius: var(--cy-radius) !important; box-shadow: var(--cy-public-shadow) !important; } .card.card-glass { min-height: 100%; } .card.card-glass .card-body, .card.card-glass .card-footer { background: transparent !important; } .card.card-glass .list-unstyled li, .cyx-card .form-label, .cyx-card .form-check-label { color: #dce9ef !important; } .card.card-glass .list-unstyled li::before { color: var(--cy-public-teal); } .card.card-glass .card-title, .cyx-card .modal-title { color: inherit; } .card.card-glass .btn-register { border-radius: var(--cy-radius-sm) !important; } .card.card-glass .btn-user, .card.card-glass .btn-parent, .card.card-glass .btn-school { color: #14242c !important; } .card.card-glass .btn-instructor, .card.card-glass .btn-business { color: #ffffff !important; } .cyx-card .cyx-input, .cyx-card .form-control { color: var(--cy-public-text) !important; -webkit-text-fill-color: var(--cy-public-text) !important; background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .22) !important; } .cyx-card .cyx-input:focus, .cyx-card .form-control:focus { border-color: var(--cy-public-teal) !important; box-shadow: 0 0 0 .2rem rgba(61, 214, 179, .2) !important; } .cyx-card .btn.cyx-btn-accent { color: #14242c !important; background: var(--cy-public-gold) !important; } .cyx-card .btn.cyx-btn-accent:hover, .cyx-card .btn.cyx-btn-accent:focus { color: #14242c !important; background: #ffd96b !important; } .cyx-card .btn-outline-light, .cyx-card .btn-outline-secondary { color: var(--cy-public-text) !important; background: rgba(255, 255, 255, .04) !important; border-color: rgba(243, 247, 251, .62) !important; } .cyx-card .btn-outline-light:hover, .cyx-card .btn-outline-light:focus, .cyx-card .btn-outline-secondary:hover, .cyx-card .btn-outline-secondary:focus { color: #14242c !important; background: var(--cy-public-teal) !important; border-color: var(--cy-public-teal) !important; } .cyx-link, html[data-theme="dark"] body.cyoku-public-page a.cyx-link { color: var(--cy-public-gold); } html[data-theme="dark"] body.cyoku-public-page .text-muted, html[data-theme="dark"] body.cyoku-public-page .dim, .cyx-help { color: var(--cy-public-muted) !important; } html[data-theme="dark"] body.cyoku-public-page #home-hero .carousel-item { background: #101820; } html[data-theme="dark"] body.cyoku-public-page #home-hero .hero-overlay { background: linear-gradient(90deg, rgba(16, 24, 32, .75), rgba(19, 58, 52, .38) 48%, rgba(43, 29, 63, .18)) !important; } html[data-theme="dark"] body.cyoku-public-page .probootstrap-counter-wrap { background: rgba(20, 36, 44, .86); border-color: var(--cy-public-border); color: var(--cy-public-teal); } @media (max-width: 991.98px) { .cyoku-brand-logo, .navbar-brand .cyoku-brand-logo, .navbar-brand img[alt="CyOku"] { height: 28px !important; max-height: 28px !important; max-width: 106px !important; } .navbar.cyx-navbar, .navbar.cyx-navbar.bg-light, .cyx-navbar-dark { min-height: 3.75rem; height: 3.75rem; } .navbar.cyx-navbar .container-fluid, .cyx-navbar-dark .container-fluid { min-height: 3.75rem; } } /* Public shopping pages light refresh: index, course search, course details, cart. */ html[data-theme="light"] { background: #f6f8fb !important; } body.cyoku-shop-page { --cy-shop-bg: #f6f8fb; --cy-shop-band: #eef5ff; --cy-shop-surface: #ffffff; --cy-shop-surface-2: #f8fbff; --cy-shop-border: #dbe6f2; --cy-shop-text: #152238; --cy-shop-muted: #617086; --cy-shop-primary: #1463ff; --cy-shop-primary-dark: #0d47bf; --cy-shop-accent: #f4b63d; --cy-shop-success: #16875a; --cy-shop-danger: #d83a52; --cy-shop-shadow: 0 10px 28px rgba(20, 42, 72, .1); min-height: 100vh; padding-bottom: 0; color: var(--cy-shop-text); background: linear-gradient(180deg, #ffffff 0%, var(--cy-shop-bg) 42%, #eef4fb 100%) fixed !important; } body.cyoku-shop-page::before { display: none !important; } body.cyoku-shop-page > main.container, body.cyoku-shop-page > div.container, body.cyoku-shop-page > div.container-fluid { min-height: auto !important; } body.cyoku-shop-page .navbar.cyx-navbar, body.cyoku-shop-page .navbar.cyx-navbar.bg-light, body.cyoku-shop-page .cyx-navbar-dark { position: fixed !important; top: 0; right: 0; left: 0; z-index: 1040; height: 4rem; min-height: 4rem; overflow: visible; background: rgba(255, 255, 255, .96) !important; border-bottom: 1px solid var(--cy-shop-border) !important; box-shadow: 0 8px 22px rgba(20, 42, 72, .08); backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); } body.cyoku-shop-page .navbar.cyx-navbar .container-fluid, body.cyoku-shop-page .cyx-navbar-dark .container-fluid { min-height: 4rem; } body.cyoku-shop-page .navbar.cyx-navbar .nav-link, body.cyoku-shop-page .navbar.cyx-navbar .navbar-brand, body.cyoku-shop-page .cyx-navbar-dark .navbar-brand { color: var(--cy-shop-text) !important; } body.cyoku-shop-page .navbar.cyx-navbar .nav-link:hover, body.cyoku-shop-page .navbar.cyx-navbar .nav-link:focus { color: var(--cy-shop-primary) !important; } body.cyoku-shop-page .navbar.cyx-navbar .btn-outline-dark { color: var(--cy-shop-text) !important; border-color: #c8d5e3 !important; background: #ffffff !important; } body.cyoku-shop-page .navbar.cyx-navbar .btn-outline-dark:hover { color: #ffffff !important; background: var(--cy-shop-primary) !important; border-color: var(--cy-shop-primary) !important; } body.cyoku-shop-page .navbar.cyx-navbar .btn-outline-danger { color: #4b3210 !important; background: #ffd361 !important; border-color: #ffd361 !important; } body.cyoku-shop-page .navbar.cyx-navbar .btn-outline-danger:hover { background: #ffc233 !important; border-color: #ffc233 !important; } body.cyoku-shop-page .navbar.cyx-navbar .dropdown-menu, body.cyoku-shop-page .cyx-modal .modal-content { color: var(--cy-shop-text); background: #ffffff !important; border: 1px solid var(--cy-shop-border) !important; box-shadow: var(--cy-shop-shadow); } body.cyoku-shop-page .navbar.cyx-navbar .dropdown-item, body.cyoku-shop-page .cyx-modal .list-group-item, body.cyoku-shop-page .cyx-modal .accordion-item, body.cyoku-shop-page .cyx-modal .accordion-button { color: var(--cy-shop-text) !important; background: #ffffff; } body.cyoku-shop-page .navbar.cyx-navbar .dropdown-item:hover, body.cyoku-shop-page .navbar.cyx-navbar .dropdown-item:focus, body.cyoku-shop-page .cyx-modal .list-group-item:hover, body.cyoku-shop-page .cyx-modal .accordion-button:not(.collapsed) { color: var(--cy-shop-primary) !important; background: #eef5ff !important; } body.cyoku-shop-page #cyx-search .form-control, body.cyoku-shop-page .navbar.cyx-navbar #cyx-search .form-control { color: var(--cy-shop-text) !important; -webkit-text-fill-color: var(--cy-shop-text) !important; background: #ffffff !important; border-color: #c8d5e3 !important; } body.cyoku-shop-page #cyx-search .form-control::placeholder { color: #7a8797 !important; -webkit-text-fill-color: #7a8797 !important; } body.cyoku-shop-page #cyx-search .btn, body.cyoku-shop-page #cyx-search .cyx-btn, body.cyoku-shop-page .navbar.cyx-navbar #cyx-search .cyx-btn { color: #ffffff !important; background: var(--cy-shop-danger) !important; border-color: var(--cy-shop-danger) !important; } body.cyoku-shop-page #home-hero { margin-top: 4rem; background: #ffffff; border-bottom: 1px solid var(--cy-shop-border); } body.cyoku-shop-page #home-hero .carousel-item { background: #ffffff !important; } body.cyoku-shop-page #home-hero .carousel-item img { height: min(58vh, 520px); max-height: 520px; min-height: 300px; object-fit: cover; } body.cyoku-shop-page #home-hero .hero-overlay { background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .72) 46%, rgba(255, 255, 255, .06)) !important; } body.cyoku-shop-page #home-hero .hero-copy h3 { color: var(--cy-shop-primary-dark) !important; text-shadow: none !important; } body.cyoku-shop-page #home-hero .hero-copy p { color: var(--cy-shop-text) !important; text-shadow: none !important; } body.cyoku-shop-page #home-hero .carousel-control-prev-icon, body.cyoku-shop-page #home-hero .carousel-control-next-icon { filter: invert(24%) sepia(83%) saturate(1785%) hue-rotate(215deg) brightness(90%) contrast(94%); } body.cyoku-shop-page #home-hero .carousel-indicators [data-bs-target] { background-color: var(--cy-shop-primary); } body.cyoku-shop-page .probootstrap-section { margin: 1.25rem 0 2rem !important; } body.cyoku-shop-page .probootstrap-counter-wrap { min-height: 5.25rem; padding: .9rem; color: var(--cy-shop-primary) !important; background: #ffffff !important; border: 1px solid var(--cy-shop-border) !important; border-radius: var(--cy-radius) !important; box-shadow: 0 8px 20px rgba(20, 42, 72, .07); } body.cyoku-shop-page .probootstrap-counter-label { margin-bottom: 0; color: var(--cy-shop-muted); } body.cyoku-shop-page .banner-container { margin: 1.5rem auto .75rem; } body.cyoku-shop-page .banner-container img { width: min(100%, 760px) !important; height: auto !important; max-height: 96px; object-fit: contain; } body.cyoku-shop-page .banner-text h2 { margin: 0; color: #ffffff; font-size: 1.35rem; font-weight: 800; } body.cyoku-shop-page > .container-fluid[style*="background-color"] { max-width: none; margin: 0; padding: 1rem max(1rem, calc((100vw - 1180px) / 2)) 2.25rem !important; background: var(--cy-shop-band) !important; } body.cyoku-shop-page > .container-fluid[style*="background-color"] > div:first-child { max-width: 1180px; margin: 0 auto .75rem; } body.cyoku-shop-page > .container-fluid[style*="background-color"] > div:first-child h5 { margin-left: 0 !important; background: var(--cy-shop-primary) !important; color: #ffffff !important; } body.cyoku-shop-page .owl-carousel { max-width: 1180px; margin: 0 auto; } body.cyoku-shop-page .owl-carousel .owl-stage { display: flex; } body.cyoku-shop-page .owl-carousel .owl-item { display: flex; } body.cyoku-shop-page .owl-carousel .item { width: 100%; padding: .4rem; } body.cyoku-shop-page .owl-carousel .card { width: 100% !important; max-width: none !important; height: 100%; min-height: 390px; margin: 0; color: var(--cy-shop-text); background: #ffffff !important; border: 1px solid var(--cy-shop-border) !important; border-radius: var(--cy-radius) !important; box-shadow: 0 10px 24px rgba(20, 42, 72, .1) !important; } body.cyoku-shop-page .card-free, body.cyoku-shop-page .card-lecture, body.cyoku-shop-page .card-test, body.cyoku-shop-page .card-exam { box-shadow: 0 10px 24px rgba(20, 42, 72, .1) !important; } body.cyoku-shop-page .card-free { border-top: 4px solid var(--cy-shop-primary) !important; } body.cyoku-shop-page .card-lecture { border-top: 4px solid var(--cy-shop-success) !important; } body.cyoku-shop-page .card-test { border-top: 4px solid #7257d9 !important; } body.cyoku-shop-page .card-exam { border-top: 4px solid #ee7204 !important; } body.cyoku-shop-page .image-div, body.cyoku-shop-page .image-div-free { height: 11.5rem !important; overflow: hidden; background: #edf3fa; } body.cyoku-shop-page .card-img-top { width: 100%; height: 100%; object-fit: cover; } body.cyoku-shop-page .course-brand { max-width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffffff !important; background: rgba(13, 71, 191, .9) !important; } body.cyoku-shop-page .owl-carousel .card-body { display: flex; min-height: 13.75rem; flex-direction: column; gap: .45rem; padding: 1rem !important; } body.cyoku-shop-page .owl-carousel .card-body h6, body.cyoku-shop-page .course-card-name { min-height: 2.7rem; margin: .2rem 0 0; color: var(--cy-shop-text); font-weight: 800; text-align: left !important; } body.cyoku-shop-page .owl-carousel .card-body > .w-100:last-child { margin-top: auto; } body.cyoku-shop-page .floating-user { max-width: 10.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.cyoku-shop-page .biz-ad-section { color: var(--cy-shop-text); background: linear-gradient(135deg, #ffffff, #eef6ff) !important; border-top: 1px solid var(--cy-shop-border); border-bottom: 1px solid var(--cy-shop-border); box-shadow: none; } body.cyoku-shop-page .biz-ad-title { color: var(--cy-shop-primary); } body.cyoku-shop-page .biz-subtitle, body.cyoku-shop-page .biz-feature p { color: var(--cy-shop-muted); } body.cyoku-shop-page .biz-feature { background: #ffffff; border: 1px solid var(--cy-shop-border); border-radius: var(--cy-radius); box-shadow: 0 8px 20px rgba(20, 42, 72, .07); } body.cyoku-shop-page .biz-feature h4 { color: var(--cy-shop-primary-dark); } body.cyoku-shop-page .btn-biz-register { color: #ffffff; background: var(--cy-shop-success); border-radius: var(--cy-radius); } body.cyoku-shop-page [style*="background-color: #2E0854"] { color: var(--cy-shop-text) !important; background: #ffffff !important; border: 1px solid var(--cy-shop-border); border-radius: var(--cy-radius) !important; box-shadow: var(--cy-shop-shadow) !important; } body.cyoku-shop-page [style*="background-color: #2E0854"] .text-white, body.cyoku-shop-page [style*="background-color: #2E0854"] p, body.cyoku-shop-page [style*="background-color: #2E0854"] li { color: var(--cy-shop-text) !important; } body.cyoku-shop-page [style*="background-color: #2E0854"] h4 { color: var(--cy-shop-primary-dark) !important; } body.cyoku-shop-page .section-hero { margin-top: 4rem; color: var(--cy-shop-text); background: linear-gradient(135deg, #eef6ff, #ffffff) !important; border-bottom: 1px solid var(--cy-shop-border); } body.cyoku-shop-page .glass, body.cyoku-shop-page .glass-soft, body.cyoku-shop-page .cy-card, body.cyoku-shop-page .pricing-card, body.cyoku-shop-page .soft-panel, body.cyoku-shop-page .soft-panel-2, body.cyoku-shop-page .profile-card, body.cyoku-shop-page .review-box, body.cyoku-shop-page .glass-card, body.cyoku-shop-page .course-card { color: var(--cy-shop-text) !important; background: var(--cy-shop-surface) !important; border: 1px solid var(--cy-shop-border) !important; border-radius: var(--cy-radius) !important; box-shadow: var(--cy-shop-shadow) !important; } body.cyoku-shop-page .cart-header { color: var(--cy-shop-text) !important; background: #eef6ff !important; border-bottom: 1px solid var(--cy-shop-border); } body.cyoku-shop-page .cart-header .opacity-75 { color: var(--cy-shop-muted); opacity: 1 !important; } body.cyoku-shop-page .course-img-wrap, body.cyoku-shop-page .price-box, body.cyoku-shop-page .qty-form { background: var(--cy-shop-surface-2) !important; border: 1px solid var(--cy-shop-border) !important; border-radius: var(--cy-radius) !important; } body.cyoku-shop-page .course-type-badge { color: var(--cy-shop-primary-dark); background: #e8f1ff; border-radius: 999px; } body.cyoku-shop-page .line-total, body.cyoku-shop-page .summary-total, body.cyoku-shop-page .pricing-card .price { color: var(--cy-shop-success) !important; } body.cyoku-shop-page .summary-card { top: 5.5rem; } body.cyoku-shop-page .empty-card { color: var(--cy-shop-muted); } body.cyoku-shop-page .form-control, body.cyoku-shop-page .form-select, body.cyoku-shop-page input, body.cyoku-shop-page select, body.cyoku-shop-page textarea { color: var(--cy-shop-text) !important; -webkit-text-fill-color: var(--cy-shop-text) !important; background-color: #ffffff !important; border-color: #c8d5e3 !important; } body.cyoku-shop-page .form-control::placeholder, body.cyoku-shop-page input::placeholder, body.cyoku-shop-page textarea::placeholder { color: #7a8797 !important; -webkit-text-fill-color: #7a8797 !important; } body.cyoku-shop-page .form-control:focus, body.cyoku-shop-page .form-select:focus, body.cyoku-shop-page input:focus, body.cyoku-shop-page select:focus, body.cyoku-shop-page textarea:focus { border-color: var(--cy-shop-primary) !important; box-shadow: 0 0 0 .2rem rgba(20, 99, 255, .14) !important; } body.cyoku-shop-page .btn-outline-accent { color: var(--cy-shop-primary) !important; background: #ffffff !important; border-color: var(--cy-shop-primary) !important; } body.cyoku-shop-page .btn-outline-accent:hover, body.cyoku-shop-page .btn-outline-accent:focus, body.cyoku-shop-page .btn-accent { color: #ffffff !important; background: var(--cy-shop-primary) !important; border-color: var(--cy-shop-primary) !important; } body.cyoku-shop-page .badge-accent, body.cyoku-shop-page .badge.text-bg-dark { color: var(--cy-shop-primary-dark) !important; background: #e8f1ff !important; border-color: #cfe0f5 !important; } body.cyoku-shop-page .text-accent, body.cyoku-shop-page .text-accent-2 { color: var(--cy-shop-primary) !important; } body.cyoku-shop-page .text-muted, body.cyoku-shop-page .text-secondary, body.cyoku-shop-page small, body.cyoku-shop-page .small { color: var(--cy-shop-muted) !important; } body.cyoku-shop-page .search-list-image { width: 13rem; height: 8rem; object-fit: cover; border-radius: var(--cy-radius); background: #edf3fa; } body.cyoku-shop-page .course-header { padding-top: 6rem !important; color: var(--cy-shop-text) !important; background: linear-gradient(135deg, #eef6ff, #ffffff 62%, #fff6df) !important; border-bottom: 1px solid var(--cy-shop-border) !important; } body.cyoku-shop-page .course-header .title, body.cyoku-shop-page .course-header .text-white, body.cyoku-shop-page .course-header a.text-white { color: var(--cy-shop-text) !important; } body.cyoku-shop-page .course-header .text-white-50 { color: var(--cy-shop-muted) !important; } body.cyoku-shop-page .course-header .btn-dark { color: var(--cy-shop-primary-dark) !important; background: #ffffff !important; border-color: var(--cy-shop-border) !important; } body.cyoku-shop-page .accordion .accordion-item, body.cyoku-shop-page .accordion-button, body.cyoku-shop-page .accordion-body { color: var(--cy-shop-text); background: #ffffff; border-color: var(--cy-shop-border); } body.cyoku-shop-page .accordion-button:not(.collapsed) { background: #eef6ff; } body.cyoku-shop-page footer, body.cyoku-shop-page footer.bg-dark, body.cyoku-shop-page footer[style*="background-color: #1a1d21"], body.cyoku-shop-page footer[style*="background:#1a1d21"] { color: var(--cy-shop-text) !important; background: #ffffff !important; border-top: 1px solid var(--cy-shop-border); } body.cyoku-shop-page footer .text-white, body.cyoku-shop-page footer .text-white-50, body.cyoku-shop-page footer .link-light, body.cyoku-shop-page footer a { color: var(--cy-shop-text) !important; } body.cyoku-shop-page .loading-box { background: #ffffff; border-color: var(--cy-shop-border); color: var(--cy-shop-text); } @media (max-width: 991.98px) { body.cyoku-shop-page .navbar.cyx-navbar, body.cyoku-shop-page .navbar.cyx-navbar.bg-light, body.cyoku-shop-page .cyx-navbar-dark { min-height: 3.75rem; height: 3.75rem; } body.cyoku-shop-page .navbar.cyx-navbar .container-fluid, body.cyoku-shop-page .cyx-navbar-dark .container-fluid { min-height: 3.75rem; } body.cyoku-shop-page #home-hero { margin-top: 3.75rem; } body.cyoku-shop-page #home-hero .carousel-item img { height: 340px; min-height: 260px; } body.cyoku-shop-page .section-hero { margin-top: 3.75rem; } body.cyoku-shop-page .course-header { padding-top: 5.25rem !important; } } @media (max-width: 767.98px) { body.cyoku-shop-page > .container-fluid[style*="background-color"] { padding-left: 1rem !important; padding-right: 1rem !important; } body.cyoku-shop-page .banner-text h2 { font-size: 1rem; } body.cyoku-shop-page .search-list-image { width: 6.5rem; height: 4.5rem; } body.cyoku-shop-page .cart-page { padding-top: 5rem; } } /* =========================================================================== CyOku brand system (TASK_05). Canonical palette tokens + logo lockup utilities. The reusable lockup lives in templates/fragments/brand.html; it renders the mark from /images/brand/cyoku-mark.svg next to the "CyOku" wordmark. Light surfaces: Cy = navy, Oku = forest. Dark surfaces: Cy = white, Oku = teal (.cyoku-lockup--dark). =========================================================================== */ :root { --cyoku-navy: #0D1B3D; --cyoku-deep-blue: #1E4DB7; --cyoku-blue: #2563EB; --cyoku-teal: #14B8A6; --cyoku-forest: #0F766E; --cyoku-mint: #E6F7F5; --cyoku-brand-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } .cyoku-lockup { display: inline-flex; align-items: center; gap: .5rem; line-height: 1; text-decoration: none; white-space: nowrap; } .cyoku-mark { display: block; width: auto; height: 32px; flex: 0 0 auto; } .cyoku-wordmark { font-family: var(--cyoku-brand-font); font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; } .cyoku-wordmark__cy { color: var(--cyoku-navy); } .cyoku-wordmark__oku { color: var(--cyoku-forest); } /* On-dark inverse treatment (dark navbars, footer, dark heroes). */ .cyoku-lockup--dark .cyoku-wordmark__cy { color: #ffffff; } .cyoku-lockup--dark .cyoku-wordmark__oku { color: var(--cyoku-teal); } /* Shop / marketing pages render a LIGHT navbar (body.cyoku-shop-page overrides .cyx-navbar to white), so the lockup wordmark must use the light treatment there even though the nav lockup carries the --dark modifier — otherwise the white "Cy" is invisible on white. The navy mark tile already reads on any background. */ body.cyoku-shop-page .cyoku-wordmark__cy { color: var(--cyoku-navy) !important; } body.cyoku-shop-page .cyoku-wordmark__oku { color: var(--cyoku-forest) !important; } /* Compact navigation lockup. */ .cyoku-lockup--nav .cyoku-mark { height: 28px; } .cyoku-lockup--nav .cyoku-wordmark { font-size: 1.25rem; } /* Larger lockup for hero / sign-in headers. */ .cyoku-lockup--lg .cyoku-mark { height: 40px; } .cyoku-lockup--lg .cyoku-wordmark { font-size: 1.7rem; } /* Keep the mark, drop the wordmark on phones to save nav width. */ @media (max-width: 575.98px) { .cyoku-lockup--nav .cyoku-wordmark { display: none; } }