/* ========================================================================== Rock Paper Print child theme: classroom-notebook look over GeneratePress. Ported from research/css/style.css (only what the templates use). Sections: fonts · tokens · base · binding · header · header navigation · layout · hero & search · why · sections · cards & sheets · leaf · pager · breadcrumb · printable page (cards) · footer · responsive ========================================================================== */ /* ---------- fonts ---------- */ /* * Self-hosted web fonts (theme 0.15.0; moved here from fonts.css in theme 0.16.0: one stylesheet request fewer). * WOFF2, Latin subset, built from the OFL sources in pipeline/fonts/ by research/qa/fonts-2026-10-03/build-fonts.py. Licences: assets/fonts//OFL.txt. * Variable files carry only the weight range the theme uses. Browsers download a file only when a page uses it. * Hanken Grotesk, Bricolage Grotesque and JetBrains Mono are preloaded (printables_preload_fonts() in functions.php): * keep the URLs in sync. */ /* Body, buttons, card titles: 400, 500, 600 (search heading), 700, 800. */ @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/hanken-grotesk/hanken-grotesk-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Headings h1-h3: 700 (h3), 800 (h1, h2). Optical size pinned at 40. */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/bricolage-grotesque/bricolage-grotesque-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Labels and meta (eyebrows, counts, card meta, copyright): 400, 600. */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono/jetbrains-mono-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Handwriting accent (404 and empty search page, collection note): 700 only. */ @font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/caveat/caveat-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- tokens ---------- */ :root { --paper: #f6f3ea; --paper-2: #efeadb; --card: #fdfcf8; --sheet: #fff; --ink: #1d1b16; --muted: #5f5b52; --rule: #cfc9ba; --accent: #f26b2b; --highlight: #ffe36e; --highlight-soft: #fff6c9; --pen: #2f5aa8; --tint-blue: #dbe8fb; --tint-green: #dcefd8; --tint-pink: #fbe0e6; --tint-purple: #e8e0f7; --tint-yellow: #fff3c4; --tint-teal: #d7f0ee; --tint-peach: #fde3d0; --tint-slate: #e0e6ee; --grid: rgba(50, 80, 130, .07); --grid-size: 28px; --stamp: 3px 3px 0 var(--ink); --stamp-lift: 5px 5px 0 var(--ink); --stamp-press: 1px 1px 0 var(--ink); --border: 1.5px solid var(--ink); --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --binding-w: 44px; --gutter: clamp(1rem, 3vw, 2rem); --font-head: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --font-hand: "Caveat", "Segoe Print", cursive; /* GeneratePress global colours, mapped to ours */ --contrast: var(--ink); --contrast-2: var(--muted); --base-2: var(--paper); --base-3: var(--card); } /* ---------- base ---------- */ body { padding-left: var(--binding-w); font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--ink); background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); } h1, h2, h3 { font-family: var(--font-head); line-height: 1.08; margin: 0; letter-spacing: -.015em; color: var(--ink); } h1 { font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.3rem); } h2 { font-weight: 800; font-size: clamp(1.45rem, 2.6vw, 2rem); } h3 { font-weight: 700; font-size: 1.15rem; } a { color: inherit; } a:hover, a:focus { color: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mono, .eyebrow { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .eyebrow { margin: 0; color: var(--muted); display: inline-flex; align-items: center; gap: .5rem; } .eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--accent); border: 1.5px solid var(--ink); border-radius: 2px; } .hl { background: linear-gradient(transparent 58%, var(--highlight) 58%, var(--highlight) 92%, transparent 92%); padding: 0 .08em; margin: 0 -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .7rem 1.2rem; font-family: var(--font-body); font-weight: 800; font-size: 1rem; line-height: 1.1; background: var(--accent); color: var(--ink); border: var(--border); border-radius: var(--radius); box-shadow: var(--stamp); text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .btn:hover, .btn:focus { background: var(--accent); color: var(--ink); transform: translate(-2px, -2px); box-shadow: var(--stamp-lift); } .btn:active { transform: translate(2px, 2px); box-shadow: var(--stamp-press); } .btn-sm { min-height: 38px; padding: .45rem .9rem; font-size: .9rem; } .chip-list { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; } .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; font-size: .85rem; font-weight: 500; line-height: 1.2; background: var(--card); border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; transition: background .12s, transform .12s, box-shadow .12s; } .chip:hover { background: var(--highlight); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); } .chip[aria-current="page"] { background: var(--ink); color: var(--card); } .tint-blue { --tint: var(--tint-blue); background-color: var(--tint-blue); } .tint-green { --tint: var(--tint-green); background-color: var(--tint-green); } .tint-pink { --tint: var(--tint-pink); background-color: var(--tint-pink); } .tint-purple { --tint: var(--tint-purple); background-color: var(--tint-purple); } .tint-yellow { --tint: var(--tint-yellow); background-color: var(--tint-yellow); } .tint-teal { --tint: var(--tint-teal); background-color: var(--tint-teal); } .tint-peach { --tint: var(--tint-peach); background-color: var(--tint-peach); } .tint-slate { --tint: var(--tint-slate); background-color: var(--tint-slate); } /* ---------- binding: orange plastic coil ---------- One 44 x 34 SVG tile = punched oval + one coil turn. Data URIs cannot read custom properties, so the accent (#f26b2b) is written out; keep it in sync with --accent. */ .binding { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: var(--binding-w); background: var(--paper-2); border-right: var(--border); pointer-events: none; } .binding::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2334302a'/%3E%3Cstop offset='.45' stop-color='%2357524a'/%3E%3Cstop offset='1' stop-color='%238c8678'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.3' stop-color='%234a453b' stop-opacity='0'/%3E%3Cstop offset='.72' stop-color='%234a453b' stop-opacity='.9'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M3.90 11.87C3.89 12.13 3.71 12.87 3.84 13.43C3.96 13.98 4.24 14.60 4.65 15.21C5.06 15.82 5.63 16.47 6.30 17.10C6.97 17.73 7.79 18.38 8.68 18.99C9.57 19.60 10.59 20.20 11.64 20.75C12.69 21.30 14.44 22.02 15.00 22.28' fill='none' stroke='%239c3f10' stroke-width='3' stroke-linecap='butt'/%3E%3Crect x='14.5' y='0' width='1' height='34' fill='%231d1b16' fill-opacity='.14'/%3E%3Cellipse cx='31.50' cy='22.13' rx='6.4' ry='8.4' fill='none' stroke='%23fffdf6' stroke-opacity='.75' stroke-width='1'/%3E%3Cellipse cx='31.50' cy='21.63' rx='6' ry='8' fill='url(%23h)'/%3E%3Cpath d='M32.84 21.89C32.70 21.65 32.37 20.94 32.00 20.45C31.64 19.96 31.18 19.45 30.66 18.95C30.13 18.46 29.52 17.95 28.85 17.46C28.19 16.97 27.45 16.49 26.67 16.03C25.89 15.57 25.04 15.12 24.18 14.71C23.31 14.30 22.40 13.91 21.48 13.56C20.57 13.21 19.62 12.89 18.69 12.62C17.76 12.35 16.36 12.04 15.90 11.93' fill='none' stroke='%231d1b16' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round' filter='url(%23b)'/%3E%3Cpath d='M31.98 22.41C32.02 22.18 32.27 21.54 32.24 21.05C32.20 20.56 32.04 20.03 31.76 19.49C31.48 18.94 31.08 18.37 30.57 17.79C30.07 17.22 29.44 16.63 28.73 16.06C28.03 15.49 27.21 14.91 26.34 14.37C25.47 13.84 24.50 13.31 23.51 12.83C22.53 12.34 21.46 11.89 20.40 11.49C19.35 11.09 18.24 10.74 17.17 10.44C16.10 10.15 15.01 9.91 13.98 9.73C12.95 9.56 11.93 9.45 10.99 9.40C10.06 9.36 9.16 9.38 8.37 9.46C7.58 9.55 6.85 9.70 6.25 9.91C5.64 10.12 5.12 10.40 4.73 10.73C4.34 11.05 4.04 11.68 3.90 11.87' fill='none' stroke='%23c24f16' stroke-width='4.4' stroke-linecap='round' transform='translate(.3 .9)'/%3E%3Cpath d='M31.98 22.41C32.02 22.18 32.27 21.54 32.24 21.05C32.20 20.56 32.04 20.03 31.76 19.49C31.48 18.94 31.08 18.37 30.57 17.79C30.07 17.22 29.44 16.63 28.73 16.06C28.03 15.49 27.21 14.91 26.34 14.37C25.47 13.84 24.50 13.31 23.51 12.83C22.53 12.34 21.46 11.89 20.40 11.49C19.35 11.09 18.24 10.74 17.17 10.44C16.10 10.15 15.01 9.91 13.98 9.73C12.95 9.56 11.93 9.45 10.99 9.40C10.06 9.36 9.16 9.38 8.37 9.46C7.58 9.55 6.85 9.70 6.25 9.91C5.64 10.12 5.12 10.40 4.73 10.73C4.34 11.05 4.04 11.68 3.90 11.87' fill='none' stroke='%23f26b2b' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M31.28 18.47C31.08 18.19 30.55 17.38 30.03 16.83C29.51 16.28 28.88 15.71 28.18 15.16C27.48 14.61 26.68 14.06 25.84 13.55C24.99 13.03 24.05 12.53 23.10 12.07C22.14 11.61 21.12 11.17 20.10 10.79C19.09 10.41 18.02 10.06 16.99 9.78C15.96 9.49 14.91 9.25 13.92 9.08C12.92 8.90 11.93 8.78 11.02 8.72C10.11 8.66 9.23 8.66 8.45 8.73C7.66 8.79 6.67 9.03 6.31 9.09' fill='none' stroke='%23ffd9c2' stroke-width='1.2' stroke-linecap='round'/%3E%3Cellipse cx='31.50' cy='21.63' rx='6' ry='8' fill='url(%23d)'/%3E%3C/svg%3E") 0 2px / 44px 34px repeat-y; } /* ---------- header (over GeneratePress) ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(246, 243, 234, .96); border-bottom: var(--border); } .admin-bar .site-header { top: 32px; } .inside-header { padding: .7rem var(--gutter); } .main-title { margin: 0; line-height: 1; } .main-title a { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); } /* Rock Paper Print lockup (assets/img/logo-header.svg, inline, currentColor). Height sets the size; viewBox is 184.6 x 22.5 (letters match the mock-up's 1.42rem lockup). */ .main-title svg { display: block; height: 1.36rem; width: auto; aspect-ratio: 184.6 / 22.5; } /* Compact search in the nav bar (template-parts/header-search.php). */ .header-search { display: flex; align-items: center; flex: none; width: 220px; height: 40px; margin-left: .75rem; background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: 2px 2px 0 var(--ink); } .header-search input[type="search"] { flex: 1; min-width: 0; height: 100%; padding: 0 .7rem; font-size: .9rem; color: var(--ink); background: none; border: 0; border-radius: 0; } .header-search input[type="search"]:focus { outline: none; } .header-search:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; } .header-search button { flex: none; display: grid; place-items: center; width: 38px; height: 100%; padding: 0; color: var(--ink); background: none; border: 0; border-left: 1px solid var(--rule); border-radius: 0; cursor: pointer; } .header-search button:hover, .header-search button:focus { color: var(--ink); background: var(--highlight); } .header-search svg { display: block; width: 18px; height: 18px; } /* ---------- header navigation (theme 0.14.0; mock-up research/mockups/mega-menu/, option 1) ---------- template-parts/header-nav.php + header-panel.php, assets/js/menu.js. The bar: logo, "Printables" (opens the panel), the menu's plain links (Tools), the quick search. The panel is in the HTML of every page; CSS hides it until "Printables" is open. Phones (768px, GeneratePress's breakpoint): a Menu button and a sheet. */ .site-header .inside-header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 1rem; text-align: left; } .site-header .site-branding { flex: none; margin-right: auto; } .mm-nav { display: flex; align-items: center; gap: .25rem; } .mm-bar { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; } .mm-item { margin: 0; } .mm-nav .header-search { margin-left: .6rem; } .mm-burger { display: none; } /* The words in the bar: "Printables" (a button) and the plain links. */ .mm-trigger, .mm-trigger:hover, .mm-trigger:focus, .mm-link { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .5rem .8rem; font-family: var(--font-body); font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--ink); text-decoration: none; background: transparent; border: 1.5px solid transparent; border-radius: var(--radius); box-shadow: none; cursor: pointer; } .mm-trigger:hover, .mm-link:hover, .mm-link:focus, .mm-link[aria-current="page"] { color: var(--ink); background: var(--card); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); } .mm-item.is-open > .mm-trigger, .mm-item.is-open > .mm-trigger:hover, .mm-item.is-open > .mm-trigger:focus { color: var(--card); background: var(--ink); border-color: var(--ink); box-shadow: 2px 2px 0 var(--accent); } .mm-trigger:focus-visible, .mm-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .mm-caret { flex: none; width: 10px; height: 10px; transition: transform .15s ease; } .mm-item.is-open > .mm-trigger .mm-caret { transform: rotate(180deg); } .mm-link__arrow { display: none; } .mm-panel { display: none; } .mm-item.is-open > .mm-panel { display: block; } /* The panel: a full-width drawer under the header (paper + grid, an ink rule and a soft shadow at its bottom edge), the page dimmed behind it. Inside, one grid: pillar rows in column 1, the active pillar's pane in column 2 spanning every row. 24 auto rows (empty ones are 0 high) + one 1fr row that takes what the pane needs beyond the rows. */ .mm-mega { position: absolute; top: calc(100% + 1.5px); left: 0; right: 0; z-index: 2; max-height: calc(100vh - 100% - 12px); max-height: calc(100dvh - 100% - 12px); overflow-y: auto; background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); border-bottom: var(--border); box-shadow: 0 18px 40px -12px rgba(29, 27, 22, .35); } .mm-mega__inner { padding: 1.1rem var(--gutter) 1.4rem; } .mm-pillars { --col: 250px; position: relative; display: grid; grid-template-columns: var(--col) minmax(0, 1fr); grid-template-rows: repeat(24, auto) 1fr; margin: 0; padding: 0 0 .5rem; list-style: none; background: linear-gradient(90deg, var(--paper-2) calc(var(--col) - 1.5px), var(--ink) calc(var(--col) - 1.5px), var(--ink) var(--col), var(--card) var(--col)); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--stamp); } .mm-pillar { display: contents; } .mm-pillar__row { grid-column: 1; position: relative; display: flex; align-items: stretch; padding: 0 0 0 .5rem; } .mm-pillar:first-child .mm-pillar__row { padding-top: .5rem; } .mm-pillar__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: .65rem; margin-right: -1.5px; padding: .5rem .85rem .5rem .55rem; font-weight: 700; font-size: .98rem; line-height: 1.2; color: var(--ink); text-decoration: none; border: 1.5px solid transparent; border-right: 0; border-radius: var(--radius) 0 0 var(--radius); } a.mm-pillar__link:hover { color: var(--ink); background: var(--card); } a.mm-pillar__link:focus { color: var(--ink); } a.mm-pillar__link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .mm-pillar.is-active > .mm-pillar__row > .mm-pillar__link { position: relative; z-index: 1; background: var(--card); border-color: var(--ink); } .mm-pillar.is-active > .mm-pillar__row > .mm-pillar__link::after { /* marker stroke under the name */ content: ""; position: absolute; left: 2.15rem; right: 3.2rem; bottom: .32rem; height: .42em; background: var(--highlight); z-index: -1; border-radius: 2px; } .mm-tab { flex: none; width: 12px; height: 22px; border: 1.5px solid var(--ink); border-radius: 2px 4px 4px 2px; } .mm-pillar__name { flex: 1; min-width: 0; } .mm-pillar__count { flex: none; font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); } .mm-pillar__toggle { display: none; } .mm-pillar--soon .mm-pillar__link { color: var(--muted); font-weight: 500; cursor: default; } .mm-pillar--soon .mm-tab { border-style: dashed; border-color: var(--muted); background: transparent; } .mm-pillar--soon .mm-pillar__count { text-transform: uppercase; letter-spacing: .06em; font-size: .62rem; } .mm-pane { display: none; } .mm-pillar.is-active > .mm-pane { display: block; grid-column: 2; grid-row: 1 / -1; min-width: 0; padding: 1.1rem 1.4rem 1.3rem; } .mm-pane__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; } .mm-pane__title { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; line-height: 1.1; letter-spacing: -.015em; } .mm-pane__sub { margin: .2rem 0 0; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .mm-pane__all { flex: none; white-space: nowrap; } .mm-pane .subcat-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; } .mm-pane .subcat-card { padding: .45rem .65rem .45rem .45rem; } .mm-pane .subcat-icon { width: 36px; height: 36px; } .mm-pane .subcat-icon .term-icon { width: 28px; height: 28px; } .mm-pane .subcat-name { font-size: .9rem; } .mm-pane .subcat-card.is-soon { border-style: dashed; box-shadow: none; } .mm-pane .subcat-card.is-soon .subcat-name { color: var(--muted); } /* New this week: three small listing tiles laid flat (picture left), one row high. */ .mm-new { margin-top: 1.1rem; padding-top: .9rem; border-top: 1.5px dashed var(--rule); } .mm-new__label { margin: 0 0 .6rem; color: var(--muted); font-size: .68rem; } .mm-new__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; } .mm-new__list > li { display: flex; min-width: 0; } .mm-mini { flex: 1; min-width: 0; display: flex; align-items: stretch; color: var(--ink); text-decoration: none; background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: 2px 2px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; } .mm-mini:hover, .mm-mini:focus { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); } .mm-mini:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .mm-mini__thumb { position: relative; flex: none; width: 96px; aspect-ratio: 4 / 3; overflow: hidden; border-right: var(--border); border-radius: calc(var(--radius) - 1.5px) 0 0 calc(var(--radius) - 1.5px); } .mm-mini__text { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: .45rem .7rem; } .mm-mini__title { font-weight: 700; font-size: .88rem; line-height: 1.2; } .mm-mini__meta { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* The scrim (printed after the header, under it: z-index 40 < 50). */ .mm-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(29, 27, 22, .22); } .mm-scrim[hidden] { display: none; } @media (max-width: 1199.98px) { .mm-pillars { --col: 220px; } .mm-pane .subcat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mm-mini__thumb { width: 76px; } } @media (max-width: 960px) and (min-width: 769px) { .mm-nav .header-search { width: 170px; } .mm-pillars { --col: 200px; } .mm-pane .subcat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-new__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-new__list > li:nth-child(3) { display: none; } } /* Phones: the Menu button opens the nav as a sheet under the header (search, then "Printables" as an accordion of pillar rows, each expanding to its subcategories, then the plain links). The page is dimmed below a short sheet. */ @media (max-width: 768px) { .site-header .inside-header { gap: .5rem; padding-block: .55rem; } .mm-burger, .mm-burger:hover, .mm-burger:focus { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .45rem .7rem; min-height: 42px; font-family: var(--font-body); font-weight: 700; font-size: .95rem; line-height: 1.2; color: var(--ink); background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; } .mm-burger[aria-expanded="true"] { color: var(--card); background: var(--ink); box-shadow: 2px 2px 0 var(--accent); } .mm-burger svg { width: 18px; height: 18px; } .mm-burger .mm-burger__close, .mm-burger[aria-expanded="true"] .mm-burger__open { display: none; } .mm-burger[aria-expanded="true"] .mm-burger__close { display: block; } .mm-nav { display: none; } .mm-sheet-open .mm-nav { position: fixed; top: var(--mm-hdr, 58px); left: var(--binding-w); right: 0; z-index: 45; display: flex; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100vh - var(--mm-hdr, 58px)); max-height: calc(100dvh - var(--mm-hdr, 58px)); padding: 1rem var(--gutter) 1.5rem; overflow-y: auto; overscroll-behavior: contain; background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); border-bottom: var(--border); box-shadow: 0 18px 40px -12px rgba(29, 27, 22, .35); } .mm-sheet-open, .mm-sheet-open body { overflow: hidden; } .mm-nav .header-search { order: -1; width: 100%; height: 48px; margin: 0 0 1rem; } .mm-bar { flex-direction: column; align-items: stretch; gap: .6rem; } .mm-item { background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: 2px 2px 0 var(--ink); } .mm-trigger, .mm-trigger:hover, .mm-trigger:focus, .mm-item.is-open > .mm-trigger, .mm-item.is-open > .mm-trigger:hover, .mm-item.is-open > .mm-trigger:focus, .mm-link, .mm-link:hover, .mm-link:focus, .mm-link[aria-current="page"] { width: 100%; justify-content: space-between; min-height: 54px; padding: .6rem 1rem; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--ink); background: transparent; border: 0; border-radius: var(--radius); box-shadow: none; } .mm-item.is-open > .mm-trigger { border-bottom: var(--border); border-radius: var(--radius) var(--radius) 0 0; background: var(--highlight); } .mm-link:hover, .mm-link:focus { background: var(--highlight); } .mm-caret { width: 13px; height: 13px; } .mm-link__arrow { display: block; width: 13px; height: 13px; transform: rotate(-90deg); } .mm-mega { position: static; max-height: none; overflow: visible; background: none; border: 0; box-shadow: none; } .mm-mega__inner { padding: 0; } .mm-pillars { display: block; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .mm-pillar { display: block; border-bottom: 1.5px dashed var(--rule); } .mm-pillar:last-child { border-bottom: 0; } .mm-pillar__row, .mm-pillar:first-child .mm-pillar__row { padding: 0; } .mm-pillar__link { margin: 0; padding: .75rem .4rem .75rem 1rem; min-height: 50px; border: 0; border-radius: 0; font-size: 1rem; } .mm-pillar.is-active > .mm-pillar__row > .mm-pillar__link { background: none; border: 0; } .mm-pillar.is-active > .mm-pillar__row > .mm-pillar__link::after { display: none; } .mm-pillar__toggle, .mm-pillar__toggle:hover, .mm-pillar__toggle:focus { display: grid; place-items: center; flex: none; width: 52px; margin: 0; padding: 0; color: var(--ink); background: none; border: 0; border-left: 1.5px dashed var(--rule); border-radius: 0; cursor: pointer; } .mm-pillar__toggle svg { width: 14px; height: 14px; transition: transform .15s ease; } .mm-pillar__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .mm-pillar__toggle[aria-expanded="true"] { background: var(--highlight); } .mm-pillar--soon .mm-pillar__link { min-height: 44px; padding-block: .55rem; font-size: .95rem; } /* A pillar's subcategories, one column, then its "View all" button (the pane head, its intro hidden). */ .mm-pillar.is-active > .mm-pane { display: none; padding: 0; } .mm-pillar.is-open > .mm-pane { display: flex; flex-direction: column; padding: .25rem 1rem 1rem; } .mm-pane__head { order: 2; margin: .75rem 0 0; } .mm-pane__intro { display: none; } .mm-pane__all { flex: 1; } .mm-pane .subcat-list { grid-template-columns: minmax(0, 1fr); gap: .4rem; } .mm-pane .subcat-card { box-shadow: none; padding: .35rem .6rem .35rem .35rem; } .mm-pane .subcat-icon { width: 32px; height: 32px; } .mm-pane .subcat-icon .term-icon { width: 24px; height: 24px; } .mm-new { display: none; } } /* ---------- layout ---------- Sticky footer: body is a column at least one viewport tall and #page takes the spare height, so short pages keep the footer at the bottom. width: 100% because GP's auto side margins would otherwise shrink #page to its content in a flex column. */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .admin-bar { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); } #page { flex: 1 0 auto; width: 100%; } .site-header, .site-footer { flex: none; } .site.grid-container { padding-inline: var(--gutter); } .site-content { padding: 0; } .separate-containers .site-main, .site-main { margin: 0; padding-block: 0 3rem; } .section { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1.5px dashed var(--rule); } .section-mt { margin-top: 2rem; } .empty-note { color: var(--muted); } .tools-empty { margin: 0; font-size: 1.05rem; } /* Tools page (page-tools.php) until the first tool is live */ /* ---------- search results ---------- */ .search-results .big-search, .search-no-results .big-search { margin-top: 1rem; } .search-heading { margin: .9rem 0 0; font: 600 1rem/1.4 var(--font-body); letter-spacing: 0; color: var(--muted); } .did-you-mean { margin: .6rem 0 0; font-size: 1rem; } .did-you-mean a { font-weight: 700; color: var(--pen); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; } .did-you-mean a:hover, .did-you-mean a:focus { color: var(--accent); text-decoration: underline; } /* ---------- hero & search ---------- */ /* Theme 0.12.1: tighter rhythm, so at 1440 x 900 the first row of the first pillar section shows on the first screen and at 390 x 844 the search bar does. */ .hero { padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(1.25rem, 2.2vw, 2rem); max-width: 64rem; } /* wide enough for the H1 on one line from 1366px */ .hero h1 { margin-top: 1rem; } /* The count above the H1 (theme 0.12.0): the category pages' yellow badge (.count-badge), left-aligned; the H1's own top margin plus a little more gives it air, so the tilt and the stamp never touch the title. */ .hero-count { margin-bottom: .5rem; } .hero-lede { margin: .8rem 0 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 46rem; } /* the search bar's width */ .big-search { position: relative; z-index: 40; display: flex; align-items: stretch; min-height: 60px; max-width: 46rem; margin-top: 1.8rem; background: var(--card); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--stamp); } .hero .big-search { margin-top: 1.35rem; } .big-search:focus-within { box-shadow: var(--stamp-lift); } .scope { position: relative; flex: none; display: flex; } .scope-btn { display: inline-flex; align-items: center; gap: .5rem; padding: 0 1rem; font: 700 .95rem var(--font-body); color: var(--ink); cursor: pointer; white-space: nowrap; background: var(--paper-2); border: 0; border-right: var(--border); border-radius: calc(var(--radius-lg) - 2px) 0 0 calc(var(--radius-lg) - 2px); } .scope-btn:focus { color: var(--ink); background: var(--paper-2); } /* override GeneratePress button focus colours */ .scope-btn:hover { color: var(--ink); background: var(--highlight); } .scope-btn .caret { font-size: .8em; } /* Scope listbox (search form). z-index keeps it over the cards, under the sticky header (50). */ .dropdown-menu { position: absolute; top: calc(100% + 10px); left: -1.5px; z-index: 40; min-width: 220px; max-height: 380px; overflow: auto; margin: 0; padding: .4rem; list-style: none; background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: var(--stamp-lift); } .dropdown-menu[hidden] { display: none; } .dropdown-menu [role="option"] { display: block; margin: 0; padding: .5rem .7rem; border-radius: var(--radius-sm); font-weight: 500; font-size: .95rem; color: var(--ink); cursor: pointer; white-space: nowrap; } .dropdown-menu [role="option"]:hover, .dropdown-menu [role="option"]:focus { background: var(--highlight); outline: none; } .dropdown-menu [role="option"][aria-selected="true"] { font-weight: 800; } .dropdown-menu [role="option"][aria-selected="true"]::after { content: " \2713"; color: var(--accent); } .big-search input[type="search"] { flex: 1; min-width: 0; border: 0; background: none; padding: 0 1rem; font-size: 1.05rem; color: var(--ink); } .big-search input[type="search"]:focus { outline: none; } .big-search input::placeholder { color: #8b867b; } .big-search .btn { margin: 6px; min-height: 0; box-shadow: 2px 2px 0 var(--ink); } .big-search .btn:hover { box-shadow: 3px 3px 0 var(--ink); } /* ---------- why strip ---------- */ .why-strip { padding-bottom: clamp(1.25rem, 2.2vw, 2rem); } .why-strip + .section { padding-top: clamp(1.75rem, 2.8vw, 2.5rem); } .why-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: var(--stamp); } .why-cell { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: .85rem; padding: .85rem 1.2rem; } .why-cell + .why-cell { border-left: 1.5px dashed var(--rule); } .why-cell p { margin: 0; } .why-icon { width: 40px; height: 40px; display: grid; place-items: center; border: var(--border); border-radius: var(--radius); box-shadow: 2px 2px 0 var(--ink); } .why-icon svg { width: 22px; height: 22px; } .why-line { font-weight: 700; line-height: 1.3; } /* ---------- section heads ---------- */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .75rem 2rem; margin-bottom: 1.75rem; } .section-head h2 { margin-top: .5rem; } .count-mono { margin: 0 0 0 auto; padding-bottom: .3rem; font-family: var(--font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* Home page pillar sections (theme 0.13.0): the pillar's name (linked) on the left; the mono count and the "View all" button on the right; a tighter rhythm than .section so four sections stay compact. */ .section--pillar { padding-block: clamp(2rem, 3.6vw, 3rem); } .section--pillar .section-head { align-items: center; margin-bottom: 1.4rem; } .pillar-title { margin: 0; } .pillar-title a { color: inherit; text-decoration: none; } .pillar-title a:hover, .pillar-title a:focus { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .15em; text-decoration-color: var(--accent); } .section-more { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-left: auto; } .section-more .count-mono { padding-bottom: 0; } /* ---------- cards & sheets ---------- */ .card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } .card { position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: var(--stamp); transition: transform .12s ease, box-shadow .12s ease; } .card:hover { transform: translate(-1px, -1px); box-shadow: var(--stamp-lift); } .card:active { transform: translate(2px, 2px); box-shadow: var(--stamp-press); } /* 4:3 image box (theme 0.9.0): the baked preview (the sheet on its tinted pad) shown whole; the box draws nothing itself. Without an image, the placeholder sheet sits on the printable's tint. */ .card-thumb { position: relative; flex: none; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--paper-2); border-radius: calc(var(--radius) - 1.5px) calc(var(--radius) - 1.5px) 0 0; } .card-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .card-thumb--blank { display: grid; place-items: center; padding: 7%; } .card-thumb--blank .sheet { width: auto; height: 100%; } .card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .7rem 1rem .8rem; border-top: var(--border); } .card-title { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; line-height: 1.25; letter-spacing: 0; } .card-title a { text-decoration: none; } .card-title a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--radius); } /* whole card clickable */ .card-title a:focus-visible { outline: none; } .card-title a:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 3px; } .card-meta { margin: 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .sheet { position: relative; display: block; aspect-ratio: 3 / 4; width: 100%; overflow: hidden; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 2px 3px 0 rgba(29, 27, 22, .12); } .sheet::after { /* folded corner */ content: ""; position: absolute; top: -1px; right: -1px; width: 18px; height: 18px; background: linear-gradient(225deg, var(--tint, var(--paper-2)) 50%, #e6e1d2 50%, #f4f1e8 100%); box-shadow: -1px 1px 0 rgba(29, 27, 22, .12); } .sheet-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* landscape sheet (perspective grids, wireframes): the whole page, centered on the pad; the box has the page's own proportions (Letter 11 x 8.5), so nothing is cropped */ .sheet--landscape { aspect-ratio: 11 / 8.5; } /* (theme 0.9.0: no landscape card box; the baked preview is 4:3 for every sheet) */ .sheet--blank { /* CSS placeholder: faint grid */ background: linear-gradient(rgba(70, 105, 160, .25) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, rgba(70, 105, 160, .25) 1px, transparent 1px) 0 0 / 8px 8px, var(--sheet); } /* no preview image yet: a white sheet with a small PDF mark (cards and the printable page) */ .sheet-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 12%; text-align: center; background: repeating-linear-gradient(transparent 0 15px, rgba(70, 105, 160, .1) 15px 16px) 0 18% / 100% 64% no-repeat, var(--sheet); } .sheet-ph__mark { padding: .3rem .5rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em; line-height: 1; background: var(--accent); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-3deg); } .sheet-ph__text { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* ---------- category head, leaf chips ---------- */ /* The heading uses the information-page title scale (.page .entry-title), not the big display h1. */ .page-head { padding-block: 1.25rem 1.75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9rem 2rem; align-items: end; } .page-head h1 { margin-top: .35rem; font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.15; text-wrap: balance; } .page-head .lede { margin-top: .55rem; font-size: 1rem; line-height: 1.6; color: var(--muted); max-width: 42rem; } .page-head .lede p { margin: 0; } /* "Also in …" chips (theme 0.9.3): a grid on the full content width, so rows end flush with the page head and the card grid; every cell as wide as the longest label needs (233px at 1440: "Holiday & Seasonal Calendars"), the last row keeps the cell width (auto-fill), chips stretch to their cell with icon and text left. 2 per row on phones. */ .siblings { display: block; padding-bottom: 1.75rem; } .siblings > .mono { display: block; margin: 0 0 .6rem; color: var(--muted); font-size: .7rem; } .siblings .chip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .45rem; } .siblings .chip { display: flex; width: 100%; height: 100%; justify-content: flex-start; text-align: left; } @media (max-width: 599.98px) { .siblings .chip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .siblings .chip { border-radius: 1.2rem; } } .siblings--hub { padding: 2rem 0 0; } /* sibling chips carry the category icon on its tint */ .chip--icon { padding-block: .2rem; padding-left: .2rem; } .chip-icon { flex: none; width: 26px; height: 26px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--ink); border-radius: 999px; } .chip-icon .term-icon { display: block; width: 19px; height: 19px; object-fit: contain; } /* empty sheet grid */ .empty-grid { display: flex; align-items: center; gap: 1.1rem; max-width: 34rem; margin: 0 0 1.5rem; padding: 1.1rem 1.25rem; background: var(--card); border: 1.5px dashed var(--ink); border-radius: var(--radius); } .empty-grid__sheet { flex: none; width: 44px; transform: rotate(-4deg); } .empty-grid__text { min-width: 0; } .empty-grid__title { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ink); } .empty-grid__sub { margin: .25rem 0 0; font-size: .92rem; color: var(--muted); } .count-badge { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .4rem .75rem; background: var(--highlight); border: var(--border); border-radius: var(--radius); box-shadow: var(--stamp); font-family: var(--font-mono); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: rotate(2deg); } /* ---------- hub: "Jump to" subcategory mini cards + all-descendants grid ---------- */ .subcat-row { padding-bottom: 1.75rem; } .subcat-label { margin: 0 0 .6rem; color: var(--muted); font-size: .7rem; } /* Jump to: equal columns across the full content width (5 from 1200px, 4 from 900px, 3 from 600px, 2 below), cards stretched to fill their cell, so the row ends on the same right edge as the page head and the card grid. */ .subcat-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; } .subcat-item { display: flex; min-width: 0; } .subcat-item > .subcat-card { flex: 1; min-width: 0; } @media (max-width: 1199.98px) { .subcat-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 899.98px) { .subcat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 599.98px) { .subcat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } } .subcat-card { display: flex; align-items: center; gap: .7rem; height: 100%; padding: .55rem .75rem .55rem .55rem; color: var(--ink); text-decoration: none; background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: 2px 2px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; } .subcat-card:hover, .subcat-card:focus { color: var(--ink); background: var(--highlight); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); } .subcat-card:active { transform: translate(1px, 1px); box-shadow: var(--stamp-press); } .subcat-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .subcat-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border: 1.5px solid var(--ink); border-radius: var(--radius-sm); } .subcat-icon .sheet { width: 26px; transform: rotate(-4deg); box-shadow: 1px 1px 0 rgba(29, 27, 22, .25); } .subcat-icon .sheet::after { width: 6px; height: 6px; } .subcat-icon .term-icon { display: block; width: 32px; height: 32px; object-fit: contain; } .subcat-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .subcat-name { font-weight: 700; font-size: .95rem; } .subcat-count { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; color: var(--muted); } .subcat-count--soon { text-transform: uppercase; letter-spacing: .06em; } .section-label { margin: 0 0 .75rem; color: var(--muted); font-size: .7rem; font-weight: 600; line-height: 1.4; letter-spacing: .06em; } /* ---------- pager: notebook tabs hanging from an ink rule ---------- */ .pager { display: flex; flex-direction: column; align-items: center; margin-top: 3rem; border-top: var(--border); } .pager-list { display: flex; justify-content: center; align-items: flex-start; gap: .35rem; margin: 0; padding: 0 .25rem; list-style: none; } .pager-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 44px; min-height: 44px; margin-top: -1.5px; padding: .55rem .85rem .7rem; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; background: var(--card); border: var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: 2px 2px 0 var(--ink); transition: transform .12s ease, background .12s ease; } a.pager-btn:hover { transform: translateY(4px); background: var(--paper-2); } .pager-btn[aria-current="page"], a.pager-btn[aria-current="page"]:hover { background: var(--highlight); min-height: 52px; } .pager-step { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .pager-step span { font-family: var(--font-body); font-size: 1.35rem; font-weight: 700; line-height: 1; letter-spacing: 0; } .pager-btn.is-disabled { color: var(--muted); background: var(--paper-2); border-color: var(--rule); box-shadow: none; cursor: default; } .pager-gap { padding: .75rem .2rem 0; font-family: var(--font-mono); font-weight: 600; color: var(--muted); } .pager-info { margin: 1rem 0 0; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* ---------- breadcrumb ---------- */ .breadcrumbs { padding-top: 1.5rem; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; } .breadcrumbs li + li::before { content: "\203A"; color: var(--ink); font-weight: 600; } .breadcrumbs a { text-decoration: none; color: var(--ink); } .breadcrumbs a:hover { text-decoration: underline; text-decoration-color: var(--accent); } /* ---------- printable page: cards (also on collection pages) ---------- Page: breadcrumb, H1, the card grid, then the intro and license line. One card per option of the printable's shown attribute (a color, a design): the preview on a fixed 4:3 pad (the same height for every card; a portrait sheet sits narrower inside it, never taller), a top row on the pad (collections note and Pin button, theme 0.11.0), the name, the card's own radio pills, its own Download button pinned to the bottom so the buttons of a row line up. 2 across from 900px, 1 below; on phones the pad gets lower so the first Download button stays in a 390 x 844 first screen (see responsive). */ .asset-head { display: block; padding-block: 1.1rem 1.5rem; } .asset-cards { margin: 0; } .dcard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; } .dcard { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 6rem; background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: var(--stamp); } .dcard:target { outline: 3px solid var(--accent); outline-offset: 4px; } /* The pad (theme 0.11.0): a column of three parts, the top row (fixed height: collections note left, Pin button right), the picture (the baked 4:3 preview: the sheet on its tinted pad, contained and top-aligned on the tint + dots) and, when the block has one, the thumbnail strip's band (fixed height, see below). The row is on every block, empty when the variant is in no collection, so sheets and bands of neighbouring blocks line up. On desktop the transparent row is pulled --top-pull over the picture's baked top margin (pad tint, never the sheet); on phones there is no pull and the pad grows by the row instead (see responsive). The pad does not clip: the collections menu drops over the picture and past the pad if it must; the picture is contained in its own box, so nothing else reaches the pad's edge. */ .dcard__pad { --top-row: 32px; --top-pull: 16px; position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 3; border-bottom: var(--border); border-radius: calc(var(--radius) - 1.5px) calc(var(--radius) - 1.5px) 0 0; background-image: radial-gradient(rgba(29, 27, 22, .13) 1px, transparent 1.5px); background-size: 12px 12px; background-position: 4px 4px; } .dcard__top { position: relative; z-index: 3; flex: none; display: flex; align-items: center; gap: .5rem; height: var(--top-row); margin-bottom: calc(-1 * var(--top-pull)); padding: 0 .3rem 0 .6rem; } .dcard__fit { position: relative; z-index: 0; flex: 1 1 0; min-height: 0; display: grid; place-items: center; } .dcard__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center top; } .dcard__blank { width: auto; height: 86%; aspect-ratio: 8.5 / 11; } .dcard__body { flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: .8rem 1rem 1rem; } .dcard__name { display: flex; align-items: center; gap: .5rem; } .dcard__name .swatch { width: 16px; height: 16px; } .dcard__on { margin-bottom: .45rem; } .dcard__on a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 2px; } .dcard__on a:hover, .dcard__on a:focus-visible { text-decoration-color: var(--accent); text-decoration-thickness: 2px; } .dcard .version-group { display: flex; align-items: flex-start; margin-top: .3rem; } /* floated legend: laid out as normal content, on the line of the first row of its pills */ .dcard .version-group__name { float: left; margin: 0 .6rem 0 0; line-height: 34px; white-space: nowrap; } .dcard .version-options { flex: 1; min-width: 0; } .dcard .version-option__pill { min-height: 34px; padding: .25rem .75rem; font-size: .88rem; } .dcard .version-options--compact .version-option__pill { min-width: 2.2rem; padding: .2rem .45rem; } .dcard__action { margin-top: auto; padding-top: .75rem; } .dcard .btn-download { width: 100%; min-height: 48px; font-size: 1.02rem; white-space: nowrap; } .dcard .btn-download svg { width: 20px; height: 20px; } .btn-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: .18rem .4rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; background: var(--card); border: 1px solid var(--ink); border-radius: var(--radius-sm); } .btn.is-disabled, .btn.is-disabled:hover { cursor: not-allowed; opacity: .45; transform: none; box-shadow: var(--stamp-press); } .dcard__missing { margin: .6rem 0 0; font-weight: 700; } .dcard__closest { display: grid; gap: .3rem; margin: .35rem 0 0; padding-left: 1.1rem; } .dcard__closest a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } .dcard [hidden] { display: none !important; } .dcard__versions { margin-top: .9rem; padding-top: .9rem; border-top: 1.5px dashed var(--rule); } /* Layout E (theme 0.9.1): a printable with exactly one card. The same card element, laid out as the image (about 56%) on the left and the intro over the download box, disclaimer and license line on the right. */ .dcard-grid--single { display: block; } .dcard--single { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); grid-template-areas: "img intro" "img side"; grid-template-rows: auto 1fr; gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: start; background: none; border: 0; border-radius: 0; box-shadow: none; } .dcard--single:target { outline: none; } /* The pad gets the frame (a picture's border and stamp) and keeps the 4:3; the top row sits inside the frame. */ .dcard--single .dcard__pad { grid-area: img; background-color: var(--tint); border: var(--border); border-radius: var(--radius); box-shadow: var(--stamp); } .dcard__intro { grid-area: intro; } .dcard__intro .printable-intro { max-width: none; margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--muted); } .dcard__side { grid-area: side; } .dcard__box { gap: .9rem; padding: 1.25rem; background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: var(--stamp); } .dcard__box .version-group { margin-top: 0; } .dcard__box .dcard__action { padding-top: 0; } .dcard__side .sheet-disclaimer { margin-top: .9rem; } .dcard__side .license-line { margin-top: .9rem; } .dcard__side .sheet-disclaimer + .license-line { margin-top: .35rem; } /* Collections note (theme 0.11.0): the left of the pad's top row, one line on a pale paper chip so it reads over the dotted pad (the chip shrinks with the names and never changes the row's height). "Part of" in small muted mono, the names in handwriting ink with a thin accent underline; names that do not fit end in an ellipsis. "and N more" (3+ collections) or "see all" (shown by main.js only when the names are cut) opens a menu of every collection. */ .cnote { position: relative; flex: 0 1 auto; display: flex; align-items: baseline; gap: .35rem; min-width: 0; padding: 4px 8px; font-family: var(--font-hand); font-size: 1.15rem; font-weight: 700; line-height: 1.15; color: var(--ink); white-space: nowrap; background: rgba(253, 252, 248, .86); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px rgba(29, 27, 22, .08); } .cnote__label { flex: none; font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* The handwriting's glyphs draw past their advance width (the last "6", the first "H"), and overflow: hidden clips at the padding box: side padding keeps that ink inside the box, so a name that fits is never cut; a name that does not fit ends in the ellipsis at the content edge. The bottom padding is room for the underline. */ .cnote__names { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 .3em 4px .15em; margin: 0 -.1em -4px -.15em; } .cnote a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } .cnote a:hover, .cnote a:focus-visible { text-decoration-thickness: 2px; } /* "and N more" / "see all": a text button (GeneratePress button styles reset) */ .cnote__more, .cnote__more:hover, .cnote__more:focus { flex: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; border-radius: 0; line-height: inherit; cursor: pointer; } .cnote__more:hover, .cnote__more[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 3px; } .cnote__more:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* the menu: the theme's .dropdown-menu box, dropping over the picture; items styled like its options */ .cnote__menu { top: calc(100% + 4px); left: 0; max-width: calc(100vw - 3rem); font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.3; text-align: left; white-space: normal; } .cnote .cnote__menu a { display: block; padding: .5rem .7rem; border-radius: var(--radius-sm); font-weight: 500; font-size: .95rem; color: var(--ink); text-decoration: none; } .cnote .cnote__menu a:hover, .cnote .cnote__menu a:focus-visible { background: var(--highlight); outline: none; } /* Arrival (theme 0.11.0): a block reached by its anchor (a collection tile's "N more designs on" link, any #slug link) flashes once; main.js sets the class for 2.4 s, also when the hash does not change. The :target outline above stays. */ .dcard.is-arrived { animation: dcard-arrive 2.4s ease-out 1; } .dcard.is-arrived .dcard__body { border-radius: 0 0 calc(var(--radius) - 1.5px) calc(var(--radius) - 1.5px); animation: dcard-arrive-body 2.4s ease-out 1; } @keyframes dcard-arrive { 0%, 30% { box-shadow: var(--stamp), 0 0 0 6px var(--highlight); } 100% { box-shadow: var(--stamp), 0 0 0 0 rgba(255, 227, 110, 0); } } @keyframes dcard-arrive-body { 0%, 30% { background-color: var(--highlight-soft); } 100% { background-color: transparent; } } @media (prefers-reduced-motion: reduce) { .dcard.is-arrived, .dcard.is-arrived .dcard__body { animation: none; } } .asset-text { max-width: 46rem; margin-top: 1.25rem; } .asset-head .printable-intro { max-width: 46rem; margin-top: .6rem; font-size: 1rem; line-height: 1.6; color: var(--muted); } .sheet-disclaimer { margin: .9rem 0 0; font-family: var(--font-mono); font-size: .72rem; line-height: 1.5; letter-spacing: .02em; color: var(--muted); } .sheet-disclaimer + .license-line { margin-top: .35rem; } .license-line { margin: .9rem 0 0; font-family: var(--font-mono); font-size: .72rem; line-height: 1.5; letter-spacing: .02em; color: var(--muted); } .license-line a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* The no-JS version list (inside