/* Deckcipher eligible-page redesign system. Everything in this file is scoped under the `.dc-redesign` ancestor class, which is added to only on pages that are eligible for the redesign. It is never added to play/index.html or blog/article/index.html, so this file has zero visual effect there even though they could theoretically load it. Existing rule bodies in content.css are never overridden globally, only from within this scope, and no class names are renamed anywhere. Load order on eligible pages: fonts.css, content.css, then redesign.css. */ /* ------------------------------------------------------------------ */ /* Layout primitives */ /* ------------------------------------------------------------------ */ .dc-redesign .page-shell { max-width: var(--content-max); } .dc-redesign .page-shell.is-home { max-width: var(--content-max-wide); } .dc-redesign .dc-section { display: grid; gap: var(--space-4); padding: var(--space-8) 0; } .dc-redesign .dc-section + .dc-section { border-top: 1px solid var(--border); } @media (max-width: 720px) { .dc-redesign .dc-section { padding: var(--space-7) 0; } } .dc-redesign .dc-section-head { display: grid; gap: var(--space-2); max-width: 62ch; } .dc-redesign .dc-stack { display: grid; gap: var(--space-4); } .dc-redesign .dc-stack-tight { display: grid; gap: var(--space-2); } .dc-redesign .dc-stack-loose { display: grid; gap: var(--space-6); } .dc-redesign .dc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .dc-redesign .dc-grid-2 { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .dc-redesign .dc-grid-3 { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Asymmetric split layouts: content column vs. supporting rail. */ .dc-redesign .dc-split-7-5, .dc-redesign .dc-split-8-4, .dc-redesign .dc-split-2-1, .dc-redesign .dc-split-3-2 { display: grid; gap: var(--space-6); align-items: start; } @media (min-width: 860px) { .dc-redesign .dc-split-7-5 { grid-template-columns: 7fr 5fr; } .dc-redesign .dc-split-8-4 { grid-template-columns: 8fr 4fr; } .dc-redesign .dc-split-2-1 { grid-template-columns: 2fr 1fr; } .dc-redesign .dc-split-3-2 { grid-template-columns: 3fr 2fr; } } .dc-redesign .dc-reading { max-width: var(--reading-max); } /* ------------------------------------------------------------------ */ /* Typography */ /* ------------------------------------------------------------------ */ .dc-redesign .page-title { line-height: 1.05; } .dc-redesign .tool-section-heading { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: var(--space-1); } .dc-redesign .dc-eyebrow-row { display: flex; align-items: center; gap: var(--space-2); } /* Reading-width long-form guides get calmer line length + line-height, matching the brief's editorial ratios (used opt-in via .dc-reading .prose). */ .dc-redesign .dc-reading.prose, .dc-redesign .dc-reading .prose { line-height: 1.62; } /* ------------------------------------------------------------------ */ /* Surface de-emphasis: fewer decorative boxes, one visible panel depth */ /* ------------------------------------------------------------------ */ /* .is-plain strips the boxed treatment from a shared surface class when it is being used purely to group static/informational content rather than to present an independently clickable, comparable, or functional/result object. The element keeps its layout (grid/gap/padding rules still apply via the base class) but loses border/background/shadow/blur so hierarchy comes from typography and spacing instead. */ .dc-redesign .tool-card.is-plain, .dc-redesign .page-card.is-plain, .dc-redesign .seo-content-section.is-plain { background: none; border: none; box-shadow: none; backdrop-filter: none; } /* When several plain flow sections stack directly (e.g. the blog hub's hero/feature/more/topics sections), separate them with a divider and generous rhythm instead of each keeping its own tight card padding. */ .dc-redesign .tool-card.is-plain + .tool-card.is-plain { border-top: 1px solid var(--border); margin-top: var(--space-6); padding-top: var(--space-7); } .dc-redesign .tool-card { border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(0,0,0,0.18); } .dc-redesign .tool-card-feature { border-radius: var(--radius-lg); } .dc-redesign .page-card { border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(0,0,0,0.18); } .dc-redesign .worked-example-card, .dc-redesign .seo-note-card, .dc-redesign .related-tool-card { border-radius: var(--radius-md); border-color: var(--border); box-shadow: none; } .dc-redesign .related-tool-card:hover, .dc-redesign .related-tool-card:focus-visible { border-color: var(--border-strong); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)), rgba(13,13,18,0.56); } /* Only the .is-tools / .is-collections / .is-guides / .is-explore accent border tint (used on the directory hub, where category IS the point) keeps its color-coded border; the default related-tool-card elsewhere reads as a neutral list item, not a rainbow of card borders. */ .dc-redesign .faq-page-list details { border-radius: var(--radius-sm); border: none; border-bottom: 1px solid var(--border); background: none; padding: var(--space-3) 0; } .dc-redesign .faq-page-list details:last-child { border-bottom: none; } .dc-redesign .footer-section { border-radius: var(--radius-md); box-shadow: none; } /* ------------------------------------------------------------------ */ /* Button hierarchy: one dominant primary, everything else lower emphasis */ /* ------------------------------------------------------------------ */ .dc-redesign .primary-link { border-color: rgba(201,168,76,0.5); background: linear-gradient(180deg, var(--accent-soft), var(--accent)); color: var(--bg); box-shadow: 0 14px 30px rgba(201,168,76,0.22); font-weight: 700; } .dc-redesign .primary-link:hover, .dc-redesign .primary-link:focus-visible { background: linear-gradient(180deg, #f6e2a4, var(--accent-soft)); color: var(--bg); } .dc-redesign .back-link { border-color: transparent; background: none; box-shadow: none; backdrop-filter: none; color: var(--text-2); } .dc-redesign .back-link:hover, .dc-redesign .back-link:focus-visible { color: var(--text-1); background: var(--surface-panel-soft); } /* Optional size modifiers, additive (existing markup is unaffected unless a page opts in by adding the class). */ .dc-redesign .is-compact.primary-link, .dc-redesign .is-compact.back-link { min-height: var(--control-h-compact); padding: 0 var(--space-4); } .dc-redesign .is-prominent.primary-link, .dc-redesign .is-prominent.back-link { min-height: var(--control-h-prominent); padding: 0 var(--space-6); font-size: 1.02rem; } /* A ghost variant for a page region's lowest-priority action, when a plain text link isn't appropriate (e.g. sits next to other buttons). */ .dc-redesign .back-link.is-ghost { border: 1px solid var(--border); } /* ------------------------------------------------------------------ */ /* Purpose-built surface components (net-new, no collision with existing */ /* class names, so nothing renders unless a page opts in). */ /* ------------------------------------------------------------------ */ /* Callout: a genuine aside/alert, distinct from a card used just for grouping. */ .dc-redesign .dc-callout { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-sm); border-left: 3px solid var(--border-strong); background: var(--surface-band); } .dc-redesign .dc-callout-title { margin: 0; color: var(--text-1); font-weight: 700; font-size: 0.95rem; } .dc-redesign .dc-callout p { margin: 0; color: var(--text-2); } .dc-redesign .dc-callout.is-tip { border-left-color: var(--accent); } .dc-redesign .dc-callout.is-warning { border-left-color: var(--red-text); } /* Stat: a single labeled number, for summary rows (not a clickable card). */ .dc-redesign .dc-stat { display: grid; gap: var(--space-1); } .dc-redesign .dc-stat-value { color: var(--text-1); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; } .dc-redesign .dc-stat-label { color: var(--text-2); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; } .dc-redesign .dc-stat-row { display: flex; flex-wrap: wrap; gap: var(--space-6); } /* Empty state: centered, restrained, for zero-result tool/search states. */ .dc-redesign .dc-empty-state { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-4); text-align: center; color: var(--text-2); } /* Feature panel: the one large, genuinely-emphasized visual area per page (hero-adjacent), distinct from an ordinary .tool-card used for lists. */ .dc-redesign .dc-feature-panel { border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.016)), var(--surface-glass); box-shadow: 0 24px 60px rgba(0,0,0,0.26); padding: var(--space-6); } /* ------------------------------------------------------------------ */ /* Homepage (index.html) — one-off bespoke classes, standardized radius */ /* and lighter card treatment for the supporting/pain-point rows. */ /* ------------------------------------------------------------------ */ .dc-redesign .landing-hero { border-radius: var(--radius-lg); } .dc-redesign .lp-pain-card, .dc-redesign .lp-tool-card { border-radius: var(--radius-md); box-shadow: none; } .dc-redesign .lp-preview-card { border-radius: var(--radius-md); } .dc-redesign .lp-final-cta { padding-top: var(--space-7); } /* ------------------------------------------------------------------ */ /* Homepage "Browse by goal" — a compact, low-weight signpost for the */ /* five tool categories. Quiet links, not competing tool cards, so the */ /* hero audit stays the single dominant action. */ /* ------------------------------------------------------------------ */ .dc-redesign .lp-goals-section { /* Match the width and gutters of the other homepage sections (.lp-pain-section / .lp-tools-section) so the heading and cards line up with the rows above instead of sitting wider. */ width: min(100%, 1280px); margin-top: var(--space-8, 64px); margin-inline: auto; padding-inline: 16px; } @media (min-width: 760px) { .dc-redesign .lp-goals-section { padding-inline: 24px; } } .dc-redesign .lp-goals-lead { max-width: 60ch; margin: var(--space-2, 8px) 0 var(--space-5, 24px); color: var(--text-2); } .dc-redesign .lp-goals-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4, 16px); } .dc-redesign .lp-goal { margin: 0; } .dc-redesign .lp-goal-link { display: flex; align-items: flex-start; gap: var(--space-3, 12px); height: 100%; min-height: 44px; padding: var(--space-4, 16px); border: 1px solid var(--border); border-radius: var(--radius-md, 16px); background: var(--surface-panel, rgba(255, 255, 255, 0.03)); color: inherit; text-decoration: none; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; } .dc-redesign .lp-goal-link:hover, .dc-redesign .lp-goal-link:focus-visible { border-color: var(--border-strong, rgba(255, 255, 255, 0.18)); background: var(--surface-2, rgba(255, 255, 255, 0.04)); transform: translateY(-1px); } .dc-redesign .lp-goal-icon { display: inline-flex; flex: 0 0 auto; color: var(--text-2); } .dc-redesign .lp-goal-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dc-redesign .lp-goal-name { font-weight: 700; font-size: 1rem; color: var(--text-1); } .dc-redesign .lp-goal-desc { font-size: 0.875rem; line-height: 1.5; color: var(--text-2); } .dc-redesign .lp-goals-all { display: inline-flex; align-items: center; gap: var(--space-1, 4px); margin-top: var(--space-5, 24px); min-height: 44px; color: var(--accent-soft, var(--accent)); font-weight: 600; text-decoration: none; } .dc-redesign .lp-goals-all:hover, .dc-redesign .lp-goals-all:focus-visible { text-decoration: underline; } /* ------------------------------------------------------------------ */ /* Blog listing (blog/index.html) — the article-preview link cards */ /* (feature/more/topic) get the same lighter, standardized treatment */ /* as .related-tool-card. Individual article pages are unaffected since */ /* they use a distinct set of blog-article-* / blog-card-* classes not */ /* touched here, and never carry .dc-redesign. */ /* ------------------------------------------------------------------ */ .dc-redesign .blog-more-link, .dc-redesign .blog-topic-link, .dc-redesign .blog-feature-link { border-radius: var(--radius-md); border-color: var(--border); box-shadow: none; } .dc-redesign .blog-tools-bridge { border-radius: var(--radius-lg); box-shadow: none; } /* Mouse drag-to-scroll affordance for the "More Commander guides" track. */ .dc-redesign .blog-more-track { cursor: grab; } .dc-redesign .blog-more-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } /* Gated on is-drag-scrolling (only set once real pointer movement is confirmed), not is-dragging (set on every pointerdown): disabling the card's pointer-events immediately on press made it unhittable for the rest of the gesture, including a plain click that never became a drag -- the click's native target fell through to this track div instead and the link never navigated. */ .dc-redesign .blog-more-track.is-drag-scrolling .blog-more-card { pointer-events: none; }