/* ========================================================================= SeminarsOnly.com — Editorial / Academic theme layered over Bootstrap 5 Typography: Fraunces (display) · Libre Franklin (body) · JetBrains Mono ========================================================================= */ :root { --ink: #16202e; --ink-soft: #3c4a5c; --ink-faint: #6b7888; --paper: #faf7f0; --paper-2: #f3eee3; --card: #ffffff; --line: #e4ddcd; --line-soft: #efe9db; /* per-discipline accent, set on */ --accent: #1f5fbf; --accent-2: #16386f; --accent-wash:#eef3fb; --radius: 14px; --shadow-sm: 0 1px 2px rgba(22,32,46,.06), 0 2px 8px rgba(22,32,46,.05); --shadow-md: 0 4px 14px rgba(22,32,46,.08), 0 12px 40px rgba(22,32,46,.07); --ff-display: "Fraunces", Georgia, serif; --ff-body: "Libre Franklin", system-ui, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, monospace; } /* discipline accents */ body[data-disc="CSE"] { --accent:#2563eb; --accent-2:#1742a8; --accent-wash:#eaf1fe; } body[data-disc="ECE"] { --accent:#0e8aa0; --accent-2:#0a5e6e; --accent-wash:#e6f6f9; } body[data-disc="Electrical"] { --accent:#b07d10; --accent-2:#825a06; --accent-wash:#fbf3df; } body[data-disc="Mechanical"] { --accent:#c43d2f; --accent-2:#902519; --accent-wash:#fceeec; } body[data-disc="IT"] { --accent:#6d3bd1; --accent-2:#4a2596; --accent-wash:#f1ecfc; } body[data-disc="Civil"] { --accent:#0c8a5a; --accent-2:#066241; --accent-wash:#e6f6ef; } body[data-disc="Chemical"] { --accent:#c0297a; --accent-2:#8e1857; --accent-wash:#fcebf4; } * { scroll-behavior: smooth; } body { font-family: var(--ff-body); color: var(--ink); background-color: var(--paper); background-image: radial-gradient(circle at 12% -10%, var(--accent-wash) 0, transparent 38%), radial-gradient(circle at 100% 0%, var(--paper-2) 0, transparent 30%); background-attachment: fixed; font-size: 1.02rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,.display-font { font-family: var(--ff-display); font-optical-sizing: auto; color: var(--ink); letter-spacing: -.01em; } h1 { font-weight: 600; } h2 { font-weight: 600; } a { color: var(--accent-2); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent); } .mono { font-family: var(--ff-mono); } .text-faint { color: var(--ink-faint); } .accent { color: var(--accent); } /* ---------- Navbar ---------- */ .navbar { background: rgba(250,247,240,.82); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .navbar .brand { font-family: var(--ff-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -.02em; color: var(--ink); } .navbar .brand .dot { color: var(--accent); } .navbar .nav-link { color: var(--ink-soft); font-weight: 500; font-size:.95rem; } .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--accent); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: 5.5rem 0 4rem; border-bottom: 1px solid var(--line); } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(transparent 96%, var(--line-soft) 96%), linear-gradient(90deg, transparent 96%, var(--line-soft) 96%); background-size: 34px 34px; -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 0, transparent 70%); mask-image: radial-gradient(circle at 70% 30%, #000 0, transparent 70%); opacity: .7; } .hero > * { position: relative; } .hero .eyebrow { font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; color: var(--accent); } .hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; } .hero .lead { color: var(--ink-soft); max-width: 44ch; } /* ---------- Discipline cards ---------- */ .disc-card { display:block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.2rem; height: 100%; text-decoration: none; color: var(--ink); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .disc-card::after { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--accent); } .disc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); color: var(--ink); } .disc-card .badge-disc { font-family: var(--ff-mono); font-size:.7rem; letter-spacing:.12em; color: var(--accent); text-transform: uppercase; } .disc-card h3 { font-size: 1.45rem; margin:.3rem 0 .35rem; } .disc-card .count { font-family: var(--ff-mono); font-size:.8rem; color: var(--ink-faint); } /* ---------- Topic list / index ---------- */ .topic-row { display:flex; gap:1rem; align-items:flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; text-decoration:none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow: var(--shadow-sm); height:100%; } .topic-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); color: var(--ink); } .topic-row .num { font-family: var(--ff-display); font-weight:600; font-size:1.5rem; color: var(--accent); line-height:1; min-width: 2.2rem; } .topic-row h4 { font-size:1.12rem; margin:0 0 .25rem; } .topic-row p { margin:0; font-size:.9rem; color: var(--ink-faint); } /* ---------- Article ---------- */ .article-head { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; margin-bottom: 2rem; } .article-head .kicker { font-family: var(--ff-mono); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color: var(--accent); } .article-head h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height:1.05; margin:.5rem 0 .75rem; } .article-head .lead { font-size:1.18rem; color: var(--ink-soft); } .article p { margin-bottom: 1.05rem; } .article h2 { font-size: 1.7rem; margin: 2.4rem 0 1rem; padding-top:.4rem; position: relative; } .article h2::before { content:""; display:inline-block; width: 1.6rem; height:3px; background: var(--accent); vertical-align: middle; margin-right:.7rem; border-radius:2px; } .article h3 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; } .article ul, .article ol { margin-bottom: 1.1rem; } .article li { margin-bottom: .35rem; } .article strong { color: var(--ink); } blockquote.callout { border-left: 4px solid var(--accent); background: var(--accent-wash); padding: 1rem 1.25rem; border-radius: 0 10px 10px 0; margin: 1.6rem 0; font-size: .98rem; } blockquote.callout .label { font-family: var(--ff-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--accent-2); display:block; margin-bottom:.3rem; } /* ---------- Figures ---------- */ figure.diagram { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.2rem .9rem; margin: 1.8rem 0; box-shadow: var(--shadow-sm); } figure.diagram svg { width: 100%; height: auto; display:block; } figure.diagram figcaption { font-size: .85rem; color: var(--ink-faint); margin-top:.9rem; padding-top:.7rem; border-top: 1px dashed var(--line); font-family: var(--ff-body); } figure.diagram figcaption b { font-family: var(--ff-mono); color: var(--accent-2); font-size:.78rem; letter-spacing:.04em; } /* svg internal styles use currentColor / CSS vars via attributes set inline */ /* ---------- Tables ---------- */ .table-wrap { overflow-x:auto; margin: 1.6rem 0; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); background:var(--card); } table.tbl { width:100%; border-collapse: collapse; font-size:.92rem; margin:0; } table.tbl caption { caption-side: top; text-align:left; padding:.9rem 1.1rem .2rem; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); } table.tbl thead th { background: var(--accent); color:#fff; font-weight:600; text-align:left; padding:.7rem .9rem; font-size:.86rem; } table.tbl tbody td { padding:.65rem .9rem; border-top:1px solid var(--line-soft); vertical-align:top; } table.tbl tbody tr:nth-child(even) { background: var(--paper); } /* ---------- Table of contents (sticky) ---------- */ .toc { position: sticky; top: 90px; border-left: 2px solid var(--line); padding-left: 1rem; font-size: .88rem; } .toc .toc-title { font-family: var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.6rem; } .toc a { display:block; color: var(--ink-soft); text-decoration:none; padding:.25rem 0; border-left:2px solid transparent; margin-left:-1rem; padding-left:1rem; } .toc a:hover { color: var(--accent); } /* ---------- Tags / chips ---------- */ .chip { display:inline-block; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.04em; background: var(--accent-wash); color: var(--accent-2); border:1px solid var(--line); padding:.18rem .55rem; border-radius:999px; margin:.15rem .2rem .15rem 0; } /* ---------- References ---------- */ .refs { counter-reset: ref; list-style:none; padding-left:0; font-size:.9rem; } .refs li { counter-increment: ref; padding-left: 2.4rem; position:relative; margin-bottom:.7rem; color: var(--ink-soft); } .refs li::before { content: "[" counter(ref) "]"; position:absolute; left:0; font-family:var(--ff-mono); color: var(--accent); font-size:.82rem; } /* ---------- Breadcrumb ---------- */ .crumb { font-family: var(--ff-mono); font-size:.78rem; letter-spacing:.03em; } .crumb a { color: var(--ink-faint); text-decoration:none; } .crumb a:hover { color: var(--accent); } .crumb .sep { color: var(--line); margin:0 .4rem; } /* ---------- Prev / Next ---------- */ .pager { display:flex; gap:1rem; margin-top:2.5rem; } .pager a { flex:1; border:1px solid var(--line); border-radius:var(--radius); padding:.9rem 1.1rem; text-decoration:none; color:var(--ink); background:var(--card); transition:.2s; box-shadow:var(--shadow-sm);} .pager a:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md); } .pager .dir { font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } .pager .ttl { font-weight:600; } .pager .next { text-align:right; } /* ---------- Footer ---------- */ footer.site { background: var(--ink); color: #c9d2dd; margin-top: 4rem; padding: 3rem 0 2rem; } footer.site a { color:#e7edf4; text-decoration:none; } footer.site a:hover { color:#fff; } footer.site .brand { font-family:var(--ff-display); font-size:1.3rem; color:#fff; } footer.site .muted { color:#8090a3; font-size:.85rem; } footer.site h6 { font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#8090a3; } /* ---------- Stat strip ---------- */ .stat { text-align:center; } .stat .n { font-family:var(--ff-display); font-weight:600; font-size:2.4rem; color:var(--accent); line-height:1; } .stat .l { font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } /* ---------- Reveal animation (progressive enhancement only) ---------- */ .reveal.in { opacity:1; transform:none; } html.js .reveal { opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } html.js .reveal.in { opacity:1; transform:none; } @media (max-width: 991px){ .toc { position:static; border-left:none; padding-left:0; margin-bottom:1.5rem; } }