/* Campeonatos Clássicos (CC) theme for stracker. Overrides Bootstrap 3 defaults to match https://www.campeonatosclassicos.com.br/ Loaded last in , after bootstrap.min.css / bootstrap-theme.min.css. */ @import url('https://fonts.googleapis.com/css2?family=Jockey+One&family=Russo+One&family=Jost:wght@400;500;600;700&display=swap'); :root { --cc-accent: #FF5020; --cc-accent-dark: #E0461A; --cc-accent-soft: #FFA890; --cc-accent-tint: #FFF1EC; --cc-gold: #E99F15; --cc-gold-dark: #B58E45; --cc-ink: #212121; --cc-ink-soft: #4A4A4A; --cc-ink-muted: #7A7A7A; --cc-bg: #FFFFFF; --cc-surface-alt: #FAFAFA; --cc-line: #E6E6E6; --cc-line-soft: #F1F1F1; --font-display: 'Jockey One', 'Russo One', system-ui, sans-serif; --font-heading: 'Russo One', 'Jockey One', system-ui, sans-serif; --font-body: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif; } /* ====== Base ====== */ html, body { background: var(--cc-bg); color: var(--cc-ink); font-family: var(--font-body); } a { color: #1769AA; } a:hover, a:focus { color: var(--cc-accent); } h1, h2, h3, h4, h5, h6, .page-header { font-family: var(--font-heading); color: var(--cc-ink); letter-spacing: 0.01em; } h1, .page-header h1 { text-transform: uppercase; } .page-header { border-bottom: 3px solid var(--cc-accent); padding-bottom: 12px; } .container { position: relative; } /* ====== Navbar ====== */ .navbar-default, .navbar-inverse { background: var(--cc-ink); border: none; border-bottom: 3px solid var(--cc-accent); font-family: var(--font-heading); min-height: 64px; } .navbar-default .navbar-brand, .navbar-inverse .navbar-brand { padding: 8px 15px; height: auto; } .navbar-default .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a, .navbar-default .navbar-text, .navbar-inverse .navbar-text { color: #FFFFFF; text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: var(--cc-accent-soft); background: rgba(255, 255, 255, 0.06); } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #FFFFFF; background: var(--cc-accent); } .navbar-default .navbar-toggle, .navbar-inverse .navbar-toggle { border-color: rgba(255, 255, 255, 0.3); } .navbar-default .navbar-toggle .icon-bar, .navbar-inverse .navbar-toggle .icon-bar { background-color: #FFFFFF; } .navbar-default .navbar-toggle:hover, .navbar-inverse .navbar-toggle:hover { background: rgba(255, 255, 255, 0.08); } .navbar-default .navbar-collapse, .navbar-inverse .navbar-collapse { border-color: rgba(255, 255, 255, 0.15); } .dropdown-menu { background: #FFFFFF; border: 1px solid var(--cc-line); font-family: var(--font-body); } .dropdown-menu > li > a { color: var(--cc-ink); } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--cc-accent-tint); color: var(--cc-accent); } /* Bottom navbar (footer bar with pagination / version) */ .navbar-fixed-bottom { background: var(--cc-ink); border-top: 3px solid var(--cc-accent); } .navbar-fixed-bottom .navbar-text { color: #C9C9C9; font-size: 12px; } .navbar-fixed-bottom .navbar-text b { color: var(--cc-accent-soft); } /* ====== Buttons ====== */ .btn { font-family: var(--font-heading); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; border-radius: 3px; } .btn-primary { background: var(--cc-accent); border-color: var(--cc-accent); color: #FFFFFF; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--cc-accent-dark); border-color: var(--cc-accent-dark); color: #FFFFFF; } .btn-danger { background: #D63A1F; border-color: #D63A1F; } .btn-danger:hover, .btn-danger:focus { background: #B22E17; border-color: #B22E17; } .btn-warning { background: var(--cc-gold); border-color: var(--cc-gold); color: #FFFFFF; } .btn-warning:hover, .btn-warning:focus { background: var(--cc-gold-dark); border-color: var(--cc-gold-dark); color: #FFFFFF; } .btn-success { background: #1A8F23; border-color: #1A8F23; } .btn-success:hover, .btn-success:focus { background: #16751C; border-color: #16751C; } .btn-default { color: var(--cc-ink); border-color: var(--cc-line); } .btn-default:hover, .btn-default:focus { color: var(--cc-accent); border-color: var(--cc-accent-soft); background: var(--cc-accent-tint); } /* ====== Tables ====== */ .table > thead > tr > th { font-family: var(--font-heading); text-transform: uppercase; font-size: 12px; letter-spacing: 0.03em; color: var(--cc-ink); background: var(--cc-surface-alt); border-bottom: 2px solid var(--cc-accent); vertical-align: middle; } .table > tbody > tr > td { border-color: var(--cc-line); vertical-align: middle; } .table-striped > tbody > tr:nth-of-type(2n+1) { background-color: var(--cc-surface-alt); } .table-hover > tbody > tr:hover { background-color: var(--cc-accent-tint); } .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: var(--cc-line); } .clickableRow:hover td { background-color: var(--cc-accent-tint); } .bestLap { color: var(--cc-accent); font-weight: 600; } .bestSector { color: #1A8F23; font-weight: 600; } /* ====== Panels ====== */ .panel { border-color: var(--cc-line); border-radius: 3px; box-shadow: none; } .panel-heading { font-family: var(--font-heading); text-transform: uppercase; font-size: 13px; letter-spacing: 0.03em; } .panel-default > .panel-heading { background: var(--cc-surface-alt); color: var(--cc-ink); border-color: var(--cc-line); } .panel-info > .panel-heading { background: var(--cc-ink); color: #FFFFFF; border-color: var(--cc-ink); } .panel-info { border-color: var(--cc-ink); } /* ====== Forms ====== */ .form-control:focus { border-color: var(--cc-accent-soft); box-shadow: 0 0 0 3px rgba(255, 80, 32, 0.15); } .control-label { color: var(--cc-ink-soft); } /* ====== Pagination ====== */ .pagination > li > a, .pagination > li > span { color: var(--cc-ink); border-color: var(--cc-line); } .pagination > li > a:hover, .pagination > li > span:hover { color: var(--cc-accent); background: var(--cc-accent-tint); border-color: var(--cc-accent-soft); } .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span { background: var(--cc-accent); border-color: var(--cc-accent); color: #FFFFFF; } /* ====== Labels / badges ====== */ .label-primary { background-color: var(--cc-accent); } .label-warning { background-color: var(--cc-gold); } .label-success { background-color: #1A8F23; } .label-danger { background-color: #D63A1F; } .label-info { background-color: #1769AA; } /* ====== Multiselect ====== */ .multiselect-container > li > a:hover, .multiselect-container > li > a:focus { background: var(--cc-accent-tint); } /* ====== Misc ====== */ .well { background: var(--cc-surface-alt); border-color: var(--cc-line); box-shadow: none; } .navbar-brand img, .ACimg { max-height: 48px; width: auto; }