mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-06-05 22:50:17 +00:00
Kenneth Reitz
846 lines
18 KiB
CSS
846 lines
18 KiB
CSS
/* Kenneth Reitz - Custom Typography & Design System */
|
|
/* Built from scratch with love and attention to detail */
|
|
|
|
/* ============================================
|
|
DYNAMIC COLOR SYSTEM
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Base color schemes - CSS will randomly pick one */
|
|
--hue: 220; /* This gets overridden by JavaScript */
|
|
|
|
/* Dynamic palette based on hue */
|
|
--color-primary: hsl(var(--hue), 65%, 25%);
|
|
--color-primary-light: hsl(var(--hue), 55%, 35%);
|
|
--color-primary-dark: hsl(var(--hue), 75%, 15%);
|
|
|
|
--color-accent: hsl(calc(var(--hue) + 180), 70%, 45%);
|
|
--color-accent-light: hsl(calc(var(--hue) + 180), 65%, 55%);
|
|
--color-accent-dark: hsl(calc(var(--hue) + 180), 75%, 35%);
|
|
|
|
--color-secondary: hsl(calc(var(--hue) + 120), 55%, 40%);
|
|
--color-secondary-light: hsl(calc(var(--hue) + 120), 50%, 50%);
|
|
--color-secondary-dark: hsl(calc(var(--hue) + 120), 65%, 30%);
|
|
|
|
/* Text colors */
|
|
--color-text: hsl(var(--hue), 25%, 20%);
|
|
--color-text-light: hsl(var(--hue), 15%, 35%);
|
|
--color-text-lighter: hsl(var(--hue), 10%, 50%);
|
|
--color-text-subtle: hsl(var(--hue), 5%, 65%);
|
|
|
|
/* Backgrounds with subtle hue tint */
|
|
--color-bg: hsl(var(--hue), 5%, 99%);
|
|
--color-bg-alt: hsl(var(--hue), 15%, 97%);
|
|
--color-bg-accent: hsl(var(--hue), 20%, 95%);
|
|
|
|
/* Borders */
|
|
--color-border: hsl(var(--hue), 15%, 90%);
|
|
--color-border-light: hsl(var(--hue), 10%, 94%);
|
|
--color-border-accent: hsl(var(--hue), 25%, 88%);
|
|
}
|
|
|
|
/* Color scheme variations */
|
|
.scheme-ocean { --hue: 200; }
|
|
.scheme-forest { --hue: 120; }
|
|
.scheme-sunset { --hue: 25; }
|
|
.scheme-lavender { --hue: 280; }
|
|
.scheme-rose { --hue: 340; }
|
|
.scheme-sage { --hue: 90; }
|
|
.scheme-amber { --hue: 45; }
|
|
.scheme-steel { --hue: 210; }
|
|
.scheme-wine { --hue: 320; }
|
|
.scheme-moss { --hue: 80; }
|
|
|
|
/* ============================================
|
|
FONTS & BASE TYPOGRAPHY
|
|
============================================ */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Fira+Code:wght@300..700&display=swap');
|
|
|
|
/* CSS Reset & Base */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-size: 20px;
|
|
scroll-behavior: smooth;
|
|
text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Crimson Pro', 'Times New Roman', 'Noto Serif', 'Droid Serif', Georgia, serif;
|
|
font-weight: 400;
|
|
line-height: 1.75;
|
|
color: var(--color-text);
|
|
background: var(--color-bg);
|
|
|
|
/* Advanced typography features */
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1, "pnum" 1;
|
|
font-variant-ligatures: common-ligatures contextual;
|
|
font-variant-numeric: oldstyle-nums proportional-nums;
|
|
|
|
/* Hyphenation for better text flow */
|
|
-webkit-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
hyphenate-limit-chars: 6 3 2;
|
|
hyphenate-limit-lines: 2;
|
|
|
|
/* Center container with left-aligned content */
|
|
max-width: 75rem;
|
|
margin: 0 auto;
|
|
padding: 0 2.5rem;
|
|
}
|
|
|
|
/* ============================================
|
|
TYPOGRAPHY HIERARCHY
|
|
============================================ */
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
font-weight: 600;
|
|
line-height: 1.15;
|
|
color: var(--color-primary-dark);
|
|
margin: 2rem 0 1rem;
|
|
letter-spacing: -0.025em;
|
|
text-wrap: balance;
|
|
|
|
/* Advanced OpenType features */
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "ss02" 1;
|
|
font-variant-ligatures: common-ligatures discretionary-ligatures;
|
|
|
|
/* Optical sizing for variable fonts */
|
|
font-optical-sizing: auto;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Crimson Pro', 'Times New Roman', 'Noto Serif', Georgia, serif;
|
|
font-size: clamp(2.5rem, 5.5vw, 4.5rem);
|
|
font-weight: 500;
|
|
margin-top: 0;
|
|
margin-bottom: 1.25rem;
|
|
margin-left: 3rem;
|
|
color: #0a0a0a;
|
|
font-style: italic;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
text-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
|
|
/* Elegant spacing and kerning */
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "swsh" 1, "clig" 1;
|
|
font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
|
|
}
|
|
|
|
h2 {
|
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
font-weight: 650;
|
|
margin-top: 3.5rem;
|
|
margin-bottom: 1.5rem;
|
|
margin-left: 1.5rem;
|
|
position: relative;
|
|
color: #111;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
h2::after {
|
|
content: '';
|
|
display: block;
|
|
width: 3rem;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
|
|
margin: 1.25rem 0 0 0;
|
|
border-radius: 1px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
h3 {
|
|
font-size: clamp(1.375rem, 3vw, 1.875rem);
|
|
font-weight: 550;
|
|
margin-top: 2.5rem;
|
|
margin-left: 1rem;
|
|
color: #222;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
h4 {
|
|
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
|
|
font-weight: 550;
|
|
margin-top: 2rem;
|
|
margin-left: 0.5rem;
|
|
color: #333;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-top: 1.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #555;
|
|
font-feature-settings: "kern" 1, "smcp" 1;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-top: 1.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: #666;
|
|
font-feature-settings: "kern" 1, "smcp" 1;
|
|
}
|
|
|
|
/* ============================================
|
|
PARAGRAPHS & TEXT
|
|
============================================ */
|
|
|
|
p {
|
|
margin: 1.5rem 0;
|
|
max-width: 45rem;
|
|
font-size: 1.125rem;
|
|
line-height: 1.8;
|
|
color: #2a2a2a;
|
|
text-align: justify;
|
|
text-justify: inter-character;
|
|
|
|
/* Advanced paragraph styling */
|
|
hanging-punctuation: first last;
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1, "pnum" 1;
|
|
}
|
|
|
|
p:first-of-type {
|
|
text-indent: 0;
|
|
}
|
|
|
|
p + p {
|
|
text-indent: 1.5em;
|
|
margin-top: 0;
|
|
}
|
|
|
|
p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Lead paragraphs */
|
|
.lead {
|
|
font-size: 1.5rem;
|
|
font-weight: 350;
|
|
line-height: 1.65;
|
|
color: #1a1a1a;
|
|
margin: 2rem 0;
|
|
max-width: 50rem;
|
|
text-indent: 0 !important;
|
|
|
|
/* Distinctive styling for lead text */
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "swsh" 1;
|
|
letter-spacing: 0.005em;
|
|
}
|
|
|
|
/* Large text */
|
|
.large {
|
|
font-size: 1.25rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* Small text */
|
|
.small {
|
|
font-size: 0.95rem;
|
|
color: #666;
|
|
}
|
|
|
|
/* Text emphasis */
|
|
strong, b {
|
|
font-weight: 650;
|
|
color: #0f0f0f;
|
|
font-feature-settings: "kern" 1, "liga" 1;
|
|
}
|
|
|
|
em, i {
|
|
font-style: italic;
|
|
color: #1a1a1a;
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "swsh" 1;
|
|
}
|
|
|
|
/* Smart quotes and punctuation */
|
|
q::before { content: """; }
|
|
q::after { content: """; }
|
|
q q::before { content: "'"; }
|
|
q q::after { content: "'"; }
|
|
|
|
/* Subtle text */
|
|
.muted {
|
|
color: #777;
|
|
}
|
|
|
|
.subtitle {
|
|
font-style: italic;
|
|
color: #666;
|
|
font-size: 1.1rem;
|
|
margin: 0.5rem 0 1.25rem;
|
|
max-width: 40rem;
|
|
}
|
|
|
|
/* ============================================
|
|
LINKS
|
|
============================================ */
|
|
|
|
a {
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid rgba(102, 126, 234, 0.3);
|
|
transition: all 0.2s ease;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
a:hover {
|
|
color: #5a67d8;
|
|
border-bottom-color: #5a67d8;
|
|
background: rgba(102, 126, 234, 0.05);
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
a:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* ============================================
|
|
LISTS
|
|
============================================ */
|
|
|
|
ul, ol {
|
|
margin: 1.25rem 0;
|
|
max-width: 40rem;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
li {
|
|
margin: 0.5rem 0;
|
|
line-height: 1.7;
|
|
color: #444;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
ul li {
|
|
position: relative;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
ul li::before {
|
|
content: '•';
|
|
color: #667eea;
|
|
font-size: 1.2em;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
/* Nested lists */
|
|
ul ul {
|
|
margin: 0.5rem 0;
|
|
max-width: none;
|
|
}
|
|
|
|
ul ul li::before {
|
|
content: '◦';
|
|
color: #999;
|
|
}
|
|
|
|
ul ul ul li::before {
|
|
content: '▫';
|
|
color: #ccc;
|
|
}
|
|
|
|
/* Ordered lists */
|
|
ol {
|
|
padding-left: 2rem;
|
|
list-style: decimal;
|
|
}
|
|
|
|
ol li {
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
/* ============================================
|
|
NAVIGATION
|
|
============================================ */
|
|
|
|
nav {
|
|
margin: 1.5rem auto 2.5rem;
|
|
padding: 1rem 2rem;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
|
border-radius: 2rem;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|
border: 1px solid #e8e8e8;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
nav a {
|
|
margin: 0 0.75rem;
|
|
padding: 0.6rem 1.25rem;
|
|
color: #555;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
border: none;
|
|
border-radius: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
display: inline-block;
|
|
background: none;
|
|
}
|
|
|
|
nav a:hover {
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
|
padding-left: 1.25rem;
|
|
padding-right: 1.25rem;
|
|
}
|
|
|
|
nav a.current {
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
/* ============================================
|
|
QUOTES & BLOCKQUOTES
|
|
============================================ */
|
|
|
|
blockquote {
|
|
margin: 2.5rem 0 2.5rem 2rem;
|
|
padding: 1.75rem 2rem;
|
|
max-width: 48rem;
|
|
background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
|
|
border-left: 3px solid #667eea;
|
|
border-radius: 0 6px 6px 0;
|
|
font-size: 1.3rem;
|
|
font-style: italic;
|
|
font-weight: 350;
|
|
color: #1a1a1a;
|
|
line-height: 1.75;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
|
|
|
/* Elegant quote styling */
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "swsh" 1, "clig" 1;
|
|
text-indent: 0 !important;
|
|
position: relative;
|
|
}
|
|
|
|
blockquote p {
|
|
margin: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
blockquote cite {
|
|
display: block;
|
|
margin-top: 1rem;
|
|
font-size: 0.95rem;
|
|
font-style: normal;
|
|
color: #666;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
blockquote cite::before {
|
|
content: '— ';
|
|
}
|
|
|
|
/* ============================================
|
|
CODE & PREFORMATTED TEXT
|
|
============================================ */
|
|
|
|
code {
|
|
font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
|
|
font-size: 0.875em;
|
|
font-weight: 400;
|
|
background: #f8f9fa;
|
|
color: #d73a49;
|
|
padding: 0.125em 0.375em;
|
|
border-radius: 3px;
|
|
border: 1px solid #e1e4e8;
|
|
font-feature-settings: "calt" 1, "liga" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1;
|
|
font-variant-ligatures: common-ligatures contextual;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
pre {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
max-width: 55rem;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
pre code {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
color: #24292e;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
font-feature-settings: "calt" 1, "liga" 1;
|
|
}
|
|
|
|
/* ============================================
|
|
IMAGES & MEDIA
|
|
============================================ */
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
figure {
|
|
margin: 1.75rem 0;
|
|
text-align: center;
|
|
max-width: 55rem;
|
|
}
|
|
|
|
figure img {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
figcaption {
|
|
font-size: 0.95rem;
|
|
color: #666;
|
|
font-style: italic;
|
|
margin-top: 1rem;
|
|
max-width: 40rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* ============================================
|
|
TABLES
|
|
============================================ */
|
|
|
|
table {
|
|
width: 100%;
|
|
max-width: 50rem;
|
|
margin: 1.25rem 0;
|
|
border-collapse: collapse;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.95rem;
|
|
box-shadow: 0 2px 15px rgba(0,0,0,0.08);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
th, td {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
th {
|
|
background: #f8f9fa;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
tr:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
/* ============================================
|
|
SECTIONS & LAYOUT
|
|
============================================ */
|
|
|
|
section {
|
|
margin: 2.5rem 0;
|
|
}
|
|
|
|
/* Keep homepage centered but content pages left-aligned */
|
|
body.homepage article {
|
|
text-align: center;
|
|
}
|
|
|
|
body.homepage main {
|
|
text-align: center;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 6rem;
|
|
padding: 3rem 0;
|
|
border-top: 1px solid #e1e4e8;
|
|
text-align: center;
|
|
background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 45rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: #555;
|
|
text-decoration: none;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: #333;
|
|
background: rgba(102, 126, 234, 0.08);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.footer-note {
|
|
color: #777;
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.footer-note a {
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.footer-note a:hover {
|
|
color: #5a67d8;
|
|
border-bottom-color: #5a67d8;
|
|
}
|
|
|
|
/* ============================================
|
|
UTILITIES
|
|
============================================ */
|
|
|
|
.text-center { text-align: center; }
|
|
.text-left { text-align: left; }
|
|
.text-right { text-align: right; }
|
|
|
|
.mb-0 { margin-bottom: 0; }
|
|
.mb-1 { margin-bottom: 1rem; }
|
|
.mb-2 { margin-bottom: 2rem; }
|
|
.mb-3 { margin-bottom: 3rem; }
|
|
|
|
.mt-0 { margin-top: 0; }
|
|
.mt-1 { margin-top: 1rem; }
|
|
.mt-2 { margin-top: 2rem; }
|
|
.mt-3 { margin-top: 3rem; }
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN
|
|
============================================ */
|
|
|
|
@media (max-width: 768px) {
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.875rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.0625rem;
|
|
}
|
|
|
|
nav {
|
|
padding: 0.75rem 1rem;
|
|
margin: 1.5rem auto 3rem;
|
|
}
|
|
|
|
nav a {
|
|
display: block;
|
|
margin: 0.5rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 2rem auto;
|
|
padding: 1.5rem;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
ul, ol {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
body {
|
|
padding: 0 0.75rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
nav {
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
nav a {
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
ADVANCED TYPOGRAPHY FEATURES
|
|
============================================ */
|
|
|
|
/* Drop caps for special content */
|
|
.drop-cap::first-letter {
|
|
float: left;
|
|
font-family: 'Crimson Pro', serif;
|
|
font-size: 4em;
|
|
line-height: 0.8;
|
|
margin: 0.1em 0.1em 0 0;
|
|
font-weight: 600;
|
|
color: #667eea;
|
|
font-feature-settings: "kern" 1, "liga" 1, "swsh" 1;
|
|
}
|
|
|
|
/* Stylistic alternates for headings */
|
|
.stylistic-heading {
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "swsh" 1;
|
|
}
|
|
|
|
/* Perfect widow and orphan control */
|
|
p, li, blockquote {
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
|
|
/* Micro-typography adjustments */
|
|
.fine-print {
|
|
font-size: 0.825rem;
|
|
line-height: 1.6;
|
|
color: #666;
|
|
font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
/* Professional table number styling */
|
|
.tabular-nums {
|
|
font-feature-settings: "kern" 1, "tnum" 1;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ============================================
|
|
ACCESSIBILITY & SPECIAL FEATURES
|
|
============================================ */
|
|
|
|
/* Focus styles */
|
|
*:focus {
|
|
outline: 2px solid #667eea;
|
|
outline-offset: 3px;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
/* Selection styles */
|
|
::selection {
|
|
background-color: rgba(102, 126, 234, 0.15);
|
|
color: #0f0f0f;
|
|
text-shadow: none;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background-color: rgba(102, 126, 234, 0.15);
|
|
color: #0f0f0f;
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* Reduced motion preferences */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
* {
|
|
background: transparent !important;
|
|
color: black !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
nav, footer {
|
|
display: none;
|
|
}
|
|
|
|
a, a:visited {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a[href]:after {
|
|
content: " (" attr(href) ")";
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
} |