/* * draftedtech.css - what this site adds on top of Katen. * * Loads after css/style.css, which is Katen re-hued by bin/build_theme_css.py. * Everything here is site-specific: the drafting grid, the logo lockup, and a * few places where the theme's demo content and ours are not the same shape. */ /* ========================================================================== THE DRAFTING GRID One big grid, fading out to white, the way the previous build had it. An earlier pass here stacked a 96px grid over a 24px one, which read as graph paper: too busy behind body copy, and the fine lines moired against text at some zoom levels. This is the single 112px grid, masked with a radial that lets it fade to nothing before it reaches the bottom of the viewport, so the page ends on white. Fixed attachment on purpose: the grid stays put while the page scrolls past it, which reads as paper rather than as a texture glued to the content. ========================================================================== */ :root { --dt-navy: #152f60; --dt-cyan: #08e5f7; --dt-cyan-ink: #08b3cf; --dt-grid: rgba(21, 47, 96, 0.075); } body { background-color: #fff; } /* The grid is its own fixed layer rather than a background on , because a mask on the body background would take the white with it. This sits behind everything and is masked on its own. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, var(--dt-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--dt-grid) 1px, transparent 1px); background-size: 112px 112px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 85% 68% at 50% 0%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 85% 68% at 50% 0%, #000 30%, transparent 100%); } /* The wash of trace cyan behind the masthead, on its own layer for the same reason. */ body::after { content: ""; position: fixed; inset: 0 0 auto 0; height: 460px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 100% at 50% 0, rgba(8, 229, 247, 0.08), transparent 70%); } /* Anything that sits ON the grid needs a ground of its own, or the lines run through the type. Katen's bordered panels and widgets are transparent by default, because its body is flat. */ .padding-30.rounded.bordered, .post-tabs.rounded.bordered, .post-grid.rounded.bordered, .comments.bordered, .comment-form.bordered, .widget.rounded, .sidebar .widget { background-color: rgba(255, 255, 255, 0.86); backdrop-filter: blur(2px); } footer { background-color: rgba(255, 255, 255, 0.9); } /* ========================================================================== MASTHEAD ========================================================================== */ .navbar-brand .dt-lockup { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--dt-navy); text-decoration: none; } .navbar-brand .dt-lockup .mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--dt-navy); flex: none; } .navbar-brand .dt-lockup em { font-style: normal; color: var(--dt-cyan-ink); } /* ========================================================================== POSTS Katen's demo copy is uniformly short. Real headlines are not, so anything that sits in a grid row is clamped rather than left to push its neighbors out of alignment. ========================================================================== */ .post .post-title a, .post .post-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-list-sm .post-title a { -webkit-line-clamp: 2; } .post .excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The theme's thumbs take whatever aspect the image has. Ours are a mix of 16:10 screenshots and 16:10 drawn covers, so they are pinned to one ratio and cropped, which keeps every row of cards on the same baseline. */ .post .thumb .inner img { width: 100%; height: 100%; object-fit: cover; } .post .thumb .inner { aspect-ratio: 16 / 10; } .post-list-sm .thumb .inner, .post-list .thumb .inner { aspect-ratio: 1 / 1; } .featured-post-lg .thumb .inner, .post-over-content .thumb .inner { aspect-ratio: 16 / 9; } /* ========================================================================== REVIEW SCORES Katen has no concept of a score. Three of the pieces carry one, and it is the thing a review reader looks for first, so it gets a badge on the thumb and a star row in the sidebar. ========================================================================== */ .score-badge { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 40px; background: rgba(11, 27, 51, 0.82); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; } .score-badge svg { width: 12px; height: 12px; fill: var(--dt-cyan); } .stars { display: inline-flex; align-items: center; gap: 2px; color: var(--dt-cyan-ink); } .stars svg { width: 15px; height: 15px; } /* ========================================================================== NEWSLETTER Katen's about-widget background is a photograph. Ours is the board. ========================================================================== */ .widget-newsletter { background: var(--dt-navy); background-image: radial-gradient(circle at 88% 12%, rgba(8, 229, 247, 0.3), transparent 55%), radial-gradient(circle at 8% 92%, rgba(8, 229, 247, 0.12), transparent 60%); border-radius: 8px; padding: 32px 26px; color: #fff; } .widget-newsletter h3, .widget-newsletter p { color: #fff; } .widget-newsletter p { opacity: 0.7; } .widget-newsletter .form-control { border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.1); color: #fff; } .widget-newsletter .form-control::placeholder { color: rgba(255, 255, 255, 0.45); } .widget-newsletter .btn { width: 100%; } /* ========================================================================== ODDS AND ENDS ========================================================================== */ /* The theme's category badge is absolute inside .thumb; ours needs the room. */ .post .thumb { position: relative; overflow: hidden; } /* Author avatars: we have no author photographs, so the initial stands in. */ .author-initial { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; background: var(--dt-navy); color: #fff; font-size: 10px; font-weight: 700; vertical-align: middle; } /* A tighter grid on a phone, so the squares still read as squares rather than as two stray lines. This used to set background-size on , left over from when the grid lived there; it moved to ::before and this rule was pointing at nothing. */ @media (max-width: 767px) { body::before { background-size: 64px 64px; } body::after { height: 300px; } } /* ========================================================================== THE BOXED NAV DashCore's, properly this time. The whole bar sits inside one rounded box: hover a beat and that box materializes around the logo, the links and the buttons, then grows downward to hold the panel, over a dimmed page. The first attempt was a full-width dropdown falling out of the bottom of the header, which shares nothing with this but the words "mega menu". The piece that makes it work is .dt-nav-shell: an empty element behind the bar whose height animates from the bar's own height to the bar plus the panel. The bar itself sits on top at z-index 2 and never moves, so the box reads as wrapping the bar rather than appearing beneath it. The header is sticky rather than cloned. js/custom.js used to duplicate the entire header into the DOM to get its scroll effect, which here meant a second copy of five panels and fifteen thumbnails, plus duplicate ids. ========================================================================== */ .dt-nav { position: sticky; top: 0; z-index: 1040; padding: 14px 0; background: transparent; border: 0; transition: padding 0.3s ease; } .dt-nav.is-stuck { padding: 8px 0; } .dt-nav-inner { position: relative; } /* The box. */ .dt-nav-shell { position: absolute; top: 0; left: 0; right: 0; height: 70px; border-radius: 16px; border: 1px solid transparent; background: transparent; box-shadow: none; pointer-events: none; transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .dt-nav.is-stuck .dt-nav-shell { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(21, 47, 96, 0.07); box-shadow: 0 6px 24px rgba(21, 47, 96, 0.07); } .dt-nav.is-open .dt-nav-shell { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(21, 47, 96, 0.08); box-shadow: 0 30px 70px rgba(21, 47, 96, 0.18); } /* The bar. Fixed height, because the shell measures off it. */ .dt-nav-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 70px; padding: 0 22px; } .dt-nav-brand { flex: none; padding: 0; margin: 0; } .dt-nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .dt-nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 9px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #5b6b82; transition: color 0.2s ease, background-color 0.2s ease; } .dt-nav-link:hover, .dt-nav-link[aria-expanded="true"] { color: var(--dt-navy); background: rgba(21, 47, 96, 0.05); } .dt-nav-link.is-current { color: var(--dt-navy); } .dt-caret { width: 11px; height: 11px; transition: transform 0.2s ease; } .dt-nav-link[aria-expanded="true"] .dt-caret { transform: rotate(180deg); } .dt-nav-actions { flex: none; display: flex; align-items: center; gap: 18px; } /* The theme spaces the buttons off the socials with a 50px left margin, which leaves a hole when there are no social accounts wired up yet. */ .dt-nav-actions .header-buttons { margin-left: 0; } .dt-nav-actions .header-buttons .icon-button + .icon-button { margin-left: 8px; } /* The clipped area the panels live in. */ .dt-nav-panels { position: absolute; top: 70px; left: 0; right: 0; z-index: 1; height: 0; overflow: hidden; border-radius: 0 0 16px 16px; transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .dt-nav-panel { position: absolute; top: 0; left: 0; right: 0; padding: 28px 30px 32px; border-top: 1px solid #f0f2f6; opacity: 0; transform: translateX(48px); pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease; } .dt-nav-panel.is-active { opacity: 1; transform: none; pointer-events: auto; } .dt-nav-panel.is-left { transform: translateX(-48px); } .dt-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; } .dt-panel-heading { margin: 0 0 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dt-cyan-ink); } .dt-panel-subs { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; } .dt-panel-subs li { break-inside: avoid; margin-bottom: 4px; } .dt-panel-subs a { display: block; padding: 7px 10px; margin-left: -10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #203656; transition: color 0.15s ease, background-color 0.15s ease; } .dt-panel-subs a:hover { color: var(--dt-cyan-ink); background: rgba(8, 179, 207, 0.07); } .dt-panel-all { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--dt-cyan-ink); } .dt-panel-all svg { width: 14px; height: 14px; transition: transform 0.2s ease; } .dt-panel-all:hover svg { transform: translateX(3px); } .dt-panel-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .dt-panel-card .thumb { display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; margin-bottom: 11px; background: #f3f6f9; } .dt-panel-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .dt-panel-card:hover .thumb img { transform: scale(1.05); } .dt-panel-card .t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.45; color: #203656; transition: color 0.15s ease; } .dt-panel-card:hover .t { color: var(--dt-cyan-ink); } .dt-panel-card .d { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa8bb; } /* The dimmed page behind an open box. */ .dt-nav-backdrop { position: fixed; inset: 0; z-index: 1030; background: rgba(11, 27, 51, 0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .dt-nav-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* Below lg the bar collapses to the logo and the two buttons, and the canvas menu carries the beats. The panels are removed from the layout entirely rather than merely hidden, so nothing measures them. */ @media (max-width: 1199px) { .dt-nav-list, .dt-nav-panels, .dt-nav-backdrop { display: none; } .dt-nav-bar { justify-content: space-between; } } /* ========================================================================== THE HERO Katen's featured image is a fixed 533px and its tab column happens to come out near the same height. Ours does not: four recent pieces make the right column 697px, which left 164px of white under the lead post and read as a layout bug rather than as breathing room. The image fills the row instead. Both columns then end on the same line whatever the tab column happens to contain, which is the property that was missing - a fixed height only ever agrees with one column by luck. ========================================================================== */ @media (min-width: 992px) { /* Every width here is stated rather than inherited from content. The first version of this let each box shrink-wrap its child, which works only while the image inside is in flow with an intrinsic width - and the image is absolutely positioned two rules down, so the whole chain collapsed to zero and the gap came back wider than before. Heights come down the chain instead: the row stretches the column, the column stretches the post, the post stretches the thumb, and the thumb stretches the inner. 533px is the floor the theme picked, kept as a minimum so a short tab column cannot squash the lead image. */ #hero .col-lg-8 { display: flex; } #hero .featured-post-lg { display: flex; flex-direction: column; width: 100%; } #hero .featured-post-lg .thumb { display: flex; flex: 1 1 auto; width: 100%; } /* dt_thumb() wraps .inner in the link, so the flex child of .thumb is that and not .inner at all. Skip this and the chain stops here: the link stretches, the inner inside it shrink-wraps to nothing, and the measurements read as though none of the rules above applied. */ #hero .featured-post-lg .thumb > a { display: flex; flex: 1 1 auto; width: 100%; } #hero .featured-post-lg .thumb .inner { flex: 1 1 auto; width: 100%; height: auto; min-height: 533px; aspect-ratio: auto; } } /* ========================================================================== ARTICLE PAGE ========================================================================== */ .post-single .featured-image img { width: 100%; border-radius: 8px; } .about-author { background: rgba(255, 255, 255, 0.86); display: flex; gap: 24px; } .about-author .thumb { flex: none; width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dt-navy); color: #fff; font-size: 30px; font-weight: 800; } .comment .thumb { flex: none; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dt-cyan-ink); color: #fff; font-size: 17px; font-weight: 700; } /* A note for whoever replaces the placeholder comments with a real table: every generated one carries data-placeholder="1" in the markup, so grepping for it finds all of them at once. */ /* ========================================================================== THE VERDICT BOX On a piece that carries a score, above the body. Katen has no equivalent - its single-post page goes straight from the featured image into the copy - and a number a reader came for should not be three scrolls down. ========================================================================== */ .verdict { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(2px); } .verdict-score { flex: none; min-width: 96px; padding-right: 22px; border-right: 1px solid #ebebeb; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--dt-navy); } .verdict-score small { font-size: 17px; font-weight: 700; color: var(--dt-cyan-ink); } /* ========================================================================== CATEGORY PAGE ========================================================================== */ /* The subcategory rail. Katen's tag pills, with a state for the current one. */ .widget-tags a.active { background: var(--dt-navy); border-color: var(--dt-navy); color: #fff; } /* The grid card's bottom bar. Katen fills it with a six-icon share tray whose links all point at '#'; ours carries the score or the beat, which needs the row to breathe rather than to be a button strip. */ .post-grid .post-bottom { padding: 14px 20px; border-top: 1px solid #ebebeb; font-size: 13px; } .post-grid .post-bottom .stars svg { width: 13px; height: 13px; } /* Cards in a row are only level if their bodies are. */ .post-grid { display: flex; flex-direction: column; height: 100%; } .post-grid .details { flex: 1 1 auto; } /* ========================================================================== CONTACT PAGE Katen's contact tiles size their icon off a font-size the theme sets on .contact-item .icon. Three tiles of different label lengths still need to be the same height, or the row steps down like a staircase. ========================================================================== */ .contact-item { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(2px); height: 100%; } .contact-item .details h3 { font-size: 17px; } /* ========================================================================== THUMBNAILS NEED A WIDTH OF THEIR OWN The theme sizes its list thumbnails with max-width on a float, and lets the image's own intrinsic width do the rest: a 1200px image inside a float capped at 110px settles at 110px. That only works while the browser knows how wide the image is. Ours are loading="lazy", so before one is fetched its intrinsic width is zero, the float shrinks to zero, and a zero-sized box never intersects the viewport, so it is never fetched. The thumbnail column in the hero tabs sat blank for exactly that reason, and it is the kind of bug that comes and goes with cache state rather than staying put. A real width breaks the loop. Nothing here changes how anything looks once the images are in cache; it changes whether the layout depends on them. ========================================================================== */ .post.post-list-sm.square .thumb { width: 110px; } .post.post-list-sm.circle .thumb { width: 60px; } .post.post-list .thumb { width: 265px; } .post.post-list-sm .thumb .inner, .post.post-list .thumb .inner { width: 100%; } @media only screen and (max-width: 767px) { /* The theme unfloats this one and lets it run wide. */ .post.post-list .thumb { width: 100%; max-width: 550px; } } /* ========================================================================== THE HERO IMAGE, PART TWO Stretching .inner to fill the row is not enough on its own: the image inside it asks for height: 100%, and a percentage height against a parent whose height comes from flex stretch rather than from a specified value does not resolve. The image kept its own 1200x655 proportions and left a band of overlay under it. Taking it out of flow against a positioned .inner gives it a definite box to fill. That is also why every width in the rule above has to be stated: an absolutely positioned image contributes nothing to its parent's width. ========================================================================== */ #hero .featured-post-lg .thumb .inner { position: relative; } #hero .featured-post-lg .thumb .inner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== OVERLAYS HAVE TO CLEAR THE STICKY HEADER The theme stacks its three overlays at z-index 5 and 6, which was above everything back when the header scrolled away with the page. The header is sticky at 1040 now, so all three opened UNDER it: the search overlay covered the page and left the nav floating on top of its own white sheet, and the canvas menu did the same. ========================================================================== */ .search-popup { z-index: 1080; } .canvas-menu { z-index: 1070; } .site-wrapper .main-overlay { z-index: 1060; } /* And the search overlay fades rather than growing. The theme animates it with `growOut`, a scale from zero written for a small dropdown panel, applied here to a fixed full-screen sheet. Chrome does not rasterize the result: the element is there, hit-testing finds it on top, computed opacity and visibility are both right, and nothing is drawn. Verified in headless Chromium, where disabling that one animation makes it appear. A fade is the correct effect for a full-screen overlay anyway. */ .search-popup.visible { animation: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .search-popup .search-content { width: min(650px, calc(100% - 48px)); } /* ========================================================================== THE SUBCATEGORY RAIL The theme's tag pills are styled inside .widget, so borrowing the class on a category page gave plain links with one of them wearing a bare black rectangle. This is its own component. ========================================================================== */ .dt-rail { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 28px; padding: 0; } .dt-rail a { display: inline-block; padding: 7px 15px; border: 1px solid #e6eaf0; border-radius: 40px; background: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 600; color: #5b6b82; transition: all 0.18s ease; } .dt-rail a:hover { border-color: var(--dt-cyan-ink); color: var(--dt-cyan-ink); } .dt-rail a.is-active { border-color: var(--dt-navy); background: var(--dt-navy); color: #fff; } /* ========================================================================== THE CANVAS MENU Its .logo slot expects the theme's wordmark. Ours is the drawn lockup, which came out small and washed against the panel. ========================================================================== */ .canvas-menu .logo { margin-bottom: 34px; } .canvas-menu .dt-lockup { font-size: 20px; } .canvas-menu .dt-lockup .mark { width: 34px; height: 34px; border-radius: 10px; } .canvas-menu .vertical-menu > li > a { font-weight: 600; }