/* ============================================================ editorial.css Re-skins Bulma + the shared in-app navbar so logged-in pages match the look set by index2.html — cream / wine / gold, Fraunces + Instrument Sans, hairline rules, editorial cards. How to opt in: load Fraunces + Instrument Sans in , then load Bulma, then this file. No JS changes required. ============================================================ */ :root { --cream: #fbf9f3; --cream-2: #f4efe1; --paper: #ffffff; --ink: #1a0e1d; --ink-soft: #6b5f70; --ink-faint: #a59aa9; --wine: #5d1e3a; --wine-deep: #3d0d24; --gold: #b48a44; --gold-soft: #d8b97a; --rule: #d8d0bf; --rule-soft: #ebe4d2; --shadow-sm: 0 1px 3px rgba(26, 14, 29, 0.06), 0 8px 24px -12px rgba(26, 14, 29, 0.18); --shadow: 0 2px 6px rgba(26, 14, 29, 0.08), 0 18px 32px -16px rgba(26, 14, 29, 0.28); } /* ---- Page chrome ---- */ html, body { font-family: 'Instrument Sans', system-ui, sans-serif !important; font-size: 16px; background: var(--cream) !important; color: var(--ink) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Subtle film grain overlay — sits above everything, not interactive. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: 0.04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } ::selection { background: var(--wine); color: var(--cream); } a { color: var(--ink); } a:hover { color: var(--wine); } .container { max-width: 1240px !important; } /* ---- Bulma navbar (injected by initNavbar) re-skinned ---- */ nav.navbar { background: var(--cream) !important; background-color: var(--cream) !important; border-bottom: 1px solid var(--rule) !important; padding: 0 8px; } nav.navbar .navbar-brand img { max-height: 40px !important; max-width: 130px !important; filter: contrast(1.05); } nav.navbar a.navbar-item, nav.navbar .navbar-item, nav.navbar .navbar-link { color: var(--ink-soft) !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 0.74rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-weight: 600 !important; transition: color 0.2s, background 0.2s; } nav.navbar a.navbar-item:hover, nav.navbar a.navbar-item.is-active { background: transparent !important; color: var(--ink) !important; } nav.navbar a.navbar-item.is-active { box-shadow: inset 0 -2px 0 var(--wine); } nav.navbar a.navbar-item.is-active b { color: var(--ink) !important; } nav.navbar .navbar-burger { color: var(--ink) !important; } /* The "Help" / "Logoff" / "Sign In" buttons in the navbar use .button.purpleButton — restyled below. */ /* ---- Headings ---- */ .title { font-family: 'Fraunces', Georgia, serif !important; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-weight: 350 !important; color: var(--ink) !important; letter-spacing: -0.022em !important; line-height: 1.05 !important; } .title.is-1 { font-size: clamp(2.4rem, 5.4vw, 3.8rem) !important; } .title.is-2 { font-size: clamp(2rem, 4.4vw, 3rem) !important; } .title.is-3 { font-size: clamp(1.7rem, 3.4vw, 2.2rem) !important; } .title.is-4 { font-size: clamp(1.35rem, 2.4vw, 1.7rem) !important; } .title.is-5 { font-size: 1.2rem !important; font-weight: 400 !important; } .title.is-6 { font-size: 1rem !important; font-weight: 500 !important; } .subtitle { font-family: 'Fraunces', Georgia, serif !important; font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1; font-style: italic !important; font-weight: 400 !important; color: var(--ink) !important; letter-spacing: -0.01em; } .subtitle.is-2 { font-size: clamp(1.6rem, 3vw, 2rem) !important; } .subtitle.is-3 { font-size: clamp(1.4rem, 2.6vw, 1.7rem) !important; } .subtitle.is-4 { font-size: 1.25rem !important; } .subtitle.is-5 { font-size: 1.05rem !important; } .subtitle.is-6 { font-size: 0.95rem !important; } /* The big page-level "[Name] Dashboard" h1 from formatDashboard(): Make it sit on a hairline rule like a chapter heading. */ #dashboardDiv > .container > h1.title, #page > .container > h1.title, #contestdiv > .container > h1.title { border-top: 1px solid var(--ink); padding-top: 1.4rem; margin-top: 1.4rem; margin-bottom: 1.6rem; } /* ---- Boxes / cards ---- */ .box { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; border-radius: 0 !important; box-shadow: var(--shadow-sm) !important; padding: 1.6rem 1.8rem !important; } .box.has-background-info-light, .box.has-background-link-light, .box.has-background-success-light, .box.has-background-warning-light { background: var(--cream-2) !important; border: 1px solid var(--rule) !important; } /* "Get Started in 3 Easy Steps" cards on dashboard get a soft tint */ .box.has-background-info-light h3.title, .box.has-background-link-light h3.title, .box.has-background-success-light h3.title { color: var(--ink) !important; } /* ---- Buttons ---- */ button.purpleButton, .button.purpleButton { background: var(--ink) !important; color: var(--cream) !important; border: 0 !important; border-radius: 999px !important; font-family: 'Instrument Sans', sans-serif !important; font-weight: 500 !important; letter-spacing: 0.02em !important; padding-left: 1.3em !important; padding-right: 1.3em !important; transition: background 0.25s, transform 0.2s; } button.purpleButton:hover, .button.purpleButton:hover { background: var(--wine) !important; color: var(--cream) !important; transform: translateY(-1px); } button.purpleButton:active, .button.purpleButton:active { transform: translateY(0); } .button.is-primary { background: var(--wine) !important; color: var(--cream) !important; border: 0 !important; border-radius: 999px !important; } .button.is-primary:hover { background: var(--wine-deep) !important; color: var(--cream) !important; } .button.is-success { background: var(--ink) !important; color: var(--cream) !important; border: 0 !important; border-radius: 999px !important; } .button.is-success:hover { background: var(--wine) !important; color: var(--cream) !important; } .button.is-light, .button.is-info, .button.is-link { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; border-radius: 999px !important; } .button.is-light:hover { background: var(--cream-2) !important; } .button.is-large { font-size: 1.05rem !important; padding: 0.9em 1.6em !important; height: auto !important; } /* ---- Tables ---- */ .table { background: transparent !important; color: var(--ink) !important; font-family: 'Instrument Sans', sans-serif !important; } .table th { background: transparent !important; color: var(--ink-soft) !important; border: 0 !important; border-bottom: 1px solid var(--ink) !important; font-size: 0.7rem !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; font-weight: 700 !important; padding: 14px 12px !important; } .table td { border: 0 !important; border-bottom: 1px solid var(--rule-soft) !important; padding: 14px 12px !important; font-size: 0.95rem !important; vertical-align: middle !important; } .table.is-striped tbody tr:nth-child(even) { background: var(--cream-2) !important; } .table.is-striped tbody tr:hover { background: rgba(216, 185, 122, 0.18) !important; } .table a { color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 1px; } .table a:hover { color: var(--wine); border-color: var(--wine); } /* ---- Notifications / messages ---- */ .notification { background: var(--cream-2) !important; border: 1px solid var(--rule) !important; border-radius: 0 !important; color: var(--ink) !important; } .notification.is-warning { background: #fff8e1 !important; border-color: #f4d27a !important; color: #5b4500 !important; } .notification.is-danger { background: #fbe9ed !important; border-color: var(--wine) !important; color: var(--wine-deep) !important; } .notification.is-info, .notification.is-link { background: var(--cream-2) !important; border-color: var(--rule) !important; color: var(--ink) !important; } .message { background: var(--cream-2) !important; border-radius: 0 !important; } .message.is-warning { background: #fff8e1 !important; } .message.is-danger { background: #fbe9ed !important; } .message-header { background: var(--ink) !important; color: var(--cream) !important; border-radius: 0 !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 0.75rem !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; } .message.is-danger .message-header { background: var(--wine) !important; } .message-body { background: var(--cream-2) !important; border: 1px solid var(--rule) !important; border-radius: 0 !important; color: var(--ink) !important; } /* ---- Tags ---- */ .tag { border-radius: 0 !important; background: var(--cream-2) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 0.7rem !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 600 !important; padding: 3px 10px !important; height: auto !important; } .tag.is-success { background: #e9f0e6 !important; color: #1f4f21 !important; border-color: #b9d3b9 !important; } .tag.is-warning { background: #fff5db !important; color: #5b4500 !important; border-color: #f4d27a !important; } .tag.is-info, .tag.is-link { background: var(--cream-2) !important; color: var(--ink) !important; border-color: var(--rule) !important; } .tag.is-danger { background: #fbe9ed !important; color: var(--wine-deep) !important; border-color: var(--wine) !important; } /* ---- Modals ---- */ .modal-card { border-radius: 0 !important; border: 1px solid var(--rule); box-shadow: var(--shadow); overflow: hidden; background: var(--paper); } .modal-card-head, .modal-card-foot { background: var(--cream-2) !important; border: 0 !important; padding: 18px 22px !important; } .modal-card-head { border-bottom: 1px solid var(--rule) !important; } .modal-card-foot { border-top: 1px solid var(--rule) !important; gap: 12px; } .modal-card-title { font-family: 'Fraunces', Georgia, serif !important; font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1; font-style: italic !important; font-weight: 400 !important; color: var(--ink) !important; font-size: 1.35rem !important; } .modal-card-body { background: var(--paper) !important; padding: 22px !important; color: var(--ink) !important; } .modal-background { background: rgba(26, 14, 29, 0.5) !important; } /* ---- Form controls ---- */ .input, .select select, .textarea { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; border-radius: 0 !important; box-shadow: none !important; font-family: 'Instrument Sans', sans-serif !important; } .input::placeholder, .textarea::placeholder { color: var(--ink-faint) !important; } .input:focus, .textarea:focus, .select select:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 3px rgba(93, 30, 58, 0.10) !important; outline: none; } .label { color: var(--ink) !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 0.75rem !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; font-weight: 700 !important; margin-bottom: 0.4em !important; } /* Trix editor — soften so it fits */ trix-toolbar { background: var(--cream-2); border: 1px solid var(--rule); border-bottom: 0; } trix-editor { background: var(--paper); border: 1px solid var(--rule) !important; border-radius: 0 !important; color: var(--ink); } /* ---- Misc ---- */ hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; } /* Material icons inside .has-tooltip — dim to ink */ .material-icons, .material-symbols-outlined { color: inherit; vertical-align: middle; } /* Cell box used in dashboard "Manage" menu */ .cell.box { background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 0 !important; padding: 1.2rem 1.4rem !important; } .cell.box .subtitle b { font-weight: 400; color: var(--wine); } /* Bombyhead-toast (used after copy-to-clipboard) */ .bulma-toast .toast { background: var(--ink) !important; color: var(--cream) !important; border-radius: 0 !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 0.85rem !important; letter-spacing: 0.06em; } /* Tooltip styles (bulma-tooltip) — tone down */ [data-tooltip]:not(.is-loading)::before { background: var(--ink) !important; color: var(--cream) !important; border-radius: 0 !important; font-size: 0.72rem !important; letter-spacing: 0.1em; } /* ============================================================ Guide-page overrides The free pageant guides + features.html ship with their own inline