/*
Name: BookCard
Description: Responsive HTML5 vCard Template
Version: 1.3.2
Author: pixelwars
*/
/* ---
MAIN STYLE FILE */
/* BASE */
html, body { width:100%; height:100%; }
/* Solid fallback while the wood texture / skins load (avoids white flash). */
html { background-color: #2c2118; }
body { overflow: hidden; -webkit-text-size-adjust:none; background-color: #2c2118; }
/* The blog pages are ordinary documents — the global overflow:hidden exists
for the book mechanics on index.html and killed native scrolling here. */
/* Fully visible — no overflow-x:hidden here: any hidden axis computes the
other axis to auto, which turns body into a viewport-height scroll
container; the wood background then stops at the first screen and the
dark html canvas shows through when scrolling. Wide content is handled
at the source (pre/table scroll wrappers, img max-width).
background-attachment: the skins ship `fixed`, which WebKit/Safari
paints only over the first viewport (the tile "ends" and never repeats
down the page) — long-scrolling blog pages use a normal scrolling tile.
height:auto: the template pins html,body to height:100% for the book;
a 100%-tall body paints its wood background one viewport high and the
article overflows it — the tile "ended" right at the first fold. */
body.blog-page { overflow: visible; background-attachment: scroll; height: auto; }
.safe-mod body { overflow: visible; overflow-x: hidden; display: block !important; }
.p-overlay-on.safe-mod .main { display: none; }
/* FOUC guard (index.html): hide the book shell until boot.js/main.js have
applied .safe-mod and finished layout init. Failsafe in boot.js reveals
after 2.5s even if main.js errors. */
html:not(.is-ready) .main {
opacity: 0;
}
html.is-ready .main {
opacity: 1;
-webkit-transition: opacity 0.22s ease-out;
transition: opacity 0.22s ease-out;
}
/* Prefer reduced motion: skip the fade, still avoid the FOUC. */
@media (prefers-reduced-motion: reduce) {
html.is-ready .main { -webkit-transition: none; transition: none; }
}
a { color: #C25337; text-decoration: none; outline: none; }
a:hover { color: #C00; }
iframe { border: none; }
p,ul,ol { font-size:.875em; line-height:160%; }
ul { list-style: square; }
img { width:auto; max-width:100%; height:auto; }
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.easing, #header nav ul a, .btn, .portfolio-nav a.button, .social li a, input,textarea, .media-box .mask, .cover h1, .cover h2, .cover h3, .rm-close span, .cover .widget-twitter .twitter-link:before, .latest-from-blog a, .more a, .post-pagination li a, .navigation a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.center { text-align: center; }
/* -------------------------------------------- */
/* TYPOGRAPHY */
/* headings and paragraphs */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
h1 { font-size: 2.20em; margin: 0.8em 0 0.4em 0; }
h2 { font-size: 2.00em; margin: 1.0em 0 0.8em 0; }
h3 { font-size: 1.10em; margin: 1.0em 0 .6em 0; }
h4 { font-size: 1.00em; margin: 1.0em 0 .6em 0; }
h5 { font-size: 0.90em; margin: 1.0em 0 .8em 0; }
h6 { font-size: 0.85em; margin: 1.0em 0 .8em 0; }
p { margin: 1.2em 0; }
/* FONTS */
/* BODY */
body, input, textarea, select, button, input[type="button"], input[type="reset"], input[type="submit"]
{ font-family: Lato, Arial, serif; }
/* FONT AWESOME ICONS */
.fancy-ico:before, #fancybox-close:before, .icon, .icon:before, .portfolio-items .mask:before, #header ul li a:before, .widget-twitter .twitter-link:before, .widget-twitter ul li:before, .alert:before, .social li a.pinterest:before, .social li a.instagram:before, .rm-close span:before { font-family: FontAwesome; font-weight: normal; text-align:left; font-style: normal; display: inline-block; text-decoration: inherit; }
/* ------------------------------------------
--------------------- LAYOUT */
.content { position:relative; padding: 2em; }
.content h2, .content h3 { margin: .4em 0 1.4em 0; text-align:center; }
.content h3 { margin: 2.2em 0 1.6em 0; }
/* ------------------------------------------
--------------------- SCROLLBAR */
.antiscroll-wrap { position:absolute; top:0; z-index:1; bottom:0; left:0; width:100%; overflow: hidden; }
.antiscroll-inner { overflow: scroll; overflow-x: hidden; width: 100%; height:100%; }
.antiscroll-inner::-webkit-scrollbar { width: 0; height: 0; }
.antiscroll-inner::scrollbar { width: 0; height: 0; }
.antiscroll-scrollbar { position: absolute; z-index: 3;
background: gray;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 0 1px #fff;
box-shadow: 0 0 1px #fff;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-webkit-transition: linear 300ms opacity;
-moz-transition: linear 300ms opacity;
-o-transition: linear 300ms opacity;
}
/* Scrollbar stays visible (data-autoHideScrollbar="false"): panels taller than
the page must LOOK scrollable, or nobody finds the CV button and the form. */
.antiscroll-scrollbar-shown { opacity: .45; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=45); }
.antiscroll-scrollbar-horizontal { height: 7px; margin-left: 2px; bottom: 2px; left: 0; }
.antiscroll-scrollbar-vertical { width: 7px; margin-top: 2px; right: 2px; top: 0; }
.antiscroll-scrollbar-vertical:active { opacity: .5; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); }
/* ------------------------------------------
--------------------- HEADER */
#header { display: none; position:relative; z-index:1000; width:100%; text-align:center; }
#header:before, #header:after { content: " "; display: table; }
#header:after { clear: both; }
/* MOBILE NAV MENU */
#header nav { position:relative; z-index:1100; }
#header nav ul { position:relative; padding:0; margin:0; font-size:.9em; list-style: none; }
#header nav ul li { float:left; width: 25%; margin: 0 ; }
#header nav ul a { display:block; line-height:70px; font-size: 20px; text-align: center; color: #ddd;
text-shadow: 0 2px rgba(0, 0, 0, 0.12);
background: #303335;
border-left: 1px solid #555;
border-right: 1px solid #232428;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05);
}
#header nav ul li:first-child a { border-left: none; }
#header nav ul li:last-child a { border-right: none; }
/* Screen-reader-only text (nav links otherwise have no text content). */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Desktop corner nav on the CLOSED cover. The template only ever showed this
menu in safe-mod/mobile — on desktop the cover had no visible navigation at
all. Hidden again once the book opens (the panels own the navigation then). */
/* No visible navigation on the desktop cover (owner's call): #header keeps its
template default (display:none outside safe-mod); the OPEN ribbon is the
entry point. The markup stays for the safe-mod/mobile menu. */
#header nav ul a:hover { color: #eee; background: #222; }
/* Menu Icons */
#header ul li:nth-child(1) a:before { content: "\f104"; } /* Home */
#header ul li:nth-child(2) a:before { content: "\f022"; } /* Resume */
#header ul li:nth-child(3) a:before { content: "\f0b1"; } /* Portfolio */
#header ul li:nth-child(4) a:before { content: "\f0e0"; } /* Contact */
/* ------------------------------------------
--------------------- RESUME PAGE */
.history-group { padding-top: 0.4em; }
.history-unit { position: relative; padding: 0.5em 0; }
.history-unit .work-desc { margin-left: 124px; position:relative; margin-left: 126px; }
.history-unit .work-desc h4 { margin-top: 0; }
.history-unit .work-desc h5 { margin:.2em 0 .4em; font-size: .8em; color: #999; }
.history-unit .work-desc h5:before { content: "→ "; display:inline-block; margin-right:6px; }
.history-unit .work-desc p { margin-top: 0.6em; }
.history-unit h4, .skill-unit h4 { margin-bottom:2px; font-weight:400; }
.history-unit h4.work-time { position:relative; z-index:100; float:left; margin-top: 0; min-width: 80px; text-align: center; font-size: 2.2em; font-family: 'Tulpen One', cursive; padding: 4px 10px; border: 1px solid #ddd; border-radius: 4px; }
.history-unit:before { content: ""; position:absolute; z-index:90; top: 66px; left:50px; bottom: 4px; border-left: 1px dashed #ccc; }
.history-unit:last-child:before { display: none; }
/* Skills progress bars */
.skill-group { padding: 0 0 1.2em 0; }
/* SKILL TAGS — equal-weight chips replacing the old percent bars */
.skill-tags { margin: 0 0 1.5em; padding: 0; list-style: none; }
.skill-tags li {
display: inline-block; margin: 0 6px 8px 0; padding: 6px 14px;
border: 1px solid #b5ab96; border-radius: 15px;
font-size: 13px; letter-spacing: .5px; color: #444; white-space: nowrap;
}
/* About text */
h4.about-text { text-align: center; font-size: 1.4em; line-height: 160%; padding: .3em 0; }
.label { display: inline-block; padding: 0 .4em; border-radius: 2px; }
/* Services */
.service { text-align: center; padding: .4em 0 1.6em 0; }
.service:after { content: ""; display: block; max-width: 10%; margin: 0 auto; border-bottom: 1px solid #ccc; }
.service:last-child:after { display: none; }
.service i { font-size: 2.8em; color: #777; text-shadow: 0 1px 0 #fff; }
.service p { margin-top: .4em; }
.service h4 { margin-top: .8em; }
/* Button */
.launch { text-align: center; padding: 2.6em 0; }
.btn { padding: 20px 60px; letter-spacing: 1px; font-size: .9em; border-radius: 40px; }
/* ------------------------------------------
--------------------- CONTACT PAGE */
.contact-form { padding-top: 2em; margin-top: 30px; background:url(../images/bckg/letter-lines.png) left top repeat-x; background-size: 45px 5px; }
.map { margin-bottom:30px; }
.map iframe { width:100%; border-width:0; outline:none; height:180px; }
#contact-form fieldset { border:0; padding:0; }
.contact-form p { margin: .8em 0; }
.contact-form p:before, .contact-form p:after { content: " "; display: table; }
.contact-form p:after { clear: both; }
input, textarea { display:block; padding:10px; border:0; border-radius:0; outline:0; background: #fff; border: 1px solid #ddd; box-shadow: none; -webkit-box-shadow: none; -webkit-appearance: none; }
textarea { height:80px; }
input:focus, textarea:focus { border-color: #aaa; }
/* Typed-letter look: small-caps labels over full-width ruled lines on the
paper itself (no white boxes), typewriter text, wax-red submit.
#contact-form id in the selectors: the template ships late
input:not([type=submit])… rules whose attribute chains out-rank plain
classes (and paint the focus ring an alien green). */
#contact-form label {
display: block; float: none; width: auto; margin: 0 0 2px;
font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px;
letter-spacing: 2px; text-transform: uppercase; color: #8a7d5c;
}
#contact-form input, #contact-form textarea {
display: block; float: none; width: 100% !important;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
padding: 6px 2px; background: transparent; border: 0; border-bottom: 1px solid #cfc4ab;
font-family: 'Cutive Mono', monospace; font-size: 15px; color: #2b2620;
}
#contact-form input:focus, #contact-form textarea:focus { border-bottom-color: #c94c43; }
#contact-form ::-webkit-input-placeholder { color: #b0a48e; font-style: italic; }
#contact-form ::placeholder { color: #b0a48e; font-style: italic; opacity: 1; }
/* message: ruled writing lines, text sits on them */
#contact-form textarea {
height: 140px; min-height: 140px; line-height: 28px; padding: 0 2px; resize: vertical;
background-image: -webkit-repeating-linear-gradient(top, transparent, transparent 27px, #ddd3ba 27px, #ddd3ba 28px);
background-image: repeating-linear-gradient(180deg, transparent, transparent 27px, #ddd3ba 27px, #ddd3ba 28px);
background-attachment: local; border-bottom: 0;
}
#contact-form .btn.submit {
float: right; margin-top: 1em; padding: 12px 30px; border: 0; border-radius: 3px; cursor: pointer;
background: #c94c43; color: #fff;
font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px;
letter-spacing: 2px; text-transform: uppercase;
box-shadow: 2px 2px 0 rgba(20,17,15,.25);
}
#contact-form .btn.submit:hover { background: #b33a3a; color: #fff; }
#contact-form .btn.submit:active { background: #b33a3a; box-shadow: 1px 1px 0 rgba(20,17,15,.25); }
.stamp { position:relative; float:right; margin-right: 0.4em; width:114px; height:134px; background:url(../images/bckg/stamp.png) 0 0 no-repeat; }
.stamp:after { content:""; position:absolute; top:0; left:0; width: 100%; height:100%; background:url(../images/bckg/stamp-mask.png) 0 0 no-repeat; }
.stamp img { display: block; width:94px; height: 114px; position:absolute; top:10px; left:10px; }
.letter { padding-bottom: 1.2em; }
.letter-info { float: left; margin-left: .4em; }
.letter-info h4 { margin: .5em 0 0 0; font-size: 2.2em; line-height: 120%; font-family: 'Sacramento', cursive; }
.letter-info p { margin: 0; }
/* PROJECT LINK CARDS — the Projects column holds three external links, not a
portfolio grid; full-width cards + vertical centering kill the empty look. */
/* NOTE: the cards container must NOT carry the template's .portfolio-items
class — main.js hands that selector to isotope, which finds no .hentry
items and pins the container to an inline height:0 (on mobile the
overflow:hidden wrapper then clips the cards entirely). Vertical centering
is desktop-only; safe-mod flows the cards after the heading. */
html:not(.safe-mod) #portfolio .content { display: flex; flex-direction: column; min-height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.project-links { width: 100%; margin: 0 0 1.5em; }
html:not(.safe-mod) .project-links { margin: auto 0; }
.project-card {
display: flex; align-items: center; gap: 16px; width: 100%; margin: 0 0 14px;
padding: 16px 18px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
border: 1px solid #b5ab96; border-radius: 6px; color: #444; text-decoration: none;
background: rgba(255,255,255,.35);
}
.project-card:hover { border-color: #444; color: #111; background: rgba(255,255,255,.7); }
.project-card svg { flex: 0 0 auto; }
.project-card-text { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.project-card-text strong { font-size: 15px; letter-spacing: 1px; }
.project-card-text em { font-style: normal; font-size: 12.5px; color: #6b6151; }
.project-card:hover .project-card-text em { color: #444; }
/* --- SPREAD CONTENT V2 (brand refresh) --- */
/* Theme tokens — canonical values already used across the theme (seal red,
brass, meta brown, the resume's #ccc hairlines, Cutive Mono). New rules
reference these instead of repeating the literals. */
:root {
--seal: #c94c43;
--brass: #f4c430;
--meta: #8a7d5c;
--hairline: #ccc;
--mono: 'Cutive Mono', monospace;
}
/* certification registry: hairline-ruled grid rows — fixed mono vendor
column in seal red, names all starting on one vertical, tier bolded */
.cert-registry { margin: 0 0 .8em; border-top: 1px solid var(--hairline); }
.cert-row {
display: grid; grid-template-columns: 96px 1fr; column-gap: 20px;
align-items: baseline; padding: 14px 2px;
border-bottom: 1px solid var(--hairline);
}
.cert-vendor {
font-family: var(--mono); font-size: .72em; letter-spacing: 1px;
text-transform: uppercase; color: var(--seal);
white-space: nowrap; align-self: baseline;
}
.cert-name { font-size: 1rem; line-height: 1.3; }
/* narrow screens: vendor gets its own line above the name */
@media (max-width: 560px) {
.cert-row { grid-template-columns: 1fr; row-gap: 2px; }
}
/* EMPLOYMENT: roomier vertical rhythm — entries clearly separated, air
between year/title, company line and description. Scoped with the
--employment modifier so EDUCATION keeps the tight default. */
.history-group--employment .history-unit { margin-bottom: 36px; }
.history-group--employment .history-unit:last-child { margin-bottom: 0; }
.history-group--employment .work-desc h5 { margin-top: 8px; }
.history-group--employment .work-desc p { margin-top: 12px; }
/* EMPLOYMENT horizontals: badge column pinned to the sheet's left edge
with a clear gap to the text (the template floats the badge and pushes
the text with margin-left instead). Grid replaces both; the dashed
timeline moves under the new badge column's center. */
.history-group--employment .history-unit {
display: grid; grid-template-columns: 132px 1fr; column-gap: 28px;
padding-left: 0;
}
.history-group--employment .history-unit h4.work-time {
float: none; margin: 0; min-width: 0; width: 100%; align-self: start;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* html. prefix: the book panel is ~400px wide, so .w420 is active even on
desktop, and the template's later `.w420 .history-unit .work-desc
{ margin-left:104px }` ties this rule's specificity — outrank it. */
html .history-group--employment .work-desc, html.w420 .history-group--employment .work-desc { margin-left: 0; }
.history-group--employment .history-unit:before { left: 65px; }
html.w420 .history-group--employment .history-unit { grid-template-columns: 104px 1fr; column-gap: 20px; }
html.w420 .history-group--employment .history-unit:before { left: 51px; }
/* compact history entry for the early-career position */
.history-unit--compact .work-desc p { font-size: .85em; }
/* PROJECTS: five compact proof-cards need the full column, not centering */
.projects-intro { text-align: center; font-style: italic; color: #7a6f60; margin: 0 0 1.2em; }
html:not(.safe-mod) .project-links--full { margin: 0 0 1em; }
.project-card--compact { padding: 10px 14px; gap: 12px; margin-bottom: 10px; }
.project-card--compact .project-card-text strong { font-size: 14px; }
.project-card--compact .project-card-text em { font-size: 12px; line-height: 1.45; }
/* .cert-credly reuses the accent action-link treatment (same as the
projects panel's "More on GitLab" footer) */
.projects-footer, .cert-credly { text-align: center; margin: 0; }
.projects-footer a, .cert-credly a { letter-spacing: 1px; font-size: 13px; }
.cert-credly { margin-bottom: 2em; }
/* CONTACT: availability stamp (postmark look) + booking CTA spacing */
.status-stamp {
display: inline-block; padding: 6px 14px; border: 2px solid #c94c43; border-radius: 2px;
color: #c94c43; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px;
letter-spacing: 2px; text-transform: uppercase;
-webkit-transform: rotate(-2deg); transform: rotate(-2deg);
}
#contact .launch { padding: 1.2em 0 .4em; }
#contact .launch .btn { padding: 16px 40px; }
.portfolio-field .btn { margin:2em auto 2em; }
.portfolio-field .launch { text-align: left; padding-left: 14px; }
/* SOCIAL */
@font-face { font-family: 'JustVectorRegular'; font-weight: normal; font-style: normal;
src: url('fonts/justvector/justvector-webfont.eot');
src: url('fonts/justvector/justvector-webfont.eot?#iefix') format('eot'),
url('fonts/justvector/justvector-webfont.woff') format('woff'),
url('fonts/justvector/justvector-webfont.ttf') format('truetype'),
url('fonts/justvector/justvector-webfont.svg#webfontmuk63VQd') format('svg');
}
.social { padding:0; margin:2em 0; list-style:none; text-align: center; }
.social li { display:inline-block; padding:0; margin-bottom: -3px; }
.social li a { display:block; float:left; margin: 0 .1em .2em 0; line-height:100%; text-align:center; font-family: 'JustVectorRegular'; font-size:21px; padding: 9px 8px 7px 8px; min-width:21px; max-height:24px; color:#444; border-radius: 50%; border: 1px solid #ddd; }
/* Same round buttons for networks the JustVector icon font doesn't cover
(GitLab, plain email) — inline SVG inherits color via currentColor. */
.social li a.svg-icon { padding: 8px; }
.social li a.svg-icon svg { display: block; width: 21px; height: 21px; }
.social li a.facebook:before { content: 'X'; }
.social li a.twitter:before { content: '_'; }
.social li a.flickr:before { content: 'b'; }
.social li a.rss:before { content: '*'; }
.social li a.dribble:before { content: 'S'; }
.social li a.lastfm:before { content: 'u'; }
.social li a.linkedin:before { content: 'v'; }
.social li a.vimeo:before { content: '!'; }
.social li a.google:before { content: 'k'; }
.social li a.forrst:before { content: 'd'; }
.social li a.skype:before { content: ':'; }
.social li a.picassa:before { content: '8'; }
.social li a.youtube:before { content: "'"; }
.social li a.tumblr:before { content: '\\'; }
.social li a.behance:before { content: 'G'; }
.social li a.blogger:before { content: 'J'; }
.social li a.delicious:before { content: 'L'; }
.social li a.digg:before { content: 'Q'; }
.social li a.friendfeed:before { content: 'f'; }
.social li a.github:before { content: 'j'; }
.social li a.wordpress:before { content: '$'; }
.social li a:hover { color:#fff !important; background-color:#000; border-color: #fff; }
.social li a.facebook:hover { background-color:#3c5fac; }
.social li a.twitter:hover { background-color:#5ec3df; }
.social li a.flickr:hover { background-color:#FF0084; }
.social li a.rss:hover { background-color:#ff9900; }
.social li a.dribble:hover { background-color:#EA4C89; }
.social li a.lastfm:hover { background-color:#D51007; }
.social li a.linkedin:hover { background-color:#2089b5; }
.social li a.vimeo:hover { background-color:#0dadd6; }
.social li a.google:hover { background-color:#c63d2d; }
.social li a.forrst:hover { background-color:#5b9a68; }
.social li a.skype:hover { background-color:#00aff0; }
.social li a.picassa:hover { background-color:#ffd34e; }
.social li a.youtube:hover { background-color:#c8312b; }
.social li a.pinterest:hover { background-color:#cb2027; }
.social li a.tumblr:hover { background-color: #2C4762; }
.social li a.behance:hover { background-color: #3878F6; }
.social li a.blogger:hover { background-color: #fc9947; }
.social li a.delicious:hover { background-color: #3274d1; }
.social li a.digg:hover { background-color: #205891; }
.social li a.friendfeed:hover { background-color: #2f72c4; }
.social li a.github:hover { background-color: #000; }
.social li a.wordpress:hover { background-color: #0083b3; }
.social li a.instagram:hover { background-color:#3f729b; }
.social li a.pinterest:before { content: "\f0d2"; }
.social li a.instagram:before { content: "\f083"; }
/* TWITTER WIDGET ON CONTENT PAGE */
.content .widget-twitter ul { list-style: none; padding:0; }
.content .widget-twitter ul li { position: relative; margin-bottom:3em; padding-top:.4em; }
.content .widget-twitter ul li:before { content: "\f099"; position: absolute; top: 0; left: 0; font-size:24px; color: #ccc; text-shadow: 0 1px 0 #fff; }
.content .widget-twitter ul li span { position:relative; display:block; margin-left:4em; padding:1em 1.4em; background:#fff; }
.content .widget-twitter ul li span:before { content:''; position:absolute; top:0; right:100%; width: 0; height: 0; border-top: 13px solid #fff; border-left: 15px solid transparent; }
.content .widget-twitter ul li span + a { float:right; margin-top:.4em; color:#aaa; }
/* TWITTER WIDGET ON COVER PAGE */
.cover .widget-twitter { position: absolute; bottom: 0; left: 0; width: 100%; max-height: 64px; }
.cover .widget-twitter ul { list-style: none; margin: 0; padding: .9em .9em .9em 0; min-height: 40px; background: #fff; }
.cover .widget-twitter ul li { margin-left: 70px; }
.cover .widget-twitter ul li span { position:relative; }
.cover .widget-twitter ul li span + a { margin-left: 1em; color:#aaa; }
/* update : v.1.2 */
.cover .widget-twitter .twitter-link:before { content: "\f099"; position: absolute; top: 15px; left: 15px; line-height: 1; padding: .6em; font-size:18px; color: #fff; background: #0CF; border-radius: 50%; }
.cover .widget-twitter .twitter-link:hover:before { background: #222; }
/* COVER PAGE */
.cover-image-holder { display: none; }
.cover { position: relative; z-index:1000; width:100%; height:100%; overflow:hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.cover h1 { display: block; width: 100%; margin: 0 auto; padding: .5em 0 .1em 0; text-align: center; color: #fff; line-height: 1; letter-spacing: 1px; font-size: 62px; font-family: 'Alfa Slab One'; text-shadow: 8px 7px 0px rgba(0, 0, 0, 0.1); }
.cover h2 { display: block; width: 100%; margin: 0% 0 8% 0%; padding: 0; text-align: center; line-height: 1.2; letter-spacing: 1px; color: #fff; font-size: 16px; font-family: 'Nixie One'; }
.cover h3 { display: block; width: 30%; margin: 5% 0 0 4%; padding: 0; text-align: left; letter-spacing: 1px; font-size: 18px; font-family: 'Raleway'; font-weight: 200; color:#fff; }
.cover h3 span { display: block; font-weight:800; color: #FC0; }
.cover h2, .cover h3 { text-shadow: rgba(0,0,0,.4) 1px 1px 0, rgba(0,0,0,.4) 2px 2px 0; }
/* OPEN BUTTON */
a.rm-button-open { position: absolute; top: 50%; margin-top: -20px; right: -10px; }
a.rm-button-open:hover { right:0; }
/* CLOSE BUTTON */
.rm-close { color: #fff; position: absolute; top: 0; right: 30px; cursor: pointer; z-index:300; }
.rm-close:hover { color: #ccc; }
.rm-close span { display:inline-block; margin-top: 14px; }
.rm-close span:before {content: "\f00d"; font-size: 20px;}
.rm-close { background: #333; border-left: 1px dashed #888; border-right: 1px dashed #888; box-shadow: 3px 0 0 #333, -3px 0 0 #333; text-align: center; width: 40px; height:50px; }
.rm-close:after,
.rm-close:before { border-top: 15px solid #333; content: ''; height: 0; position: absolute; top: 100%; width: 0; }
.rm-close:after { border-left: 25px solid transparent; right: -4px; }
.rm-close:before { border-right: 25px solid transparent; left: -4px; }
/* ── COVER VARIANT 2A ─────────────────────────────────────────────
Name plate above the photo (face never covered), photo as its own area,
stats on the jacket over a bottom scrim, clip-path OPEN ribbon.
Reference: cover-2a-reference.html (repo root of public-site). */
/* Desktop: fill the whole book page (the page paper is window-height driven;
a shorter card left a white strip below the photo). Safe-mod/mobile flows
statically, where height:100% would instead stretch a black tail — keep auto. */
.cover-2a { display: flex; flex-direction: column; height: 100% !important; background-color: #14110f; background-image: none !important; }
/* Mobile/tablet: the card fills the whole screen — the photo area flex-grows
past its preferred ratio, so no paper tail shows below the cover. */
.safe-mod .cover-2a { height: auto !important; min-height: 100vh; min-height: 100dvh; }
.cover-2a .cover-plaque { padding: 20px 24px 14px; text-align: center; background: #14110f; }
/* !important: fitText (main.js) sets inline font-size on .cover h1/h2 — the
plaque sizes itself instead: ≈7.2% of the 32vw card, capped for max-width 560. */
.cover-2a .cover-plaque h1 {
margin: 0; padding: 0; width: auto; line-height: 1.05; letter-spacing: 1px; color: #fff;
font-size: min(2.3vw, 40px) !important; white-space: nowrap;
text-shadow: 2px 2px 0 #c94c43;
}
.cover-2a .cover-plaque h2 {
margin: 4px 0 0; padding: 0; width: auto; line-height: 1.2; letter-spacing: normal; color: #f2ece2;
font-family: 'Cutive Mono', monospace; font-size: min(1.16vw, 20px) !important; text-shadow: none;
}
/* Photo area: aspect from the 2A reference (471x560 under a ~98px plate);
the card heights here are content-driven, so the ratio must be explicit. */
/* aspect-ratio is the preferred size; flex-grow lets the photo take whatever
page height remains, and flex-shrink + min-height:0 let it give height back
when the plaque grows (the FROM THE BLOG line used to push the stats row
below the page bottom on shorter windows). */
.cover-2a .cover-photo {
position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: 471 / 560;
background: url(../images/site/cover.jpg) center 22% / cover no-repeat;
}
.cover-2a .cover-photo::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; max-height: 60%;
background: linear-gradient(0deg, rgba(15,13,16,.88) 25%, rgba(15,13,16,0));
}
/* OPEN ribbon (still the template's book-open trigger via .rm-button-open) */
.cover-2a .cover-open {
position: absolute; right: 0; top: 34%; z-index: 2;
background: #d96459; color: #7e2b24; text-decoration: none;
font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 2px;
padding: 12px 22px 12px 26px;
-webkit-clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.cover-2a .cover-open:hover { background: #c94c43; color: #fff; }
/* Stats on the jacket — desktop (4A): all three in ONE row; the .cover-stats-row
wrapper dissolves via display:contents so the mobile (3B) markup stays intact. */
.cover-2a .cover-stats {
position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 2;
display: flex; justify-content: space-between; gap: 20px; text-align: left;
}
.cover-2a .cover-stats dl { margin: 0; }
.cover-2a .cover-stats-row { display: contents; }
.cover-2a .cover-stats dt { margin: 0; color: #f4c430; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 2px; }
.cover-2a .cover-stats dd { margin: 0; color: #fff; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 19px; }
/* STACK value: short on desktop so the row fits at 471px, full text on mobile */
.cover-2a .cover-stats .stack-long { display: none; }
/* Desktop (4A): the old two-line ticker over the photo is gone — the blog
line lives in the top plaque instead. Mobile (3B) re-enables the ticker. */
.cover-2a .latest-from-blog { display: none; }
/* Blog line in the plaque — one full-width yellow strip, whole thing a link.
Negative margins swallow the plaque's own padding so the strip runs
edge-to-edge and closes the plaque right where the photo starts. */
.cover-blog-line {
display: flex; align-items: baseline; gap: 10px;
margin: 12px -24px -14px; padding: 9px 24px;
background: #f4c430; text-decoration: none; overflow: hidden; white-space: nowrap;
}
.cover-blog-line[hidden] { display: none !important; }
.cover-blog-label { color: #7e2b24; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 2px; flex-shrink: 0; }
.cover-blog-headline { color: #14110f; font-family: 'Cutive Mono', monospace; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.cover-blog-line:hover .cover-blog-headline { text-decoration: underline; }
/* Safe-mod / narrow screens: card is full-width, name may wrap to two lines */
@media (max-width: 959px) {
.cover-2a .cover-plaque h1 { font-size: 7.2vw !important; white-space: normal; }
.cover-2a .cover-plaque h2 { font-size: 3.6vw !important; }
.cover-2a .cover-stats { left: 18px; right: 18px; bottom: 16px; }
.cover-2a .cover-stats-row { gap: 24px; }
.cover-2a .cover-stats dd { font-size: 18px; }
/* The section card must cover the whole first screen: the container goes
full-viewport flex-column and the white .rm-wrapper grows into the
remainder, so no wood texture shows under short sections (projects,
contact). The cover page keeps its absolute wrapper — flex ignores it. */
.safe-mod .rm-container { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* same cream-dust paper as the pages (see skins/paper-bg), so the stretched
tail below short sections is seamless rather than plain white */
/* html. prefix outranks the template's later `.safe-mod .rm-wrapper
{ background:#fff }` — this media block sits earlier in the file */
html.safe-mod .rm-wrapper {
flex: 1 0 auto;
background: #eee url(../images/bckg/paper-bg/cream_dust.png) 0 0 repeat;
}
/* WebKit derives a flex item's WIDTH from aspect-ratio x stretched height
(unlike Blink), which pushed the photo wider than the phone screen —
the crop drifted sideways and the right-anchored OPEN ribbon went
off-screen. On mobile the photo needs no ratio at all: it is simply
the flex remainder of the 100dvh card. */
.safe-mod .cover-2a .cover-photo { aspect-ratio: auto; min-height: 320px; }
/* OPEN ribbon on the jacket (not the face), tap zone >= 44px.
Anchored to the photo BOTTOM (not a % from the top): the full-screen
photo height varies with the ticker/nav, and the reference's top:52%
landed on the chin here. 186px puts it just above the stats, on the
scrim, for any photo height. */
.safe-mod .cover-2a .cover-open {
top: auto; bottom: 186px; font-size: 14px; padding: 14px 18px 14px 24px;
-webkit-clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
/* Blog ticker: static strip between the photo and the nav — off the face */
.safe-mod .cover-2a .latest-from-blog {
display: block; position: static; margin: 0; padding: 0 0 8px; background: #14110f;
}
/* the desktop plaque blog line has no place on the mobile cover */
.safe-mod .cover-2a .cover-blog-line { display: none !important; }
/* 3B stats layout: STACK above, CLOUDS+EXPERIENCE in a row below */
.safe-mod .cover-2a .cover-stats { flex-direction: column; justify-content: flex-start; gap: 14px; }
.safe-mod .cover-2a .cover-stats-row { display: flex; gap: 24px; flex-wrap: wrap; }
.safe-mod .cover-2a .cover-stats dt { font-size: 15px; }
.safe-mod .cover-2a .cover-stats .stack-long { display: inline; }
.safe-mod .cover-2a .cover-stats .stack-short { display: none; }
}
/* Phone sizes from the 3B reference (docs/design/cover-mobile-3b-reference.html) */
@media (max-width: 560px) {
.cover-2a .cover-plaque { padding: 18px 16px 12px; }
.cover-2a .cover-plaque h1 { font-size: 27px !important; letter-spacing: .5px; }
.cover-2a .cover-plaque h2 { font-size: 14px !important; }
.cover-2a .cover-photo { background-position: center 18%; }
.cover-2a .cover-photo::after { height: 320px; max-height: none; background: linear-gradient(0deg, rgba(15,13,16,.9) 35%, rgba(15,13,16,0)); }
/* .safe-mod prefix: must outrank the 959-block's 3B-restore rules,
which carry the same prefix — document order then favours this block */
.safe-mod .cover-2a .cover-stats { left: 20px; right: 20px; bottom: 20px; gap: 12px; }
.safe-mod .cover-2a .cover-stats-row { gap: 32px; }
.safe-mod .cover-2a .cover-stats dt { font-size: 13px; }
.safe-mod .cover-2a .cover-stats dd { font-size: 19px; }
}
/* HOMEPAGE COVER BLOG LINK */
.latest-from-blog {
margin: 22px 0; position: absolute; bottom: 60px; right: 0; left: 0;
}
/* Widget ships hidden; js/blog.js reveals it only when the API returns posts.
Explicit rule because the old normalize.css predates [hidden] support. */
.latest-from-blog[hidden] {
display: none !important;
}
/* Full-bleed plaque: the old fixed 320px width cut off mid-cover and read
as a rendering bug. */
.latest-from-blog h3 {
width: auto; font-size: 12px !important; padding: 6px 4%; background: #111; margin: 0; text-transform: uppercase; color: #fff;
}
.latest-from-blog h3 a:before {
content: " - ";
}
.latest-from-blog h3 a {
font-size: 10px; color: #fff; letter-spacing: 2px;
}
.latest-from-blog h3 a:hover {
opacity: .6;
}
/* width:auto beats the template's `.cover h2 { width:100% }`, which ignored
the side margins and pushed long titles past the cover edge. */
.latest-from-blog h2 {
text-align: left; margin: 6px 4% 0; display: block; width: auto !important; font-size: 18px !important; text-shadow: none !important;
}
/* border-box: the a's padding must stay inside max-width, or the ellipsis
never triggers and the chip gets clipped by the cover's overflow:hidden. */
.latest-from-blog h2 a {
display: inline-block; box-sizing: border-box; max-width: 100%; padding: 5px 8px; color: #111; background: #F9ED3A;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.latest-from-blog h2 a:hover {
background: #fff;
}
/* ------------------------------------------
--------------------- SAFE MOD */
.safe-mod .rm-container { overflow: hidden; }
.safe-mod .rm-container { width: 100%; max-width:600px;
-webkit-perspective: 0px;
-moz-perspective: 0px;
-o-perspective: 0px;
-ms-perspective: 0px;
perspective: 0px; }
.safe-mod .rm-wrapper { position: static; background: #fff; }
.safe-mod .rm-wrapper .rm-middle { box-shadow: none; }
.safe-mod .rm-close, .safe-mod .rm-overlay { display: none; }
.safe-mod .antiscroll-inner { overflow:hidden; }
.safe-mod.on-cover-page .rm-wrapper { position:absolute; top: 0; bottom: 0; }
.safe-mod #header { display:block; }
.safe-mod.on-cover-page #header { display:none; }
.safe-mod .rm-wrapper,
.safe-mod .rm-wrapper > div { position: static; }
.safe-mod.not-on-cover-page body { width:auto; height:auto; }
.safe-mod.not-on-cover-page .main { height:auto; }
.safe-mod.not-on-cover-page .page { height:auto; }
.safe-mod.not-on-cover-page .antiscroll-wrap { position:relative; top:auto; bottom:auto; left:auto; overflow:hidden; }
.safe-mod.not-on-cover-page .antiscroll-inner { position:relative; }
.safe-mod.not-on-cover-page .rm-wrapper > div > div { position: static; }
.safe-mod .rm-right .rm-front { display: none; }
/* ----------------------------------
RESPONSIVE LAYOUTS
---------------------------------- */
/* WIDTH 420 */
.w420 h2 { font-size: 1.6em; }
.w420 .letter-info { float: none; text-align: center; margin-left: 0;}
.w420 .stamp { float: none; margin: 0 auto;}
.w420 .contact-form label { float: none; width: 100%; }
.w420 .contact-form input, .w420 .contact-form textarea { float: none; width: 100%; }
/* resume page */
.w420 h4.about-text { font-size: 1.2em; }
.w420 .testo img { max-width: 60px; }
.w420 .testo .text { margin-left: 80px; }
.w420 .history-unit:before { left: 46px; }
.w420 .history-unit h4.work-time { min-width: 67px; font-size: 2em; }
.w420 .history-unit .work-desc { margin-left: 104px; }
/* portfolio */
.w420 #filters li { margin: 0 .5em .2em .5em; }
/* TABLETS */
@media screen and (max-width: 978px) {
.portfolio-field .launch { text-align: center; }
}
/* TABLET PORTRAIT */
@media screen and (min-height: 800px) and (max-width: 960px) {
.safe-mod .rm-container { width: 100%; max-width: none; }
}
/* HIGH RES DESKTOPS */
@media screen and (min-height: 800px) and (min-width: 1200px) {
.safe-mod .rm-container { width: 100%; max-width: 700px; }
}
@media screen and (min-height: 900px) and (min-width: 1400px) {
.safe-mod .rm-container { width: 100%; max-width: 770px; }
}
/* PHONES */
@media screen and (max-width: 560px) {
#header nav ul a { line-height:60px; font-size: 17px; }
.content { padding: 2em 1.2em; }
.cover .widget-twitter { display: none; }
.latest-from-blog { bottom: 0; }
}
/* ------------------------------------------
--------------------- CUSTOMIZATIONS */
/* TEXT COLORS */
body { color:#333; }
/* Mobile Menu Active Item */
#header nav ul .current_page_item a { color: #fff; background: #15B79C; }
/* Label */
.label { color: #fff; background: #333; }
/* Button */
.btn { color: #fff; background: #333; }
.btn:hover { color: #fff; background: #d64b4b; }
.btn:active { background: #c14545; }
/* Text Selection */
::selection { text-shadow:none; color:#fff; background:#555; }
::-moz-selection { text-shadow:none; color:#fff; background:#555; }
/* INNER PAGE BG */
.rm-wrapper > div > div { background-color: #fff; }
/* FRONT PAGE BG */
.rm-wrapper > div.rm-cover > div.rm-front { background-color: #666; }
/* BACK PAGE BG — plain white face shown mid-flip while the book opens
(was the template's placeholder photo cover-2.jpg) */
.rm-wrapper > div.rm-right > div.rm-front { background-color: #fff; }
/* --------------------------------------- */
/* chrome video fullscreen fix */
:-webkit-full-screen-ancestor:not(iframe) {
-webkit-animation: none;
}
/* --------------------------------------------
2. FORMS (@forms) - form elements
-------------------------------------------- */
fieldset {
border: 0; margin: 0; padding: 0;
}
form p {
position: relative; margin: 1.6em 0;
}
label {
display: block; font-size: 10px; letter-spacing: 1px; font-weight: 700; margin-bottom: 0.6em; text-transform: uppercase;
}
::-webkit-input-placeholder {
color: rgba(255,255,255,0.2);
}
::-moz-placeholder {
color: rgba(255,255,255,0.15);
}
:-ms-input-placeholder {
color: rgba(255,255,255,0.15);
}
label input {
font-weight: 400;
}
input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]),
textarea,
select {
padding: 12px 16px; width: 100%; font-size: 14px; color: #345; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; background-color: transparent; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; box-sizing: border-box;
}
input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]):hover,
textarea:hover,
input:hover,
select:hover {
outline: 0;
}
input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]):focus,
textarea:focus,
input:focus,
select:focus {
border-color: #4ECE99; outline: 0;
}
textarea {
min-height: 9em; line-height: 1.6; resize: vertical;
}
select {
padding: .8em 1em; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZJJREFUaIHt1r9LVWEYB/DPVTEpgqRBaEhocmiyoc2lrZbG+gts8z8I5xykRfwxROBiEBENSdAmQZMKTldwUHAJAltEBG2453Beg7zXe99zXZ4PHC7nx/s833O5931fQgghhBBCCDUbxCqe9qHXc7zDQM6iizjHMaZyFv7HE5wUvRY6GdDpW+4XnyP4gskrR2vvMT5juDg/yFm8gTmtb+YcvzCRsf5D/E7qvyl6ZtXAStLkAOMZ6j7AYVJ3WQ3hS4P4kDTbxVgP9e5hL6m3VvSo1TDWk6bbGO2izl3sJHW+qn7/tbuFjaT5j+Jap27jZzJ+AzczZ2zrDraSEN9wo4NxI/iejNssal2LMTSTMB8xdMnzQ/iUPN/U238oi3GtGakM9b9VdADvXZzF7vcpY1sTWmtDGW7examwgbfJ/dzrSBaP8EcV8nVybza5fqSelTyLKa39Uhl2pjjK87r3Ulk8w6kqdHmc6s9uNouXOFOFP8OLa03UhVeqF5iuq8llc3avFlUL1FKNfUIIIYQQQgjd+QvyJ2oyQcCnYgAAAABJRU5ErkJggg==); background-position: 97% center; background-position: right 10px center; background-repeat: no-repeat; background-size: 20px 20px;
}
select::-ms-expand {
display: none;
}
input[type=file]{
width: 100%; outline: 0; cursor: pointer; font-size: 13px;
}
input[type=file]::-webkit-file-upload-button {
display: inline-block; padding: .6em 1em; outline: 0; color: #333; background-color: transparent; border: 1px solid #999; cursor: pointer;
}
input[type=checkbox] {
-webkit-appearance: none; height: 1em; position: relative; background-color: transparent; border: 2px solid #333; width: 1em; border-radius: 3px; outline: none; font-size: 15px; vertical-align: text-bottom; margin-right: .6em;
}
input[type=checkbox]:active {
box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.2) inset;
}
input[type=checkbox]:before,
input[type=checkbox]:after {
content: ''; background-color: inherit; position: absolute; transition: 0.1s background-color;
}
input[type=checkbox]:after {
width: 0.14em; height: 0.60em; -webkit-transform: rotate(36deg) translate(0.42em, -0.17em);
}
input[type=checkbox]:before {
width: 0.14em; height: 0.35em; -webkit-transform: rotate(-58deg) translate(-0.2em, 0.35em);
}
input[type=checkbox]:checked:after,
input[type=checkbox]:checked:before {
background-color: #333;
}
input[type=radio] {
-webkit-appearance: none; height: 1em; position: relative; background-color: #fff; border: 2px solid #333; width: 1em; border-radius: 50%; outline: none; font-size: 15px; margin-right: .6em; vertical-align: text-bottom;
}
input[type=radio]:checked:before {
content: ''; background-color: #333; position: absolute; border-radius: 50%; top: 3px; left: 3px; bottom: 3px; right: 3px;
}
/* BUTTONS */
input[type=submit],
input[type=button],
button,
a.button {
display: inline-block; position: relative; padding: 1.1em 2em; margin-bottom: .25em; font-size: 11px; font-weight: bold; text-transform: uppercase; line-height: 1.2; letter-spacing: .08em; outline: 0; border: 2px solid #345; color: #345; text-shadow: none; background: none; border-radius: 0;
}
input[type=submit]:hover,
input[type=button]:hover,
button:hover,
a.button:hover {
color: #fff; background-color: #1B2E34; border-color: transparent;
}
input[type=submit]:active,
input[type=button]:active,
button:active,
a.button:active {
opacity: .8;
}
/* LAYOUT */
/* overflow:auto removed: it made body a viewport-height scroll container,
so the wood background stopped after the first screen and the dark html
canvas showed below when scrolling (body.blog-page earlier in the file
sets the full-visible overflow this page needs). */
body.classic * {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* blockquote */
blockquote {
position: relative; margin: 1.6em 0; padding: 0 .8em; text-align: center; font-size: 1.2em; line-height: 1.2; font-weight: 900;
}
blockquote p {
line-height: 100%;
}
blockquote cite {
display: block; font-size: 13px; padding-right: 1em; margin-top: 1em; font-style: normal; font-weight: 400; color: #ccc; letter-spacing: 0.03em;
}
/* TABLETS */
/* DESKTOPS */
@media screen and (min-width: 992px) {
/* HOMEPAGE COVER BLOG LINK */
.latest-from-blog h2 {
font-size: 24px !important;
}
}
/* ═══ BLOG ARTICLE PAGE (layout 1A — docs/design/blog-article-1a-reference.html)
One quiet readable column on a light sheet; no portrait, no sidebar.
Everything is scoped under body.post-1a (blog-single.html only). ═══ */
/* flex column to the viewport bottom: the sheet absorbs the slack, so the
body's wood texture stays side margins only — never visible below the
article, however short the content. */
body.post-1a { font-family: 'PT Serif', serif; color: #2b2622; padding: 0 16px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* [hidden] must always win: several 1A blocks set display:flex/block, which
would otherwise override the UA's hidden=display:none. */
.post-1a [hidden] { display: none !important; }
.post-1a a { color: #b33a3a; }
.post-1a a:hover { color: #8f2b2b; }
.post-sheet { width: 100%; max-width: 760px; margin: 0 auto; background: #efe7d6; box-shadow: 0 12px 32px rgba(0,0,0,0.25); flex: 1 0 auto; display: flex; flex-direction: column; }
.post-article { flex: 1 0 auto; }
/* ── Top bar ── */
.post-topbar {
display: flex; align-items: baseline; justify-content: space-between;
padding: 22px 40px 18px; border-bottom: 3px solid #c94c43;
}
.post-wordmark {
font-family: 'Alfa Slab One', serif; font-size: 20px; letter-spacing: .5px;
color: #14110f !important; text-decoration: none;
}
.post-topbar nav { display: flex; gap: 28px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 2px; }
.post-topbar nav a { color: #4a4038; text-decoration: none; }
.post-topbar nav a.active, .post-topbar nav a:hover { color: #b33a3a; }
/* ── Article column ── */
.post-article { max-width: 620px; margin: 0 auto; padding: 48px 20px 56px; }
.post-meta, .post-loading { font-family: 'Cutive Mono', monospace; font-size: 15px; color: #7a6f60; }
.post-loading { text-align: center; margin: 48px 0; }
.post-title {
font-family: 'Alfa Slab One', serif; font-weight: 400;
font-size: 38px; line-height: 1.15; color: #14110f;
margin: 12px 0 20px; padding: 0; text-align: left; text-shadow: none; letter-spacing: 0;
}
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.post-tags a {
font-family: 'Cutive Mono', monospace; font-size: 14px;
color: #b33a3a; border: 1px solid #c9b99d; padding: 2px 10px; text-decoration: none;
}
.post-tags a:hover { border-color: #b33a3a; }
/* ── Markdown body typography ── */
.post-body p { font-size: 18px; line-height: 1.75; color: #2b2622; margin: 0 0 22px; }
/* Markdown h1 in a body is authoring noise, but style it anyway */
.post-body h1 {
font-family: 'Oswald', sans-serif; font-weight: 600;
font-size: 28px; letter-spacing: 1px; color: #14110f; margin: 36px 0 14px; padding: 0; text-align: left; text-shadow: none;
}
.post-body h2 {
font-family: 'Oswald', sans-serif; font-weight: 600;
font-size: 24px; letter-spacing: 1px; color: #14110f; margin: 36px 0 14px; text-align: left;
}
.post-body h3 {
font-family: 'Oswald', sans-serif; font-weight: 600;
font-size: 20px; letter-spacing: 1px; color: #14110f; margin: 30px 0 12px; text-align: left;
}
.post-body ul, .post-body ol { font-size: 18px; line-height: 1.75; color: #2b2622; margin: 0 0 22px; padding-left: 1.4em; }
.post-body blockquote { margin: 0 0 22px; padding: 2px 0 2px 18px; border-left: 3px solid #c94c43; font-style: italic; }
.post-body pre {
background: #14110f; color: #e8dcc8;
font-family: var(--mono); font-size: 15px; line-height: 1.6;
padding: 20px 24px; overflow-x: auto; margin: 0 0 28px; border: none; border-radius: 0;
border-left: 3px solid var(--seal);
white-space: pre; /* normalize.css sets pre-wrap; long code must scroll, not wrap */
-webkit-overflow-scrolling: touch;
}
.post-body pre code { font-family: inherit; background: none; padding: 0; color: inherit; display: block; min-width: max-content; }
/* inline code ANYWHERE in prose — paragraphs, lists, table cells, headings
(p/li-only scoping left table-cell code unstyled) */
.post-body :not(pre) > code {
font-family: var(--mono); background: #e5dbc6; color: #14110f;
padding: 1px 6px; font-size: .92em;
}
.post-table-scroll { overflow-x: auto; margin: 0 0 28px; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 0; }
.post-body th {
font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 2px;
color: #7a6f60; text-align: left; padding: 8px 12px; border-bottom: 2px solid #14110f;
}
.post-body td { padding: 10px 12px; border-bottom: 1px solid #c9b99d; color: #2b2622; }
.post-body th:first-child, .post-body td:first-child { padding-left: 0; }
.post-body th:last-child, .post-body td:last-child { padding-right: 0; }
.post-body img { max-width: 100%; width: 100%; display: block; }
.post-body figure { margin: 0 0 28px; }
.post-body figcaption { font-family: 'Cutive Mono', monospace; font-size: 14px; color: #7a6f60; margin-top: 8px; }
/* ── Prev / next ── */
.post-pager { display: flex; border-top: 3px solid #c94c43; }
.post-pager a { flex: 1; padding: 20px 40px; text-decoration: none; display: block; }
.post-pager a + a { border-left: 1px solid #c9b99d; text-align: right; }
.post-pager-label { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 2px; color: #7a6f60; }
.post-pager-title { display: block; font-family: 'PT Serif', serif; font-size: 16px; color: #14110f; margin-top: 4px; }
.post-pager a:hover .post-pager-title { color: #b33a3a; }
/* single neighbour: the remaining link takes the full width, no divider */
.post-pager-single a + a { border-left: none; }
.post-footer {
padding: 16px 40px 20px; text-align: center;
font-family: 'Cutive Mono', monospace; font-size: 13px; color: #7a6f60;
border-top: 1px solid #c9b99d;
}
/* ── Narrow screens ── */
@media (max-width: 679px) {
body.post-1a { padding: 0; }
.post-topbar { padding: 18px 20px 14px; }
.post-article { padding: 32px 20px 40px; }
.post-title { font-size: 30px; }
.post-pager { flex-direction: column; }
.post-pager a { padding: 16px 20px; }
.post-pager a + a { border-left: none; border-top: 1px solid #c9b99d; text-align: left; }
}
/* ═══ BLOG LIST PAGE (layout 2A — docs/design/blog-list-2a-reference.html)
Shares the sheet/topbar/footer/tokens with the article page above. ═══ */
.blog-title {
font-family: 'Alfa Slab One', serif; font-weight: 400;
font-size: 44px; color: #14110f; margin: 0 0 10px; padding: 0; text-align: left; text-shadow: none; letter-spacing: 0;
}
.blog-title-dot { color: #c94c43; }
.blog-subtitle { font-family: 'Cutive Mono', monospace; font-size: 15px; color: #7a6f60; margin: 0 0 28px; }
/* Tag filter (hidden until any post carries tags) */
.blog-tag-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.blog-tag-filter a {
font-family: 'Cutive Mono', monospace; font-size: 14px;
color: #b33a3a; border: 1px solid #c9b99d; padding: 2px 10px; text-decoration: none;
}
.blog-tag-filter a:hover { border-color: #b33a3a; }
.blog-tag-filter a.active { color: #efe7d6; background: #b33a3a; border-color: #b33a3a; }
/* Post list: the whole card is one link */
.post-item { display: block; text-decoration: none; padding: 26px 0; border-top: 1px solid #c9b99d; }
.post-item > span { display: block; }
.post-item-meta { font-family: 'Cutive Mono', monospace; font-size: 14px; color: #7a6f60; }
.post-item-title {
font-family: 'Alfa Slab One', serif; font-weight: 400;
font-size: 25px; line-height: 1.25; color: #14110f; margin: 8px 0 10px;
}
.post-item:hover .post-item-title { color: #b33a3a; }
.post-item-excerpt { font-family: 'PT Serif', serif; font-size: 17px; line-height: 1.6; color: #2b2622; }
.post-item-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.post-item-tags span { font-family: 'Cutive Mono', monospace; font-size: 13px; color: #b33a3a; }
/* Pagination bar */
.blog-pager {
display: flex; justify-content: space-between; align-items: baseline;
border-top: 3px solid #c94c43; padding: 18px 40px;
}
.blog-pager a {
font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px;
letter-spacing: 2px; text-decoration: none; color: #4a4038;
}
.blog-pager a:hover { color: #b33a3a; }
.blog-pager a.disabled { color: #b0a48e; pointer-events: none; cursor: default; }
.blog-pager-page { font-family: 'Cutive Mono', monospace; font-size: 14px; color: #7a6f60; }
@media (max-width: 679px) {
.blog-title { font-size: 36px; }
.blog-pager { padding: 16px 20px; }
}