/* ========================================= TitanDrill Reusable Components Version 1.2 Scope: Global reusable Gutenberg components Governance: - Blocksy Global Design System - TitanDrill UI Component Architecture ========================================= */ /* ========================================= 01. SECTION COMPONENT ========================================= */ /* Usage: Group class: td-section Responsibility: - Standard section vertical spacing - Responsive section spacing Default spacing: Desktop: 64px Tablet: 48px Mobile: 40px Does NOT control: - Typography - Colors - Buttons */ .td-section { padding-top: 64px; padding-bottom: 64px; } /* ========================================= LARGE TOP MODIFIER ========================================= */ /* Usage: td-section td-section--large-top Desktop: Top 96px Bottom 64px */ .td-section--large-top { padding-top: 96px; } /* ========================================= LARGE BOTTOM MODIFIER ========================================= */ /* Usage: td-section td-section--large-bottom Desktop: Top 64px Bottom 96px */ .td-section--large-bottom { padding-bottom: 96px; } /* ========================================= LARGE VERTICAL MODIFIER ========================================= */ /* Usage: td-section td-section--large-vertical Desktop: Top 96px Bottom 96px */ .td-section--large-vertical { padding-top: 96px; padding-bottom: 96px; } /* ========================================= ZERO SPACING MODIFIERS ========================================= */ /* Usage: td-section td-section--no-top Desktop: Top 0 Bottom 64px */ .td-section--no-top { padding-top: 0; } /* Usage: td-section td-section--no-bottom Desktop: Top 64px Bottom 0 */ .td-section--no-bottom { padding-bottom: 0; } /* ========================================= TABLET <= 999px ========================================= */ @media (max-width: 999px) { .td-section { padding-top: 48px; padding-bottom: 48px; } /* Large Top */ .td-section--large-top { padding-top: 72px; } /* Large Bottom */ .td-section--large-bottom { padding-bottom: 72px; } /* Large Vertical */ .td-section--large-vertical { padding-top: 72px; padding-bottom: 72px; } /* Zero modifiers must remain after all standard / large modifiers. */ .td-section--no-top { padding-top: 0; } .td-section--no-bottom { padding-bottom: 0; } } /* ========================================= MOBILE <= 767px ========================================= */ @media (max-width: 767px) { .td-section { padding-top: 40px; padding-bottom: 40px; } /* Large Top */ .td-section--large-top { padding-top: 56px; } /* Large Bottom */ .td-section--large-bottom { padding-bottom: 56px; } /* Large Vertical */ .td-section--large-vertical { padding-top: 56px; padding-bottom: 56px; } /* Zero modifiers must remain last so they override all spacing variants. */ .td-section--no-top { padding-top: 0; } .td-section--no-bottom { padding-bottom: 0; } } /* ========================================= 02. SPLIT SECTION COMPONENT ========================================= */ /* Used for: Image + Content layouts Example: Method Overview Method How It Works Capability Sections Structure: Group class: td-section td-split-section Columns Column Image Column Content */ .td-split-section.wp-block-columns { align-items:center; gap:112px; } .td-split-section > .wp-block-column { display:flex; flex-direction:column; justify-content:center; } /* ========================================= Top Alignment Modifier Used for: Text + Text split layouts ========================================= */ .td-split-section--top.wp-block-columns { align-items:flex-start; } .td-split-section--top > .wp-block-column { justify-content:flex-start; } /* Image alignment Prevent image stretching issue */ .td-split-section .wp-block-image { margin-top:0; margin-bottom:0; } .td-split-section img { width:100%; height:auto; } /* Tablet */ @media(max-width:999px){ .td-split-section.wp-block-columns { gap:64px; } } /* Mobile */ @media(max-width:767px){ .td-split-section.wp-block-columns { display:flex; flex-direction:column; gap:40px; } .td-split-section > .wp-block-column { width:100%; } } /* ========================================= 03. INFO BOX COMPONENT ========================================= */ /* Structure: .td-info-box | .td-info-box__label | .td-info-box__content Used for: - Engineering Summary - Key Selection Factors - Technical Notes */ .td-info-box { width:100%; margin-top:32px; padding:24px 28px; border-left:3px solid var(--theme-palette-color-1); background-color:var(--theme-palette-color-8); } /* Label */ .td-info-box__label { margin:0 0 16px; color:var(--theme-palette-color-3); font-size:12px; font-weight:700; letter-spacing:1.5px; line-height:1.4; text-transform:uppercase; } /* Content */ .td-info-box__content { color:var(--theme-palette-color-5); } .td-info-box__content > :first-child { margin-top:0; } .td-info-box__content > :last-child { margin-bottom:0; } /* Paragraph */ .td-info-box__content p { margin:0 0 16px; } /* List */ .td-info-box__content ul, .td-info-box__content ol { margin:12px 0 0; padding-left:24px; } .td-info-box__content li { margin-bottom:4px; } .td-info-box__content li:last-child { margin-bottom:0; } /* ========================================= TD COVER ALIGNMENT SYSTEM Purpose: Align Gutenberg Cover content with Blocksy container system. Used by: - Hero - Compact Hero - CTA Do NOT add manual padding. Uses Blocksy global container variable. ========================================= */ .td-cover.wp-block-cover { padding-left:0; padding-right:0; } .td-cover.wp-block-cover .wp-block-cover__inner-container { width:100%; max-width:var(--theme-container-width); margin-left:auto; margin-right:auto; } /* ========================================= 02. HERO COMPONENT ========================================= */ /* Structure: Cover Block class: td-hero Group class: td-hero__content Responsibility: - Hero content width adaptation - Hero spacing - Responsive behavior Does NOT control: - Background image - Overlay - Typography colors - Button style */ .td-hero { position:relative; box-sizing:border-box; } /* ========================================= Homepage Hero Full viewport hero ========================================= */ .td-hero--home { height:100svh; min-height:0; display:flex; align-items:center; } /* ========================================= Compact Hero Standard inner-page hero ========================================= */ .td-hero--compact { min-height:0; height:auto; display:flex; align-items:center; padding-top:96px; padding-bottom:96px; } @media(max-width:999px){ .td-hero--compact { padding-top:72px; padding-bottom:72px; } } @media(max-width:767px){ .td-hero--compact { padding-top:56px; padding-bottom:56px; } } /* Desktop: Gutenberg controls: Content Width */ .td-hero__content { width:auto; } /* Tablet Override Gutenberg constrained children */ @media(max-width:999px){ .td-hero__content.is-layout-constrained > :where( :not(.alignleft):not(.alignright):not(.alignfull) ){ width:100%; max-width:100%; } } /* ========================================= CARD COMPONENT TitanDrill Reusable Card System ========================================= */ /* Card Wrapper */ .td-card { display:flex; flex-direction:column; height:100%; background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-palette-color-6); border-radius:0; overflow:hidden; transition: border-color .25s ease, box-shadow .25s ease; } .td-card:hover { border-color: var(--theme-palette-color-1); box-shadow: 0 12px 20px -8px rgba(31,35,39,.12); } /* ========================================= Card Image Used when: td-card--media ========================================= */ .td-card > .wp-block-image { margin:0; } .td-card--media > .wp-block-image { width:100%; aspect-ratio:4 / 3; overflow:hidden; background-color: var(--theme-palette-color-7, #f8f9fa); } .td-card--media > .wp-block-image a { display:block; width:100%; height:100%; } .td-card--media > .wp-block-image img { display:block; width:100%; height:100%; object-fit:cover; } /* ========================================= Card Content ========================================= */ .td-card-content { display:flex; flex-direction:column; flex:1; padding:32px; } /* Media Card Modifier Image Card: Method Cards Product Cards */ .td-card--media .td-card-content { padding-top:24px; } /* ========================================= Title ========================================= */ .td-card-content h3 { margin:0 0 14px; font-size:22px; line-height:1.25; font-weight:800; letter-spacing:-0.02em; color: var(--theme-palette-color-3); } .td-card-content h3 a { color:inherit; text-decoration:none; transition: color .25s ease; } .td-card-content h3 a:hover, .td-card-content h3 a:focus { color: var(--theme-palette-color-1); } /* ========================================= Description ========================================= */ .td-card-content p { margin:0 0 24px; font-size:15px; line-height:1.6; color: var(--theme-palette-color-5); } /* Remove last paragraph spacing Prevent CTA extra gap */ .td-card-content > p:last-child { margin-bottom:0; } /* ========================================= CTA Link ========================================= */ .td-card-link { margin-top:auto; font-size:15px; } .td-card-link a { color: var(--theme-palette-color-1); font-weight:700; text-decoration:none; } .td-card-link a:hover { color: var(--theme-palette-color-2); } /* ========================================================== Card Grid Component Override Gutenberg Columns Layout ========================================================== */ .td-card-grid { display:grid !important; gap:32px; } /* ========================================================== Card Grid Modifier 4 Column Layout Used for: - Method Hub Cards - Product / Application Cards ========================================================== */ .td-card-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); } /* Tablet */ @media(max-width:1199px){ .td-card-grid--4 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } /* Mobile */ @media(max-width:767px){ .td-card-grid--4 { grid-template-columns: 1fr !important; } } /* ========================================================== Card Grid Modifier 3 Column Layout Used for: - Application Recommended Methods ========================================================== */ .td-card-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); } /* Tablet */ @media(max-width:1199px){ .td-card-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } /* Mobile */ @media(max-width:767px){ .td-card-grid--3 { grid-template-columns: 1fr !important; } } /* Reset Gutenberg Column */ .td-card-grid > .wp-block-column { margin:0; width:auto; flex-basis:auto; } .td-card-grid > .wp-block-column { display:flex; } .td-card-grid .td-card { width:100%; } /* ========================================================== PRODUCT CARD COMPONENT TitanDrill Reusable Product Discovery Card Used by: - Product Category Available Products - Single Product Related Products - Future Product Discovery Contexts Structure: .td-product-card-grid .td-product-card .td-product-card__image .td-product-card__meta .td-product-card__model .td-product-card__title Responsibility: - Compact product discovery layout - 4:3 product image frame - Product image containment - Model + product title hierarchy - Whole-card interaction - Responsive product grid Does NOT control: - Section spacing - Pagination - Product query logic ========================================================== */ /* ========================================================== Product Card Grid ========================================================== */ .td-product-card-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:32px; width:100%; } /* ========================================================== Product Card ========================================================== */ .td-product-card { display:flex; flex-direction:column; min-width:0; height:100%; overflow:hidden; background-color: var(--theme-palette-color-8, #ffffff); border: 1px solid var(--theme-palette-color-6, #e5e7eb); border-radius:0; color:inherit; text-decoration:none !important; transition: border-color .25s ease, box-shadow .25s ease; } .td-product-card:hover, .td-product-card:focus-visible { border-color: var(--theme-palette-color-1, #f14000); box-shadow: 0 12px 20px -8px rgba(31,35,39,.12); color:inherit; text-decoration:none; } .td-product-card:focus-visible { outline: 2px solid var(--theme-palette-color-1, #f14000); outline-offset:2px; } /* ========================================================== Product Image ========================================================== */ .td-product-card__image { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:4 / 3; overflow:hidden; background-color: var(--theme-palette-color-8, #ffffff); border-bottom: 1px solid var(--theme-palette-color-6, #e5e7eb); } .td-product-card__image img { display:block; width:100%; height:100%; padding:12px; object-fit:contain; box-shadow:none !important; } /* Image fallback */ .td-product-card__image-fallback { width:100%; height:100%; background-color: var(--theme-palette-color-7, #f8f9fa); } /* ========================================================== Product Meta ========================================================== */ .td-product-card__meta { display:flex; flex-direction:column; flex:1; gap:6px; min-width:0; padding:20px; } /* ========================================================== Product Model ========================================================== */ .td-product-card__model { color: var(--theme-palette-color-5, #4a4f55); font-size:11px; font-weight:600; line-height:1.2; letter-spacing:.1em; text-transform:uppercase; overflow-wrap:anywhere; } /* ========================================================== Product Title ========================================================== */ .td-product-card__title { margin:0; color: var(--theme-palette-color-3, #1f2937); font-size:15px; font-weight:700; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; transition: color .25s ease; } .td-product-card:hover .td-product-card__title, .td-product-card:focus-visible .td-product-card__title { color: var(--theme-palette-color-1, #f14000); } /* ========================================================== Product Card Responsive ========================================================== */ /* Tablet */ @media(max-width:999px){ .td-product-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:24px; } } /* Mobile */ @media(max-width:767px){ .td-product-card-grid { grid-template-columns:1fr; gap:20px; } .td-product-card__meta { padding:18px; } } /* ========================================================================== TitanDrill Feature Panel Shared Discovery Component ========================================================================== */ .td-feature-panel { display:flex; flex-direction:column; height:100%; background-color:var(--theme-palette-color-8, #ffffff); border:1px solid var(--theme-palette-color-6, #e5e7eb); border-radius:0; transition: border-color .25s ease, box-shadow .25s ease; } .td-feature-panel:hover { border-color: var(--theme-palette-color-1); box-shadow: 0 12px 24px rgba(0,0,0,.08); } .td-feature-panel-content { display:flex; flex-direction:column; flex:1; padding:32px; } .td-feature-panel > .wp-block-image { margin:0; } .td-feature-panel-content > *:first-child { margin-top:0; } /* Reset Gutenberg spacing */ .td-feature-panel h3, .td-feature-panel p { margin-top:0; } /* Title */ .td-feature-panel h3 { margin-top:0; margin-bottom:24px; } /* Product Links */ .td-feature-panel-links { display:flex; flex-direction:column; gap:10px; } .td-feature-panel-links p { margin:0; } .td-feature-panel-links a { text-decoration:none; } .td-feature-panel-links a:hover { color: var(--theme-palette-color-1); } /* Bottom CTA */ .td-feature-panel-action { margin-top:auto; } .td-feature-panel-action a { color: var(--theme-palette-color-1); font-weight:700; text-decoration:none; } .td-feature-panel-action a:hover { color: var(--theme-palette-color-2); } /* ======================================== Feature Panel Grid ======================================== */ .td-feature-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px; align-items:stretch; } .td-feature-panel { display:flex; flex-direction:column; } .td-feature-panel > .wp-block-image { aspect-ratio:16 / 9; overflow:hidden; margin:0; } .td-feature-panel > .wp-block-image img { width:100%; height:100%; object-fit:cover; } @media (max-width:768px){ .td-feature-grid { gap:24px; } } @media (max-width:640px){ .td-feature-grid { grid-template-columns:1fr; } } /* ========================================================== TitanDrill Icon Card Component ========================================================== */ /* ========================================================== TitanDrill Icon Grid ========================================================== */ /* Base */ .td-icon-grid { display:grid !important; gap:24px; } /* 2 Column Modifier */ .td-icon-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); } .td-icon-card { display:flex; flex-direction:column; height:100%; padding:24px; background-color: var(--theme-palette-color-8,#ffffff); border: 1px solid var(--theme-palette-color-6,#e5e7eb); border-radius:0; transition: border-color .25s ease, box-shadow .25s ease; } .td-icon-card:hover { border-color: var(--theme-palette-color-1,#F14000); box-shadow: 0 12px 20px -8px rgba(31,35,39,.12); } /* Icon */ .td-icon-card__icon { width:24px; line-height:0; } .td-icon-card__icon img, .td-icon-card__icon svg { display:block; width:24px; height:24px; } /* Icon Card With Bottom Action */ .td-icon-card--link p { flex:1; } .td-icon-card--link .td-card-link { margin-top:auto; } /* Tablet */ @media(max-width:1024px){ .td-icon-grid { gap:20px; } .td-icon-card { padding:22px; } } /* Mobile */ @media(max-width:767px){ .td-icon-grid--2 { grid-template-columns:1fr !important; } .td-icon-grid { gap:18px; } .td-icon-card { padding:20px; } .td-icon-card__icon, .td-icon-card__icon img, .td-icon-card__icon svg { width:20px; height:20px; } } /* ======================================== CTA ======================================== */ .td-cta { min-height:400px; display:flex; align-items:center; } .td-cta__content { position:relative; z-index:2; width:100%; padding-top:64px; padding-bottom:64px; } @media(max-width:999px){ .td-cta__content { padding-top:48px; padding-bottom:48px; } } @media(max-width:767px){ .td-cta { min-height:360px; } .td-cta__content { padding-top:40px; padding-bottom:40px; } } /* ======================================== TitanDrill Button Component Secondary Button Hover ======================================== */ .td-btn-secondary .wp-block-button__link { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .td-btn-secondary .wp-block-button__link:hover, .td-btn-secondary .wp-block-button__link:focus { background-color: var(--theme-palette-color-8) !important; color: var(--theme-palette-color-3) !important; border-color: var(--theme-palette-color-8) !important; } /* ========================================= BUTTON LAYOUT COMPONENT Purpose: Responsive button stacking Used by: - Hero - CTA - Future Conversion Sections Does NOT control: - Button colors - Button styles ========================================= */ /* ========================================= Button Actions Purpose: Standard content → button group spacing Usage: Add to Gutenberg Buttons block: td-actions Desktop: Top spacing 64px ========================================= */ .td-actions { margin-top:64px; } .td-actions--compact { margin-top:40px; } /* Tablet */ @media(max-width:999px){ .td-actions { margin-top:48px; } .td-actions--compact { margin-top:32px; } } /* Mobile */ @media(max-width:767px){ .td-actions { margin-top:40px; } .td-actions--compact { margin-top:24px; } .wp-block-buttons { width:100%; flex-direction:column; align-items:stretch; } .wp-block-button { width:100%; } .wp-block-button__link { width:100%; text-align:center; } } /* ========================================================================== FAQ COMPONENT ========================================================================== */ /* * Shared FAQ Accordion Component * * Used by: * * - Method Pages * - Product Category Pages * - Product Pages * - Application Pages * - Gutenberg static pages using Details * - Future shared FAQ contexts * * Supported interaction models: * * - Gutenberg Details: * .td-faq-item[open] * * - PHP Shared FAQ: * .td-faq-toggle[aria-expanded="true"] */ /* ========================================================================== FAQ SECTION ========================================================================== */ /* * FAQ component identity only. * * Section vertical spacing is owned by: * - .td-section * - .td-section--large-top * - .td-section--large-bottom * - .td-section--large-vertical * - .td-section--no-top * - .td-section--no-bottom * * PHP Shared FAQ Engine outputs .td-section by default. * Page contexts may add spacing modifiers when needed. */ .td-faq-section { width:100%; } /* ========================================================================== FAQ HEADER ========================================================================== */ /* * Shared FAQ fallback header. * * Used when a page does not provide its own * shared section-header renderer. * * Controls only: * - H2 reset * - Header → FAQ list spacing * * Does NOT control: * - FAQ section top / bottom padding */ .td-faq-header { width:100%; margin:0 0 48px; } .td-faq-title { margin:0; } .td-faq-intro { width:100%; max-width:720px; margin-top:24px; color: var(--theme-palette-color-5); } .td-faq-intro > :first-child { margin-top:0; } .td-faq-intro > :last-child { margin-bottom:0; } /* Tablet */ @media(max-width:999px){ .td-faq-header { margin-bottom:40px; } } /* Mobile */ @media(max-width:767px){ .td-faq-header { margin-bottom:32px; } } /* ========================================= FAQ LIST ========================================= */ .td-faq-list { display:flex !important; flex-direction:column; gap:16px; } .td-faq-list > .td-faq-item { width:100%; } /* ========================================================================== FAQ ITEM ========================================================================== */ .td-faq-item { width:100%; border: 1px solid var(--theme-palette-color-6); background: var(--theme-palette-color-8); } /* ========================================================================== FAQ QUESTION ========================================================================== */ .td-faq-question { margin:0; } /* ========================================================================== FAQ TOGGLE ========================================================================== */ .td-faq-toggle { display:flex; align-items:center; width:100%; min-width:0; box-sizing:border-box; padding:24px 28px; border:0; background:transparent; color:var(--theme-palette-color-3); text-align:left; cursor:pointer; font-size:16px; font-weight:700; line-height:1.5; gap:20px; list-style:none; } /* * Remove default details marker */ .td-faq-toggle::-webkit-details-marker { display:none; } .td-faq-toggle:hover, .td-faq-toggle:focus { color: var(--theme-palette-color-1); } /* ========================================================================== FAQ NUMBER ========================================================================== */ .td-faq-number { flex:none; color: var(--theme-palette-color-1); font-size:14px; font-weight:700; } /* ========================================================================== FAQ QUESTION TEXT ========================================================================== */ .td-faq-question-text { flex:1; min-width:0; overflow-wrap:anywhere; word-break:normal; } /* ========================================================================== FAQ ICON ========================================================================== */ .td-faq-icon { position:relative; flex:none; width:16px; height:16px; } /* * Plus / Minus SVG replacement * * CSS drawing only. * * Can be replaced by inline SVG later. */ .td-faq-icon::before, .td-faq-icon::after { content:""; position:absolute; background: var(--theme-palette-color-3); transition: transform .25s ease, background-color .25s ease; } .td-faq-icon::before { width:16px; height:2px; top:7px; left:0; } .td-faq-icon::after { width:2px; height:16px; top:0; left:7px; } /* * Hover */ .td-faq-item:hover .td-faq-icon::before, .td-faq-item:hover .td-faq-icon::after { background: var(--theme-palette-color-1); } .td-faq-toggle:hover .td-faq-icon::before, .td-faq-toggle:hover .td-faq-icon::after, .td-faq-toggle:focus .td-faq-icon::before, .td-faq-toggle:focus .td-faq-icon::after { background: var(--theme-palette-color-1); } /* * Open state * * details[open] */ .td-faq-item[open] .td-faq-icon::after { transform: rotate(90deg); } .td-faq-item[open] .td-faq-icon::before { background: var(--theme-palette-color-1); } .td-faq-item[open] .td-faq-icon::after { background: var(--theme-palette-color-1); } /* * Open state * * PHP Shared FAQ: * button[aria-expanded="true"] */ .td-faq-toggle[aria-expanded="true"] .td-faq-icon::after { transform: rotate(90deg); } .td-faq-toggle[aria-expanded="true"] .td-faq-icon::before, .td-faq-toggle[aria-expanded="true"] .td-faq-icon::after { background: var(--theme-palette-color-1); } /* ========================================================================== FAQ ANSWER ========================================================================== */ .td-faq-answer { padding: 0 28px 24px 68px; color: var(--theme-palette-color-5); } .td-faq-answer-content { width:100%; max-width: 720px; } .td-faq-answer-content > :first-child { margin-top:0; } .td-faq-answer-content > :last-child { margin-bottom:0; } /* ========================================================================== FAQ RESPONSIVE ========================================================================== */ @media(max-width:767px){ .td-faq-toggle { padding: 20px; gap:14px; font-size:15px; } .td-faq-answer { padding: 0 20px 20px 20px; } } /* ========================================================== PROCESS COMPONENT TitanDrill Reusable Process / Timeline System Gutenberg Structure: Columns .td-process-grid .td-process-grid--3 Column .td-process-step Stack Paragraph .td-process-step__number H3 Paragraph Used for: - OEM Cooperation Process - Manufacturing Process - Quality Control Process - Product Development Process ========================================================== */ /* ========================================================== Process Grid Base ========================================================== */ .td-process-grid { display:grid !important; gap:48px 40px; } /* ========================================================== 3 Column Modifier ========================================================== */ .td-process-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); } /* Reset Gutenberg Columns */ .td-process-grid > .wp-block-column { margin:0; width:auto; flex-basis:auto; } /* ========================================================== Process Step ========================================================== */ .td-process-step { position:relative; min-width:0; } /* Allow the internal Gutenberg Stack to use the full available width */ .td-process-step > .wp-block-group { width:100%; } /* ========================================================== Step Number ========================================================== */ .td-process-step__number { position:relative; width:100%; margin:0 0 20px; padding-bottom:16px; color: var(--theme-palette-color-1); font-size:20px; font-weight:800; line-height:1; letter-spacing:.02em; } /* ========================================================== Horizontal Connector Line ========================================================== */ .td-process-step__number::before { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: rgba(74,79,85,.30); } /* ========================================================== Horizontal Connector Arrow ========================================================== */ .td-process-step__number::after { content:""; position:absolute; right:0; bottom:-3px; width:7px; height:7px; border-top: 2px solid var(--theme-palette-color-1); border-right: 2px solid var(--theme-palette-color-1); transform: rotate(45deg); } /* Desktop: Hide outgoing arrow on Step 03 and Step 06 */ .td-process-grid--3 > .td-process-step:nth-child(3n) .td-process-step__number::after { display:none; } /* ========================================================== Content Spacing ========================================================== */ .td-process-step h3 { margin-top:0; margin-bottom:16px; } /* Remove unnecessary spacing from final element inside Stack */ .td-process-step > .wp-block-group > :last-child { margin-bottom:0; } /* ========================================================== Tablet 2 Columns ========================================================== */ @media(max-width:999px){ .td-process-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); } .td-process-grid { gap:40px 32px; } /* Restore arrows hidden by desktop 3-column rule */ .td-process-grid--3 > .td-process-step:nth-child(3n) .td-process-step__number::after { display:block; } /* Hide arrow at end of each tablet row */ .td-process-grid--3 > .td-process-step:nth-child(2n) .td-process-step__number::after { display:none; } } /* ========================================================== Mobile Vertical Timeline ========================================================== */ @media(max-width:767px){ .td-process-grid--3 { grid-template-columns:1fr; } .td-process-grid { gap:32px; } .td-process-step { padding-left:32px; } /* Number no longer needs horizontal connector space */ .td-process-step__number { width:auto; margin-bottom:12px; padding-bottom:0; font-size:18px; } /* Disable desktop horizontal line */ .td-process-step__number::before { display:none; } /* Disable desktop arrow */ .td-process-step__number::after { display:none !important; } /* ====================================================== Vertical Connector ====================================================== */ .td-process-step::before { content:""; position:absolute; top:4px; bottom:-32px; left:7px; width:1px; background: rgba(74,79,85,.30); } /* Vertical Arrow */ .td-process-step::after { content:""; position:absolute; left:4px; bottom:-29px; width:7px; height:7px; border-right: 2px solid var(--theme-palette-color-1); border-bottom: 2px solid var(--theme-palette-color-1); transform: rotate(45deg); } /* Final step stops timeline */ .td-process-step:last-child::before, .td-process-step:last-child::after { display:none; } .td-process-step h3 { margin-bottom:12px; } } /* ========================================================== CAPABILITY LIST COMPONENT TitanDrill Reusable Technical Capability List Gutenberg Structure: Group .td-capability-list Group .td-capability-item Paragraph .td-capability-item__number Group / Stack .td-capability-item__content H3 Paragraph Used for: - OEM Manufacturing Capability - Manufacturing Capability Sections - Technical Capability Sections - Future Quality / Supply Capability Sections ========================================================== */ /* ========================================================== Capability List ========================================================== */ .td-capability-list { width:100%; margin-top:32px; } /* ========================================================== Capability Item ========================================================== */ .td-capability-item { display:grid; grid-template-columns: 36px minmax(0,1fr); column-gap:20px; align-items:start; padding:24px 0; border-bottom: 1px solid rgba(74,79,85,.20); } /* First item */ .td-capability-item:first-child { padding-top:0; } /* Last item */ .td-capability-item:last-child { padding-bottom:0; border-bottom:0; } /* ========================================================== Capability Number ========================================================== */ .td-capability-item__number { margin:0; color: var(--theme-palette-color-1); font-size:14px; font-weight:700; line-height:1.4; } /* ========================================================== Capability Content ========================================================== */ .td-capability-item__content { min-width:0; } /* Reset Gutenberg spacing */ .td-capability-item__content > :first-child { margin-top:0; } .td-capability-item__content > :last-child { margin-bottom:0; } /* H3 spacing only Typography and color remain global */ .td-capability-item__content h3 { margin-top:0; margin-bottom:12px; } /* ========================================================== Tablet ========================================================== */ @media(max-width:999px){ .td-capability-list { margin-top:28px; } .td-capability-item { grid-template-columns: 34px minmax(0,1fr); column-gap:18px; padding:22px 0; } .td-capability-item:first-child { padding-top:0; } .td-capability-item:last-child { padding-bottom:0; } } /* ========================================================== Mobile ========================================================== */ @media(max-width:767px){ .td-capability-list { margin-top:24px; } .td-capability-item { grid-template-columns: 28px minmax(0,1fr); column-gap:14px; padding:20px 0; } .td-capability-item:first-child { padding-top:0; } .td-capability-item:last-child { padding-bottom:0; } .td-capability-item__number { font-size:13px; } .td-capability-item__content h3 { margin-bottom:10px; } } /* ========================================================== DARK SECTION MODIFIER TitanDrill Reusable Dark Section Context Usage: Group class: td-section td-section--dark Responsibility: - Dark section background - Heading color in dark context - Paragraph / list text color in dark context Does NOT control: - Section spacing - Grid layout - Card layout - Typography scale ========================================================== */ .td-section--dark { background-color: var(--theme-palette-color-3); } /* Headings */ .td-section--dark h2, .td-section--dark h3, .td-section--dark h4 { color: var(--theme-palette-color-8); } /* Supporting text */ .td-section--dark p, .td-section--dark li { color: rgba(255,255,255,.72); } /* Links inside dark sections */ .td-section--dark a { color: var(--theme-palette-color-1); } .td-section--dark a:hover, .td-section--dark a:focus { color: var(--theme-palette-color-2); } /* ========================================================== DARK ICON CARD MODIFIER TitanDrill Dark Technical Capability Card Usage: Column / Group class: td-icon-card td-icon-card--dark Used for: - Quality capability cards - Dark technical capability sections - Non-interactive industrial information cards ========================================================== */ .td-icon-card--dark { background-color: rgba(255,255,255,.03); border-color: rgba(255,255,255,.14); box-shadow:none; } /* Dark capability cards are informational, not interactive navigation cards. Override default td-icon-card hover. */ .td-icon-card--dark:hover { border-color: rgba(255,255,255,.14); box-shadow:none; } /* Card heading */ .td-icon-card--dark h3 { color: var(--theme-palette-color-8); } /* Card body */ .td-icon-card--dark p { color: rgba(255,255,255,.72); } /* Icon itself continues using existing td-icon-card__icon rules. Recommended SVG stroke: #F14000 */ /* ========================================================== Dark Icon Card Responsive ========================================================== */ @media(max-width:999px){ .td-icon-card--dark { border-color: rgba(255,255,255,.14); } } @media(max-width:767px){ .td-icon-card--dark { background-color: rgba(255,255,255,.03); } } .td-icon-card--plain { padding:0; background:transparent; border:0; box-shadow:none; transition:none; } .td-icon-card--plain:hover { border-color:transparent; box-shadow:none; } /* ========================================================== STICKY INDEX COMPONENT TitanDrill Reusable Sticky Index Layout Used for: - OEM Product Family Index - Capability Index - Resource Index - Future Technical Navigation Sections Gutenberg Structure: Group .td-section .td-sticky-index-section Columns .td-sticky-index-layout Column Group .td-sticky-index__aside H2 Paragraph Buttons Column Group .td-product-family-list ========================================================== */ /* ========================================================== Sticky Index Section ========================================================== */ .td-sticky-index-section { background-color:transparent; } /* ========================================================== Sticky Index Layout ========================================================== */ .td-sticky-index-layout.wp-block-columns { align-items:flex-start; gap:64px !important; } .td-sticky-index-layout > .wp-block-column { align-self:stretch; } /* ========================================================== Sticky Aside ========================================================== */ .td-sticky-index__aside { position:sticky; top:96px; width:100%; } .td-sticky-index__aside > :first-child { margin-top:0; } .td-sticky-index__aside > :last-child { margin-bottom:0; } /* ========================================================== Product Family List ========================================================== */ .td-product-family-list { width:100%; max-width:none; } /* Gutenberg constrained Group reset Ensure every family row can use the full width of the right column. */ .td-product-family-list.is-layout-constrained > :where( :not(.alignleft):not(.alignright):not(.alignfull) ) { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } /* Fallback if Gutenberg layout class changes */ .td-product-family-list > .td-product-family-item { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } /* ========================================================== Product Family Item ========================================================== */ .td-product-family-item { display:grid; /* Desktop / Tablet: content takes its natural usable width, arrow follows with a fixed gap. */ grid-template-columns:auto auto; justify-content:start; align-items:center; column-gap:24px; width:100%; padding:0; border-bottom: 1px solid var(--theme-palette-color-6); } .td-product-family-item:first-child { padding-top:0; } .td-product-family-item:last-child { padding-bottom:0; border-bottom:0; } /* ========================================================== Product Family Content ========================================================== */ .td-product-family-item__content { width:auto; max-width:100%; min-width:0; gap:0 !important; } /* Prevent Gutenberg Stack from collapsing to min-content width. */ .td-product-family-item__content.wp-block-group { width:auto !important; max-width:none !important; } /* Gutenberg spacing reset */ .td-product-family-item__content > :first-child { margin-top:0; } .td-product-family-item__content > :last-child { margin-bottom:0; } .td-product-family-item__content h3 { margin-top:0; margin-bottom:10px; word-break:normal; overflow-wrap:normal; } .td-product-family-item__content p { margin-top:0; margin-bottom:0; word-break:normal; } /* ========================================================== Product Family Links ========================================================== */ .td-product-family-item__content h3 a { color:inherit; text-decoration:none; transition: color .25s ease; } .td-product-family-item__content h3 a:hover, .td-product-family-item__content h3 a:focus { color: var(--theme-palette-color-1); } /* ========================================================== Product Family Arrow ========================================================== */ .td-product-family-item__arrow { margin:0; line-height:1; } .td-product-family-item__arrow a { display:inline-flex; align-items:center; justify-content:center; color: var(--theme-palette-color-1); font-size:24px; line-height:1; text-decoration:none; transition: color .25s ease, transform .25s ease; } .td-product-family-item__arrow a:hover, .td-product-family-item__arrow a:focus { color: var(--theme-palette-color-2); transform: translateX(4px); } /* ========================================================== Tablet ========================================================== */ @media(max-width:999px){ .td-sticky-index-layout.wp-block-columns { display:flex; flex-direction:column; gap:48px !important; } .td-sticky-index-layout > .wp-block-column { width:100%; flex-basis:auto; } .td-sticky-index__aside { position:static; top:auto; } .td-product-family-item { column-gap:20px; } .td-product-family-item:first-child { padding-top:0; } .td-product-family-item:last-child { padding-bottom:0; } } /* ========================================================== Mobile ========================================================== */ @media(max-width:767px){ .td-sticky-index-layout.wp-block-columns { gap:40px !important; } /* Mobile: content fills available width, arrow sits at far right. */ .td-product-family-item { grid-template-columns: minmax(0,1fr) auto; justify-content:stretch; column-gap:16px; } .td-product-family-item__content { width:100%; max-width:none; min-width:0; } .td-product-family-item__content.wp-block-group { width:100% !important; max-width:none !important; } .td-product-family-item:first-child { padding-top:0; } .td-product-family-item:last-child { padding-bottom:0; } .td-product-family-item__content h3 { margin-bottom:8px; } .td-product-family-item__arrow a { font-size:20px; } } /* ========================================================== CARD GRID MODIFIER 2 Column Layout Used for: - Large Image Cards - Customer / Audience Cards - Future 2-column editorial card layouts Base: .td-card-grid ========================================================== */ .td-card-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); } /* Tablet: Keep 2 columns */ @media(max-width:999px){ .td-card-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } /* Mobile: Stack to 1 column */ @media(max-width:767px){ .td-card-grid--2 { grid-template-columns: 1fr !important; } } /* ========================================================== IMAGE CARD COMPONENT TitanDrill Reusable Editorial Image Card Gutenberg Structure: Cover .td-image-card Group / Stack .td-image-card__content H3 Paragraph Used for: - Customer Type Cards - Audience Cards - Industrial Context Cards - Future visual editorial cards Responsibility: - Image aspect ratio - Bottom-left content positioning - Gradient readability layer - Internal content spacing Does NOT control: - Grid layout - Section spacing - Interactive card behavior ========================================================== */ /* ========================================================== Image Card Base ========================================================== */ .td-image-card.wp-block-cover { position:relative; display:flex; align-items:flex-end; justify-content:flex-start; aspect-ratio:16 / 9; min-height:0; padding:0; overflow:hidden; border-radius:0; } /* ========================================================== Background Image ========================================================== */ .td-image-card.wp-block-cover .wp-block-cover__image-background { width:100%; height:100%; object-fit:cover; } /* ========================================================== Remove Gutenberg Cover Color Overlay Image remains natural. Readability is handled by our gradient below. ========================================================== */ .td-image-card.wp-block-cover .wp-block-cover__background { display:none; } /* ========================================================== Bottom Gradient Keeps upper image relatively clean while creating sufficient contrast behind the text. ========================================================== */ .td-image-card.wp-block-cover::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient( to top, rgba(31,35,39,.88) 0%, rgba(31,35,39,.62) 38%, rgba(31,35,39,.18) 70%, rgba(31,35,39,0) 100% ); } /* ========================================================== Gutenberg Inner Container Force content to bottom-left regardless of Gutenberg Cover content-position settings. ========================================================== */ .td-image-card.wp-block-cover > .wp-block-cover__inner-container { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; width:100%; height:100%; margin:0; } /* ========================================================== Image Card Content ========================================================== */ .td-image-card__content { width:100%; max-width:560px; padding:32px; gap:0 !important; } /* Reset Gutenberg constrained Group behavior */ .td-image-card__content.is-layout-constrained > :where( :not(.alignleft):not(.alignright):not(.alignfull) ) { width:100%; max-width:none; margin-left:0; margin-right:0; } /* ========================================================== Heading ========================================================== */ .td-image-card__content h3 { margin-top:0; margin-bottom:12px; color: var(--theme-palette-color-8); } /* ========================================================== Description ========================================================== */ .td-image-card__content p { margin-top:0; margin-bottom:0; color: rgba(255,255,255,.80); } /* ========================================================== Tablet ========================================================== */ @media(max-width:999px){ .td-image-card__content { padding:24px; } } /* ========================================================== Mobile ========================================================== */ @media(max-width:767px){ .td-image-card__content { max-width:none; padding:24px; } .td-image-card__content h3 { margin-bottom:10px; } } /* ========================================================== OEM INQUIRY CHECKLIST COMPONENT TitanDrill Reusable Inquiry / Requirement Checklist Gutenberg Structure: Left Column: Group .td-inquiry-note Paragraph Right Column: Group .td-inquiry-list Group .td-inquiry-item Paragraph .td-inquiry-item__marker Group / Stack .td-inquiry-item__content H3 Paragraph Group .td-inquiry-reference H3 Paragraph Used for: - OEM Inquiry Guidance - Technical Requirement Checklists - Future RFQ Preparation Sections ========================================================== */ /* ========================================================== Inquiry List ========================================================== */ .td-inquiry-list { width:100%; max-width:none; } /* Reset Gutenberg constrained layout so every checklist row uses full width. */ .td-inquiry-list.is-layout-constrained > :where( :not(.alignleft):not(.alignright):not(.alignfull) ) { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } /* ========================================================== Inquiry Item ========================================================== */ .td-inquiry-item { display:grid; grid-template-columns: 24px minmax(0,1fr); column-gap:20px; align-items:start; width:100%; padding:22px 0; border-bottom: 1px solid rgba(74,79,85,.18); } /* First item */ .td-inquiry-item:first-child { padding-top:0; } /* ========================================================== Inquiry Marker ========================================================== */ .td-inquiry-item__marker { margin:2px 0 0; color: var(--theme-palette-color-1); font-size:18px; font-weight:700; line-height:1; } /* ========================================================== Inquiry Item Content ========================================================== */ .td-inquiry-item__content { width:100%; min-width:0; gap:0 !important; } /* Reset Gutenberg Stack spacing */ .td-inquiry-item__content > :first-child { margin-top:0; } .td-inquiry-item__content > :last-child { margin-bottom:0; } /* Component-level H3 typography */ .td-inquiry-item__content h3 { margin-top:0; margin-bottom:8px; font-size:20px; line-height:1.3; font-weight:700; } /* Description */ .td-inquiry-item__content p { margin:0; } /* ========================================================== Additional References ========================================================== */ .td-inquiry-reference { width:100%; margin-top:24px; padding:24px 28px; border-left: 3px solid var(--theme-palette-color-1); background-color: var(--theme-palette-color-8); } /* Reset Gutenberg spacing */ .td-inquiry-reference > :first-child { margin-top:0; } .td-inquiry-reference > :last-child { margin-bottom:0; } /* Reference heading */ .td-inquiry-reference h3 { margin-top:0; margin-bottom:8px; font-size:18px; line-height:1.35; font-weight:700; } /* Reference paragraph */ .td-inquiry-reference p { margin:0; } /* ========================================================== Left-Side Guidance Note ========================================================== */ .td-inquiry-note { margin-top:28px; margin-bottom:28px; padding-left:20px; border-left: 3px solid var(--theme-palette-color-1); } /* Reset Gutenberg spacing */ .td-inquiry-note > :first-child { margin-top:0; } .td-inquiry-note > :last-child { margin-bottom:0; } .td-inquiry-note p { margin:0; font-weight:600; } /* ========================================================== Tablet ========================================================== */ @media(max-width:999px){ .td-inquiry-item { grid-template-columns: 22px minmax(0,1fr); column-gap:18px; padding:20px 0; } .td-inquiry-item:first-child { padding-top:0; } .td-inquiry-reference { margin-top:22px; padding:22px 24px; } .td-inquiry-note { margin-top:24px; margin-bottom:24px; } } /* ========================================================== Mobile ========================================================== */ @media(max-width:767px){ .td-inquiry-item { grid-template-columns: 20px minmax(0,1fr); column-gap:14px; padding:18px 0; } .td-inquiry-item:first-child { padding-top:0; } .td-inquiry-item__marker { margin-top:3px; font-size:16px; } .td-inquiry-item__content h3 { margin-bottom:6px; font-size:18px; } .td-inquiry-reference { margin-top:20px; padding:20px; } .td-inquiry-reference h3 { font-size:17px; } .td-inquiry-note { margin-top:22px; margin-bottom:22px; padding-left:16px; } } /* ========================================================== Sticky Aside Modifier Disable sticky behavior where column heights are balanced ========================================================== */ .td-sticky-index__aside--static { position:static; top:auto; } /* ========================================================== CAPABILITY PANEL COMPONENT TitanDrill Connected Dark Capability Panel Gutenberg Structure: Columns .td-capability-panel Column .td-capability-panel__item H3 Paragraph Used for: - Manufacturing Foundation - Quality Capabilities - Technical Capability Summaries - Future Corporate Capability Sections Responsibility: - Connected dark panel - Equal-width capability items - Internal divider system - Responsive transformation Does NOT control: - Section spacing - Section header - Global typography scale ========================================================== */ /* ========================================================== Panel ========================================================== */ .td-capability-panel { display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); gap:0 !important; width:100%; background-color: var(--theme-palette-color-3); } /* Reset Gutenberg Columns behavior */ .td-capability-panel > .wp-block-column { width:auto; min-width:0; margin:0; flex-basis:auto; } /* ========================================================== Panel Item ========================================================== */ .td-capability-panel__item { position:relative; padding:28px 26px; } /* 1px solid divider between items */ .td-capability-panel__item + .td-capability-panel__item { border-left: 1px solid rgba(255,255,255,.18); } /* ========================================================== Content ========================================================== */ .td-capability-panel__item > :first-child { margin-top:0; } .td-capability-panel__item > :last-child { margin-bottom:0; } /* Heading */ .td-capability-panel__item h3 { margin-top:0; margin-bottom:12px; color: var(--theme-palette-color-8); font-size:17px; line-height:1.35; font-weight:700; letter-spacing:-0.01em; } /* Description */ .td-capability-panel__item p { margin-top:0; margin-bottom:0; color: rgba(255,255,255,.72); font-size:13px; line-height:1.65; } /* ========================================================== Tablet 2 × 2 Grid ========================================================== */ @media(max-width:999px){ .td-capability-panel { grid-template-columns: repeat(2,minmax(0,1fr)); } .td-capability-panel__item { padding:26px 24px; } /* Reset desktop divider logic */ .td-capability-panel__item + .td-capability-panel__item { border-left:0; } /* Vertical divider between columns */ .td-capability-panel__item:nth-child(even) { border-left: 1px solid rgba(255,255,255,.18); } /* Horizontal divider between rows */ .td-capability-panel__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); } } /* ========================================================== Mobile Single Connected Stack ========================================================== */ @media(max-width:767px){ .td-capability-panel { grid-template-columns:1fr; } .td-capability-panel__item { padding:22px 20px; } /* Remove tablet vertical divider */ .td-capability-panel__item:nth-child(even) { border-left:0; } /* Every item after the first receives a horizontal divider */ .td-capability-panel__item:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,.18); } .td-capability-panel__item h3 { margin-bottom:10px; font-size:16px; } .td-capability-panel__item p { font-size:13px; } } /* ========================================================== ABOUT — MANUFACTURING SPLIT ========================================================== */ .td-manufacturing-split { display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap:0 !important; width:100%; } /* Reset Gutenberg Columns */ .td-manufacturing-split > .wp-block-column { width:auto; min-width:0; margin:0; flex-basis:auto; } /* ========================================================== Items ========================================================== */ .td-manufacturing-split__item { padding:0 48px; } .td-manufacturing-split__item:first-child { padding-left:0; } .td-manufacturing-split__item:last-child { padding-right:0; border-left: 1px solid rgba(31, 35, 40, 0.12); } /* ========================================================== Content ========================================================== */ .td-manufacturing-split__item h3 { margin-top:0; margin-bottom:16px; } .td-manufacturing-split__item p { margin-top:0; margin-bottom:0; } /* ========================================================== Mobile ========================================================== */ @media(max-width:767px){ .td-manufacturing-split { grid-template-columns:1fr; } .td-manufacturing-split__item { padding:0; } .td-manufacturing-split__item:last-child { margin-top:28px; padding-top:28px; border-left:0; border-top: 1px solid rgba(31, 35, 40, 0.12); } } /* ========================================================== CONTENT LABEL COMPONENT TitanDrill Reusable Content Group Label Used for: - Supply Scope - Technical Requirements - Product Standards - Option Groups - Supporting Content Registries Responsibility: - Small uppercase contextual label - Identifies a content group below it Does NOT replace: - H2 - H3 - Section headings ========================================================== */ .td-content-label { margin-top:0; margin-bottom:0; color: var(--theme-palette-color-5); font-size:12px; font-weight:700; line-height:1.4; letter-spacing:1.5px; text-transform:uppercase; } /* ========================================================== EDITORIAL LIST COMPONENT TitanDrill Reusable Structured Content List Used for: - OEM capability summaries - Manufacturing / quality content groups - Supporting technical content - Other non-card, non-numbered editorial lists Structure: .td-editorial-list .td-editorial-item h3 p Responsibility: - Vertical spacing between content items - Subtle separators between items - Internal heading / paragraph spacing Does NOT control: - Typography scale - Background - Card styling - Grid / column layout ========================================================== */ .td-editorial-list { margin-top: 32px; } .td-editorial-item { padding: 24px 0; border-bottom: 1px solid rgba(74, 79, 85, 0.16); } .td-editorial-item:first-child { padding-top: 0; } .td-editorial-item:last-child { padding-bottom: 0; border-bottom: 0; } .td-editorial-item > h3 { margin-top: 0; margin-bottom: 10px; } .td-editorial-item > p { margin-top: 0; margin-bottom: 0; } /* ========================================================== SHARED PHP CTA & BUTTON COMPONENT TitanDrill Shared Conversion System Used by: - Drilling Method Pages - Blog Posts Archive - Blog Category Archives - Future PHP-rendered conversion sections Backward Compatibility: Existing .td-method-* class names are retained so current Method renderers do not require markup changes. Responsibility: - Shared PHP-rendered button styling - Shared final CTA structure - CTA overlay - CTA container spacing - CTA responsive behavior Does NOT control: - Method-specific overlay opacity - Method-specific Hero button context - Page-specific CTA content ========================================================== */ /* ========================================================== SHARED PHP BUTTON FOUNDATION ========================================================== */ .td-method-btn { display:inline-flex; align-items:center; justify-content:center; min-height: var(--theme-button-min-height, 48px); padding: var(--theme-button-padding, 5px 20px); border: 1px solid transparent; border-radius:0; font-family: var(--theme-button-font-family, inherit); font-size: var(--theme-button-font-size, 15px); font-weight: var(--theme-button-font-weight, 700); line-height:1.2; text-align:center; text-decoration:none; white-space:nowrap; cursor:pointer; transition: color .25s ease, background-color .25s ease, border-color .25s ease; } .td-method-btn:hover, .td-method-btn:focus { text-decoration:none; transform:none; box-shadow:none; } .td-method-btn:focus-visible { outline: 2px solid var(--theme-palette-color-1, #f14000); outline-offset:3px; } /* ========================================================== PRIMARY BUTTON ========================================================== */ .td-method-btn-primary { border-color: var(--theme-palette-color-1, #f14000); background: var(--theme-palette-color-1, #f14000); color: var(--theme-palette-color-8, #ffffff); } .td-method-btn-primary:hover, .td-method-btn-primary:focus { border-color: var(--theme-palette-color-2, #ff5c26); background: var(--theme-palette-color-2, #ff5c26); color: var(--theme-palette-color-8, #ffffff); } /* ========================================================== SECONDARY BUTTON — BASE ========================================================== */ .td-method-btn-secondary { border-color: var(--theme-palette-color-3, #1f2937); background:transparent; color: var(--theme-palette-color-3, #1f2937); } .td-method-btn-secondary:hover, .td-method-btn-secondary:focus { border-color: var(--theme-palette-color-3, #1f2937); background: var(--theme-palette-color-3, #1f2937); color: var(--theme-palette-color-8, #ffffff); } /* ========================================================== SHARED PHP FINAL CTA ========================================================== */ .td-method-cta { position:relative; isolation:isolate; display:flex; align-items:center; width:100%; min-height:420px; overflow:hidden; background-color: var(--theme-palette-color-4, #2b2f33); background-position:center; background-repeat:no-repeat; background-size:cover; color: var(--theme-palette-color-8, #ffffff); } /* ========================================================== CTA OVERLAY ========================================================== */ .td-method-cta-overlay { position:absolute; inset:0; z-index:0; background: rgba( 0, 0, 0, var(--td-method-cta-overlay-opacity, 0.45) ); pointer-events:none; } /* ========================================================== CTA CONTAINER ========================================================== */ .td-method-cta .ct-container { position:relative; z-index:1; width:100%; max-width:none; margin-right:auto; margin-left:auto; padding-right:4vw; padding-left:4vw; } /* ========================================================== CTA INNER ========================================================== */ .td-method-cta-inner { display:flex; flex-direction:column; justify-content:center; width:100%; padding-top:96px; padding-bottom:96px; } /* ========================================================== CTA CONTENT ========================================================== */ .td-method-cta-content { max-width:760px; } .td-method-cta-title { margin: 0 0 24px; color: var(--theme-palette-color-8, #ffffff); } .td-method-cta-text { max-width:720px; color:#e5e7ea; } .td-method-cta-text p { margin: 0 0 18px; } .td-method-cta-text > :last-child { margin-bottom:0; } /* ========================================================== CTA ACTIONS ========================================================== */ .td-method-cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; } /* ========================================================== CTA SECONDARY BUTTON — DARK CONTEXT ========================================================== */ .td-method-cta .td-method-btn-secondary { border-color: rgba( 255, 255, 255, 0.85 ); color: var(--theme-palette-color-8, #ffffff); } .td-method-cta .td-method-btn-secondary:hover, .td-method-cta .td-method-btn-secondary:focus { border-color: var(--theme-palette-color-8, #ffffff); background: var(--theme-palette-color-8, #ffffff); color: var(--theme-palette-color-3, #1f2937); } /* ========================================================== CTA CONTAINER — TABLET ========================================================== */ @media(max-width:999px){ .td-method-cta .ct-container { padding-right:3vw; padding-left:3vw; } } /* ========================================================== CTA — MOBILE ========================================================== */ @media(max-width:767px){ .td-method-cta { min-height:360px; } .td-method-cta .ct-container { padding-right:5vw; padding-left:5vw; } .td-method-cta-inner { padding-top:64px; padding-bottom:64px; } .td-method-cta-actions { flex-direction:column; align-items:stretch; gap:16px; } .td-method-cta-actions .td-method-btn { width:100%; white-space:normal; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .td-method-btn { transition:none; } } /* ========================================================== BLOG CTA OVERLAY OVERRIDE ========================================================== */ .td-blog-cta { --td-method-cta-overlay-opacity:0.55; } /* ========================================================== BLOG ARCHIVE — CONTENT SPACING Applies to: - Main Blog Posts Archive - Blog Category Archives Controls: Header → Archive Content Archive Content → Final CTA The shared Final CTA is intentionally excluded. ========================================================== */ /* Desktop */ body.blog #main > .ct-container, body.category #main > .ct-container { padding-top:64px; padding-bottom:96px; } /* Tablet */ @media(max-width:999px){ body.blog #main > .ct-container, body.category #main > .ct-container { padding-top:56px; padding-bottom:80px; } } /* Mobile */ @media(max-width:767px){ body.blog #main > .ct-container, body.category #main > .ct-container { padding-top:40px; padding-bottom:64px; } } /* ========================================================= SINGLE POST — CONTENT AREA VERTICAL SPACING ========================================================= */ body.single-post #main > .ct-container-full { padding-top: 80px; padding-bottom: 80px; } @media (max-width: 999px) { body.single-post #main > .ct-container-full { padding-top: 64px; padding-bottom: 64px; } } @media (max-width: 767px) { body.single-post #main > .ct-container-full { padding-top: 48px; padding-bottom: 48px; } } /* ========================================================================== TITANDRILL SHARED INQUIRY FORM ========================================================================== */ .td-contact-form .fluentform .ff-el-form-control { border-radius: 0 !important; border: 1px solid #d8d8d8 !important; font-size: 14px !important; color: #111111 !important; padding: 12px 16px !important; background-color: #ffffff !important; box-shadow: none !important; transition: border-color 0.2s ease-in-out; } .td-contact-form .fluentform .ff-el-form-control:focus { border-color: var(--theme-palette-color-4, #2B2F33) !important; outline: none !important; box-shadow: none !important; } .td-contact-form .fluentform .ff-el-form-control::placeholder { color: #a0a0a0 !important; font-size: 13px; } .td-contact-form .fluentform .ff-el-form-label { margin-bottom: 8px !important; } .td-contact-form .fluentform .ff-el-form-label label { font-size: 13px !important; font-weight: 600 !important; color: #333333 !important; } .td-contact-form .fluentform .ff-btn-submit { width: 100% !important; height: 56px !important; background-color: var(--theme-palette-color-1, #F14000) !important; border: 1px solid var(--theme-palette-color-1, #F14000) !important; border-radius: 0 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; transition: background-color 0.25s ease, border-color 0.25s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: none !important; } .td-contact-form .fluentform .ff-btn-submit:hover, .td-contact-form .fluentform .ff-btn-submit:focus { background-color: var(--theme-palette-color-2, #FF5C26) !important; border-color: var(--theme-palette-color-2, #FF5C26) !important; color: #ffffff !important; transform: none !important; box-shadow: none !important; } .td-contact-form .fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--theme-palette-color-1, #F14000); outline-offset: 2px; } .td-contact-form .td-contact-form__note { font-size: 13px; line-height: 1.6; color: var(--theme-palette-color-5, #4A4F55); } /* ========================================================================== TITANDRILL CONTACT INFORMATION ========================================================================== */ .td-contact-info { width: 100%; } /* Intro 与右侧 Form Intro 保持接近的正文节奏 */ .td-contact-info > p { margin: 0 0 28px; } /* 联系方式整体容器 */ .td-contact-details { width: 100%; } /* 每组联系方式采用表单同源的 1px 工业分隔线 */ .td-contact-detail { padding: 20px 0; border-bottom: 1px solid #d8d8d8; } /* LOCATION / EMAIL / PHONE */ .td-contact-detail__label { margin: 0 0 8px !important; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-palette-color-5, #4A4F55); } /* 实际联系方式 */ .td-contact-detail__value { margin: 0 !important; font-size: 14px; line-height: 1.6; color: var(--theme-palette-color-4, #2B2F33); } /* Email / Phone 等可点击内容 */ .td-contact-detail__value a { color: var(--theme-palette-color-4, #2B2F33); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s ease; } .td-contact-detail__value a:hover, .td-contact-detail__value a:focus { color: var(--theme-palette-color-1, #F14000); } /* Tablet / Mobile */ @media (max-width: 999px) { .td-contact-detail { padding: 18px 0; } } /* ========================================================= Legal Pages ========================================================= */ .td-legal-page { padding-top: 64px; padding-bottom: 96px; } @media (max-width: 999px) { .td-legal-page { padding-top: 48px; padding-bottom: 72px; } } @media (max-width: 767px) { .td-legal-page { padding-top: 40px; padding-bottom: 56px; } }