/* ============================================================================ dojo.css - Japanese-inspired theme for the AKKU / IFK Uruguay back-office. Overrides Bootstrap 3.3.6. Sumi ink + washi paper + Kyokushin vermilion. Loaded last from includes.php, so these rules win. ========================================================================== */ :root { --sumi: #17181a; /* ink black - text, headers, primary buttons */ --sumi-soft: #33343a; --washi: #f4f0e6; /* aged paper - page background */ --paper: #fcfaf4; /* cleaner paper - cards, inputs */ --shu: #b3271f; /* vermilion - the karate-gi patch red, accent */ --shu-dark: #8c1c16; --gold: #9c7b3f; /* muted gold - rank / secondary accents */ --line: #d9d3c4; /* hairline rule */ --line-soft: #e7e2d5; --muted: #6c675c; /* secondary text */ --ok: #3f6b45; /* calm green for "paid" / success */ --serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; --sans: "Zen Kaku Gothic New", "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif; } /* ---- base ---------------------------------------------------------------- */ html, body { background: var(--washi); color: var(--sumi); font-family: var(--sans); font-size: 15px; line-height: 1.6; } /* thin band across the top of every page - the "obi" (belt) */ body { border-top: 4px solid var(--shu); min-height: 100vh; position: relative; /* breathing room - lots of pages echo tables/breadcrumbs straight into , outside any .container, so the gutter belongs here */ padding: 20px 34px 52px; } @media (max-width: 640px) { body { padding-left: 16px; padding-right: 16px; } } /* faint Kyokushin kanji watermark, fixed, out of the way */ body::before { content: "\771F"; /* 真 - "truth" (the -shin of Kyokushin, 極真) */ position: fixed; right: 2vw; bottom: -2vw; font-family: var(--serif); font-size: 34vh; line-height: 1; color: var(--sumi); opacity: .035; pointer-events: none; z-index: 0; user-select: none; } .container { position: relative; z-index: 1; max-width: 1140px; } a { color: var(--shu); } a:hover, a:focus { color: var(--shu-dark); text-decoration: underline; } ::selection { background: rgba(179, 39, 31, .18); } /* ---- headings --------------------------------------------------------- */ h1, h2, h3, h4, h5, legend, .panel-heading, .breadcrumb { font-family: var(--serif); letter-spacing: .01em; } h1, h2, h3 { color: var(--sumi); font-weight: 700; } legend { font-size: 20px; font-weight: 700; color: var(--sumi); border: 0; border-bottom: 2px solid var(--sumi); padding-bottom: 8px; margin-bottom: 22px; display: flex; align-items: baseline; } legend::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--shu); margin-right: 12px; transform: translateY(-1px); } /* ---- breadcrumb: a quiet path with brush-stroke separators ------------- */ .breadcrumb { background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 0 14px; margin: 0 0 26px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; } .breadcrumb > li + li::before { content: "\FF0F"; /* full-width slash */ color: var(--line); padding: 0 10px; } .breadcrumb > .active { color: var(--muted); } .breadcrumb a { color: var(--sumi); text-decoration: none; } .breadcrumb a:hover { color: var(--shu); } /* ---- panels: paper cards with an ink edge ----------------------------- */ .panel { background: var(--paper); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 1px 0 var(--line-soft), 0 12px 30px -22px rgba(23, 24, 26, .5); } .panel-heading { background: var(--sumi); color: var(--washi); border-radius: 0; border-bottom: 3px solid var(--shu); font-weight: 600; letter-spacing: .06em; padding: 12px 18px; } .panel-primary, .panel-primary > .panel-heading { border-color: var(--sumi); } .panel-primary > .panel-heading { color: var(--washi); background: var(--sumi); } .panel-body { padding: 20px; } /* ---- wells / forms --------------------------------------------------- */ .well { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--sumi); border-radius: 0; box-shadow: none; padding: 26px 28px; } label, .form-group > b, form b { font-weight: 600; color: var(--sumi-soft); } .form-control { border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--sumi); box-shadow: none; height: 38px; } textarea.form-control { height: auto; } .form-control:focus { border-color: var(--shu); box-shadow: 0 0 0 3px rgba(179, 39, 31, .14); outline: 0; } .form-control::placeholder { color: #b3ac9c; } select.form-control { height: 38px; } /* ---- buttons: flat, squared, ink & vermilion ----------------------- */ .btn { border-radius: 2px; font-family: var(--sans); font-weight: 500; letter-spacing: .03em; padding: 7px 18px; border: 1px solid transparent; transition: background-color .12s ease, color .12s ease, border-color .12s ease; text-shadow: none; background-image: none; box-shadow: none; } .btn:active, .btn.active { box-shadow: none; } .btn-default { background: var(--paper); border-color: var(--sumi); color: var(--sumi); } .btn-default:hover, .btn-default:focus { background: var(--sumi); border-color: var(--sumi); color: var(--washi); } .btn-primary { background: var(--sumi); border-color: var(--sumi); color: var(--washi); } .btn-primary:hover, .btn-primary:focus { background: var(--shu); border-color: var(--shu); color: #fff; } .btn-success { background: var(--shu); border-color: var(--shu); color: #fff; } .btn-success:hover, .btn-success:focus { background: var(--shu-dark); border-color: var(--shu-dark); color: #fff; } .btn-danger { background: transparent; border-color: var(--shu-dark); color: var(--shu-dark); } .btn-danger:hover, .btn-danger:focus { background: var(--shu-dark); color: #fff; } .btn[disabled], .btn[disabled]:hover { opacity: .4; } .btn-group-vertical > .btn { text-align: left; } .btn-group-vertical > .btn + .btn { margin-top: -1px; } /* ---- tables: ledger ruled in ink --------------------------------- */ .table { background: var(--paper); border: 1px solid var(--line); } .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > td:first-child b, .table b { font-family: var(--serif); font-weight: 700; color: var(--sumi); } .table > thead > tr > th, .table tr:first-child td b { border-bottom: 2px solid var(--sumi) !important; } .table > tbody > tr > td, .table > tbody > tr > th { border-top: 1px solid var(--line-soft); vertical-align: middle; } .table-striped > tbody > tr:nth-of-type(odd) { background: #f8f5ec; } .table-hover > tbody > tr:hover { background: rgba(179, 39, 31, .06); } tr.inactive { background: #efece2 !important; color: #a29a86; } tr.inactive a { color: #a29a86; } /* ---- dropdowns ------------------------------------------------------ */ .dropdown-menu { background: var(--paper); border: 1px solid var(--sumi); border-radius: 0; box-shadow: 0 10px 26px -14px rgba(23, 24, 26, .55); padding: 4px 0; } .dropdown-menu > li > a { color: var(--sumi); padding: 7px 18px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--sumi); color: var(--washi); } .caret { border-top-color: currentColor; } /* ---- alerts: a coloured margin, calm fill ------------------------- */ .alert { border-radius: 0; border: 1px solid var(--line); border-left-width: 4px; background: var(--paper); color: var(--sumi); } .alert-success { border-left-color: var(--ok); background: #f1f5ee; } .alert-danger { border-left-color: var(--shu); background: #f9efed; } .alert-info { border-left-color: var(--gold); background: #f6f2e6; } .alert-warning { border-left-color: var(--gold); background: #f7f1e2; } /* ---- labels / badges (year chips in pagos.php, etc.) ------------- */ .label { border-radius: 2px; font-family: var(--sans); font-weight: 600; letter-spacing: .04em; padding: .25em .6em; } .label-success, .label.label-success { background: var(--ok); } .label-danger, .label.label-danger { background: var(--shu); } .label-default { background: var(--muted); } /* the year chips in pagos.php */ .h2.label { display: inline-block; font-family: var(--serif); font-size: 16px; min-width: 66px; text-align: center; margin: 8px 12px 8px 0; vertical-align: middle; } /* ---- misc ---------------------------------------------------------- */ .thumbnail { background: var(--paper); border: 1px solid var(--line); border-radius: 0; padding: 3px; } hr { border-top: 1px solid var(--line); } .popover { border-radius: 0; border-color: var(--sumi); font-family: var(--sans); } .popover-title { font-family: var(--serif); background: var(--washi); border-radius: 0; } /* jasny file input, if it shows up */ .btn-file { border-color: var(--sumi); } /* ---- login page --------------------------------------------------- */ .page-login .container { max-width: 400px; margin: 11vh auto 0; } .login-brand { text-align: center; margin-bottom: 22px; } .login-brand .kanji { display: block; font-family: var(--serif); font-size: 40px; font-weight: 800; color: var(--sumi); letter-spacing: .1em; } .login-brand .brand-name { display: block; margin-top: 8px; font-family: var(--serif); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .page-login .well { border-top: 3px solid var(--shu); border-left-width: 1px; box-shadow: 0 24px 55px -32px rgba(23, 24, 26, .65); } .page-login legend { font-size: 16px; } .page-login label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .page-login .btn-block { margin-top: 14px; } .page-login .container > p { text-align: center; margin-top: 14px; } /* ---- personas list toolbar (search + active/all toggle) ----------- */ .personas-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .personas-search { display: flex; align-items: center; gap: 8px; margin: 0; } .personas-search .form-control { width: auto; min-width: 220px; height: 34px; display: inline-block; } .personas-count { font-size: 12px; letter-spacing: .04em; color: var(--muted); } /* ---- alumnos por grado ------------------------------------------- */ .apg-toolbar { margin-bottom: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .apg-summary { font-size: 13px; letter-spacing: .04em; color: var(--muted); } .apg-filter { display: flex; align-items: center; gap: 8px; margin: 0; } .apg-filter label { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .apg-filter select.form-control { width: auto; min-width: 150px; height: 34px; display: inline-block; } .panel-grado { margin-bottom: 22px; } .panel-grado > .panel-heading { background: var(--paper); color: var(--sumi); border-bottom: 3px solid var(--shu); display: flex; align-items: center; gap: 14px; padding: 12px 16px; } .apg-belt { height: 30px; width: auto; background: #fff; border: 1px solid var(--line); padding: 2px; } .apg-grado { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: .02em; } .apg-count { margin-left: auto; min-width: 30px; text-align: center; background: var(--sumi); color: var(--washi); font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 2px 9px; border-radius: 2px; } .apg-table { margin-bottom: 0; } /* roster surnames: plain sans, and kill the ledger-header underline that the generic ".table tr:first-child td b" rule would otherwise put on row 1 */ .apg-table > tbody > tr > td:first-child b { font-family: var(--sans); border-bottom: 0 !important; } .apg-baja { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--shu-dark); border: 1px solid currentColor; padding: 0 5px; margin-left: 8px; vertical-align: middle; } /* ---- role landing menus (index_admin / index_estudiante) ----------- */ .menu-head { text-align: center; margin: 7vh 0 36px; } .menu-kicker { font-family: var(--serif); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); } .menu-title { font-family: var(--serif); font-weight: 700; font-size: 28px; margin: 10px 0 0; color: var(--sumi); } .menu-title::after { content: ""; display: block; width: 44px; height: 3px; background: var(--shu); margin: 15px auto 0; } .menu { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto 20px; } .menu-foot { text-align: center; margin: 0 0 6vh; } .menu-foot .btn { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; } .menu-card { display: grid; grid-template-columns: 66px 1fr 20px; align-items: center; gap: 20px; padding: 13px 16px 13px 13px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--sumi); color: var(--sumi); text-decoration: none; transition: border-left-color .12s ease, box-shadow .12s ease, transform .12s ease; } .menu-card:hover, .menu-card:focus { border-left-color: var(--shu); box-shadow: 0 12px 28px -20px rgba(23, 24, 26, .6); text-decoration: none; transform: translateX(3px); } .menu-glyph { width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--washi); background: var(--sumi); transition: background-color .12s ease; } .menu-card:hover .menu-glyph, .menu-card:focus .menu-glyph { background: var(--shu); } .menu-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .menu-label { font-family: var(--serif); font-weight: 700; font-size: 17px; } .menu-sub { font-size: 12px; letter-spacing: .02em; color: var(--muted); } .menu-card::after { content: "\203A"; font-family: var(--serif); font-size: 22px; line-height: 1; text-align: center; color: var(--line); transition: color .12s ease; } .menu-card:hover::after, .menu-card:focus::after { color: var(--shu); } /* ---- print: drop the theatrics -------------------------------------- */ @media print { body { border-top: 0; background: #fff; } body::before { display: none; } .panel, .well, .table { box-shadow: none; border-color: #999; } .btn, .dropdown-menu, .breadcrumb { display: none; } }