/* ========================================================================== Design Tokens — Ruki theme system for BSU Law Review Matches: https://bsulawreview.org (WordPress Ruki theme) ========================================================================== */ :root { /* ---- Color: Primary Brand (Red system, from Ruki customizer) ---- */ --brand-red: #dd3333; --brand-red-light: #dd6e6e; /* Ruki default theme colors */ --theme-color-1: #6c5b7b; /* purple */ --theme-color-2: #dd3333; /* red — primary accent / buttons */ --theme-color-3: #dd6e6e; /* light red — secondary accent */ --theme-color-4: #c06c84; --theme-color-5: #355c7d; /* ---- Color: Surfaces & Backgrounds ---- */ --canvas-warm: #fff7f3; --card-bg: #ffffff; --custom-header-bg: #ffffff; --footer-bg: #ffffff; --light-bg: #f5f5f5; --very-light-bg: #f9f9f9; /* ---- Color: Text ---- */ --black: #000000; --very-dark-grey: #2e2f33; --dark-grey: #45464b; /* Secondary text. Must clear 4.5:1 on the darkest surface it lands on, which is --band-crumb (the breadcrumb strip and the footer), not white: 5.03:1 there, 6.01:1 on white. #6b6e76 passed on white but only reached 4.27:1 once the footer moved onto the band colour. */ --medium-grey: #616369; --light-grey: #D3D3D3; --white: #ffffff; /* ---- Color: Semantic ---- */ --text-primary: var(--dark-grey); --text-heading: var(--very-dark-grey); --text-soft: var(--medium-grey); --text-white: var(--white); --link-color: var(--theme-color-1); --link-hover-color: var(--theme-color-2); --brand-red: var(--theme-color-2); --brand-red-light: var(--theme-color-3); /* ---- Color: Single Post ---- */ --single-post-bg: var(--white); --single-entry-title-color: var(--very-dark-grey); --single-entry-font-color: var(--dark-grey); --single-excerpt-color: var(--medium-grey); --single-entry-meta-color: var(--medium-grey); --single-entry-meta-link: var(--link-color); /* ---- Color: Entry Meta ---- */ --entry-meta-color: var(--medium-grey); --entry-meta-link-color: var(--link-color); --entry-title-link-color: var(--very-dark-grey); --excerpt-color: var(--medium-grey); --continue-reading-color: var(--link-color); --post-background: var(--white); --post-tags-background: var(--light-bg); --post-tags-font-color: var(--dark-grey); /* ---- Color: Widget / Sidebar ---- */ --widget-background: var(--white); --widget-title-color: var(--very-dark-grey); --widget-font-color: var(--dark-grey); --widget-link-color: var(--very-dark-grey); --widget-child-link-color: var(--medium-grey); --widget-meta-color: var(--medium-grey); --widget-meta-link-color: var(--link-color); --widget-line-color: var(--light-border-color); /* ---- Color: Primary Navigation ---- Ruki's own `--primary-nav-*` values, read off bsulawreview.org. The one change is the hover/current colour: the live theme uses #f67280, which is 2.8:1 on white and unreadable as text, so the accent red stands in. See the note above `.main-nav` in base.css. */ --nav-link-color: #6c6f76; --nav-link-hover-color: var(--brand-red); --nav-submenu-background: var(--white); /* ---- Color: Page Header ---- */ --page-title-color: var(--very-dark-grey); --page-description-color: var(--medium-grey); --page-meta-background: var(--theme-color-2); --page-meta-color: var(--white); /* ---- Typography: Font Families ---- */ --font-sans: 'Mulish', Arial, Helvetica, sans-serif; --font-title: 'Mulish', Arial, Helvetica, sans-serif; /* Scholarly display face for author pages, in the manner of the printed Review. System fonts only — the CSP blocks third-party font hosts. */ --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif; /* ---- Typography: Size Scale (rem-based, base 1rem = 16px) ---- */ --text-size-micro: 0.8125rem; /* 13px */ --text-size-small: 0.875rem; /* 14px */ --text-size-body: 1rem; /* 16px */ --text-size-h6: 1rem; /* 16px */ --text-size-h5: 1.25rem; /* 20px */ --text-size-h4: 1.5rem; /* 24px */ --text-size-h3: 1.75rem; /* 28px */ --text-size-h2: 2rem; /* 32px */ --text-size-h1: 2.5rem; /* 40px */ --text-size-entry: 1.625rem; /* 26px — article entry title */ /* ---- Typography: Weights ---- */ --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ---- Typography: Line Heights ---- */ --line-height-compact: 1.2; --line-height-normal: 1.5; --line-height-loose: 1.75; /* ---- Typography: Letter Spacing ---- */ --letter-spacing-heading: -0.5px; --letter-spacing-normal: 0; /* ---- Spacing Scale ---- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 1rem; /* 16px */ --space-4: 1.5rem; /* 24px */ --space-5: 2rem; /* 32px */ --space-6: 2.5rem; /* 40px */ --space-7: 3rem; /* 48px */ --space-8: 3.75rem; /* 60px */ /* ---- Gutter Tokens ---- */ --outer-gutter: 1.25rem; /* 20px — 15px was tight for body text on a phone */ --outer-gutter-md: 0.9375rem; /* 15px (Ruki uses consistent 15px) */ --outer-gutter-lg: 2rem; /* 32px, used at >= 768px */ /* ---- Border Radius ---- */ --radius-btn: 25px; --radius-card: 7px; --radius-form: 5px; --radius-misc: 14px; --radius-hero: 10px; --radius-circle: 50%; /* ---- Shadows ---- */ --shadow-card: 0 0 15px rgba(0, 0, 0, 0.05); --shadow-nav: 0 0 15px rgba(0, 0, 0, 0.10); --shadow-thumbnail: 0 0 10px rgba(0, 0, 0, 0.05); /* ---- Transitions ---- */ --transition-btn: all 0.2s ease; --transition-color: color 0.2s ease; --transition-bg: background 0.2s ease; --transition-fade: opacity 0.3s ease; --transition-sticky: all 0.3s ease; /* ---- Button Active Scale ---- */ --btn-active-scale: 0.95; /* ---- Container Widths ---- */ --container-max-width: 1280px; --column-narrow: 768px; /* ---- Layout ---- */ --nav-height: 60px; --fab-size: 50px; /* ---- Borders ---- */ --light-border-color: #f1f1f1; --medium-border-color: #e5e5e5; /* ---- Editorial bands: full-bleed, darkest first (crumb -> hero -> body). Site-wide system, generalised from what was author-page-only. ---- */ --band-crumb: #f3e9e4; --band-hero: #fbf4f1; --band-body: #ffffff; --rule: #e4d8d2; --accent-deep: #8f2020; /* editorial red — labels, links, focus ring */ --accent-gold: #c9a07f; /* diamond (✦) separators only */ /* ---- Deprecated aliases: keep the author-page names working ---- */ --author-crumb-bg: var(--band-crumb); --author-hero-bg: var(--band-hero); --author-body-bg: var(--band-body); --author-rule: var(--rule); --author-deep-red: var(--accent-deep); --author-diamond: var(--accent-gold); }