/* * Restyle of the archived crypto course site (WordPress Twenty Fourteen mirror) * to match katestange.net's design language, on a gentle purple base * (the live Fall 2026 site at /crypto/ is blue, so the two are easy to tell apart). * Loaded last in on every page; overrides the theme CSS and the inline * "fourteen-colors" block (hence the occasional !important). */ /* ===== Fonts (same EB Garamond as the main site, self-hosted) ===== */ @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/cryptoF24/fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/cryptoF24/fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/cryptoF24/fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); } /* ===== Design tokens: main-site palette shifted to a gentle purple base ===== */ :root { --bg: #f5f0fa; /* paper, lavender-tinted */ --bg-alt: #e6daf2; /* slightly deeper, for panels/rail */ --text: #2b2533; /* purple-tinged near-black */ --text-muted: #675b76; --accent: #6d3fa3; /* purple (the 2026 site uses blue here) */ --accent-hover: #4c2a76; --rule: #dccfe9; /* hairline borders */ --serif: "EB Garamond", Georgia, "Times New Roman", serif; --sans: system-ui, "Segoe UI", Helvetica, Arial, sans-serif; } /* ===== Base ===== */ body, button, input, select, textarea { font-family: var(--sans); color: var(--text); } body { background-color: var(--bg) !important; line-height: 1.6; } .site { background-color: var(--bg) !important; } /* The dark left rail behind the sidebar on wide screens */ .site:before, .ie8 .site:before { background-color: var(--bg-alt) !important; border-right: 1px solid var(--rule); } a { color: var(--accent); text-decoration: none; } a:hover, a:focus, a:active { color: var(--accent-hover); } /* Headings: serif, normal case, like the main site */ h1, h2, h3, h4, h5, h6, .entry-title, .widget-title, .site-description, .archive-header .archive-title, .page-header .page-title, .comments-title { font-family: var(--serif); font-weight: 500; text-transform: none; letter-spacing: normal; } /* ===== Header: light bar with hairline, like the main site's header ===== */ .site-header, .ie8 .site-header { background-color: var(--bg-alt) !important; border-bottom: 2px solid var(--accent); } .site-title { font-family: var(--serif); font-weight: 500; font-size: 20px; } h1.site-title a, .site-title a, .site-title a:hover { color: var(--accent) !important; } .site-title a:hover { color: var(--accent-hover) !important; } /* Primary navigation: quiet muted links, accent on hover, no green blocks */ .primary-navigation, .site-navigation a { text-transform: none; } @media screen and (min-width: 783px) { .primary-navigation { font-size: 13px; } } .primary-navigation a, .site-navigation a { color: var(--text-muted) !important; } .primary-navigation li:hover > a, .primary-navigation li.focus > a { background-color: transparent !important; color: var(--accent-hover) !important; } .site-navigation li .current_page_item > a, .site-navigation li .current_page_ancestor > a, .site-navigation li .current-menu-item > a, .site-navigation li .current-menu-ancestor > a { color: var(--accent) !important; } /* Dropdown submenus: light panel with hairline border */ .primary-navigation ul ul { background-color: var(--bg) !important; border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 4px 14px rgba(39, 43, 49, 0.08); } .primary-navigation ul ul a:hover, .primary-navigation ul ul li.focus > a { background-color: var(--bg-alt) !important; color: var(--accent-hover) !important; } /* Mobile menu + search toggles: no colored blocks, muted icons */ .menu-toggle, .search-toggle { background-color: transparent !important; } .menu-toggle:before, .search-toggle:before { color: var(--text-muted) !important; } .menu-toggle:active, .menu-toggle:focus, .menu-toggle:hover, .search-toggle:hover, .search-toggle.active { background-color: var(--bg-alt) !important; } .primary-navigation.toggled-on .nav-menu { border-bottom-color: var(--rule); } .primary-navigation li { border-top-color: var(--rule) !important; } /* Search drawer */ .search-box-wrapper { background-color: var(--bg-alt) !important; border-bottom: 1px solid var(--rule); } .search-box .search-field { background-color: #fff !important; border: 1px solid var(--rule) !important; color: var(--text) !important; } /* ===== Content ===== */ .entry-title { font-size: 30px; } .entry-title a { color: var(--text); } .entry-title a:hover { color: var(--accent); } .entry-meta, .entry-meta a, .cat-links a, .comments-link a, .edit-link a, .entry-date a, .byline a { color: var(--text-muted) !important; } .entry-meta a:hover { color: var(--accent-hover) !important; } .hentry, .page-content, .entry-content, .entry-summary { color: var(--text); } /* Normal case for the theme's many uppercase accents */ .entry-meta, .cat-links, .tag-links a, .entry-content th, .comment-content th, .comment-reply-title, .comments-title, .archive-header .archive-title, .page-header .page-title { text-transform: none; } blockquote { color: var(--text-muted); border-left: 2px solid var(--rule); padding-left: 0.9rem; font-style: italic; } hr { background-color: var(--rule); } code, kbd, tt, var, samp, pre { background-color: var(--bg-alt); } th, td { border-color: var(--rule); } /* Post navigation, paging, archive headers */ .paging-navigation, .post-navigation, .image-navigation { border-top-color: var(--rule) !important; color: var(--text-muted) !important; } .paging-navigation a, .post-navigation a, .image-navigation a { color: var(--accent) !important; } .paging-navigation a:hover, .post-navigation a:hover { color: var(--accent-hover) !important; } .archive-header, .page-header { border-bottom: 1px solid var(--rule); } /* Buttons (theme + block editor) */ button, .button, input[type="button"], input[type="reset"], input[type="submit"], .search-submit, .wp-block-button__link, .wp-block-file__button, :root :where(.wp-element-button, .wp-block-button__link) { background-color: var(--accent) !important; color: #fff !important; border-radius: 4px; } button:hover, .button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background-color: var(--accent-hover) !important; } /* Form fields */ input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], textarea { background-color: #fff; border: 1px solid var(--rule); color: var(--text); } /* ===== Sidebar (#secondary): light panel, dark text ===== */ #secondary { background-color: var(--bg-alt) !important; border-top: 1px solid var(--rule) !important; border-bottom: 1px solid var(--rule) !important; color: var(--text-muted) !important; } @media screen and (min-width: 1008px) { #secondary { background-color: transparent !important; border: 0 !important; } } .site-description { color: var(--text-muted) !important; font-style: italic; font-size: 14px; } .primary-sidebar .widget, #secondary .widget { color: var(--text-muted) !important; } .widget-title, .widget-title a, .widget .widget-title, .primary-sidebar .widget .widget-title, .content-sidebar .widget .widget-title, #secondary .widget-title { color: var(--text) !important; font-size: 16px; text-transform: none; font-family: var(--serif); font-weight: 500; } .widget-title a:hover { color: var(--accent) !important; } .primary-sidebar .widget a, #secondary .widget a { color: var(--accent) !important; } .primary-sidebar .widget a:hover, #secondary .widget a:hover { color: var(--accent-hover) !important; } /* Sidebar list dividers, like the main site's journal list */ .primary-sidebar .widget li { border-top: 1px solid var(--rule); padding: 0.3em 0; } .primary-sidebar .widget li:first-child { border-top: 0; } /* Widgets that the theme styles as white-on-dark blocks */ .primary-sidebar .widget_twentyfourteen_ephemera .widget-title:before { background-color: var(--accent) !important; } .primary-sidebar .widget input, .primary-sidebar .widget select { background-color: #fff; border-color: var(--rule); color: var(--text); } /* Content sidebar (right rail on some layouts) */ .content-sidebar { border-color: var(--rule) !important; color: var(--text-muted); } .content-sidebar .widget .widget-title, .content-sidebar .widget .widget-title a { color: var(--text) !important; border-top-color: var(--rule) !important; } /* ===== Footer: light with hairline, like the main site ===== */ .site-footer, .ie8 .site-footer { background-color: var(--bg) !important; border-top: 1px solid var(--rule); } .site-footer, .site-info, .site-info a { color: var(--text-muted) !important; } .site-info a:hover { color: var(--accent-hover) !important; } /* ===== Misc theme chrome that carried the old colors ===== */ .featured-content, .featured-content .entry-header { background-color: var(--bg-alt) !important; } .sticky.hentry { background-color: transparent; } ::selection { background: var(--accent); color: #fff; } ::-moz-selection { background: var(--accent); color: #fff; }